フレバトイベントサイト講座

ここでは以下のようなGoogleサイトを使ったフレンドバトルサイトの構築方法について説明していきたいと思います。
・紅蓮団を救え！
・超合衆国カントウを倒せ！
・大罪を封じ込めろ！

１．Googleサイトの準備

GoogleサイトはGoogleのアカウント（Gmail）をもっていると使えるサービスの一つです。Googleサイトはこのような特徴があります。
・無料で作成できます
・サイト編集も公開もとっても簡単です
・編集にはPCが必要です
まあ、僕がHTMLを学び始めたころからは、こんなに簡単にWeb制作ができるとは思ってもみなかったくらい簡単です(;^ω^)

ではまずGoogleサイトを準備してみましょう。
Googleのアカウント（Gmailアカウント）を準備したら、PCでGoogleの検索サイトに接続しGoogleドライブを開きます。
その次に「＋新規」ボタンを押して、Googleサイトを新規で作成します。

サイトが作成されるので、サイト名とページ名を入力しましょう。今回はサークルで使用するページとして作る想定で、サークル名を入れてみました。

次に右上の「公開」ボタンを押すと、公開用のウェブアドレスを求められます。サークル名などをローマ字にして、公開ボタンを押して設定します。

これでGoogleサイトの準備までは終わりです♪公開ボタンの右側の▼を押して、「公開したサイトを表示」を押すと実際のWebページを見ることができます。

２．フレバトイベントページを追加する

ここから本題のフレバトイベントページの作成になります。
右側にある編集バーから、①ページを選択して、②右下の⊕ボタンを押します。
次に③「詳細▼」を押してから、④名前とカスタムパス（英数字記号）を決めて入力します。
（カスタムパスは設定するとURLが短縮できるので、TwitterにURLを載せるときとかに文字数制限に引っ掛かりにくくなります）
最後に⑤完了ボタンを押せば、イベント用のページが作成されます。

３．バナー画像を設定する

イベント用ページの上部に表示されているバナー画像を設定してみましょう。
ページのバナー部分（上部の帯）の左下にある「画像を変更」を押して、アップロードを選択します。
（画像を選択…はGoogleドライブにアップ済みの画像から選択することになります）
PC内画像の選択をすれば、バナー部分の画像が変わります。簡単ですねー。

４．画像と文章を追加する

Googleサイトでの文章編集と画像挿入はとても簡単です。
右側の編集バーから「挿入」を選択して、ページに追加したいものを選択するだけです。

あとページ上で左ダブルクリックをするだけで、以下のような挿入アイコンが表示されて、挿入したいアイテムを選択することで追加ができます。
まずは画像を挿入してみましょう。（以下の赤いアイコン部分を選択します）

Googleドライブ内の画像が一覧で表示されますので、その中で入れたい画像を選択して右下のINSERTボタンを押します。

これだけで簡単に画像をページに入れられます。前もって、Googleドライブ内に画像をアップロードしておくと簡単です。
画像のサイズを変えるのには、画像を選択して●印をマウスで移動させるだけで、大きくも小さくもできます。

文章を入れるのは「Tt　テキストボックス」を選択して入れることができます。
入れる場所も、マウスでドラッグすることで簡単に移動できます。

５．IDコピー用のテーブルを入れる

ここまではGoogleサイトの基本機能で出来ましたが、IDコピー用のテーブルを作るには、ちょっと工夫が必要になります。
でも安心してください。テンプレートを用意しているので、簡単に組み込むことができますので。

まずはこちらの≪IDコピー用テーブル　テンプレコード≫をPC上で開きます。
全体を選択（Ctrl+A）してコピーし（Ctrl＋C）、メモ帳などのテキストエディタに貼り付け（Ctrl+V）ます。

この中で先頭に数字がついている「XX_ユーザー名」「XX_ ID」「XX_機体名」の部分を書き換えます。（XXの部分には数字が入っています）

もし11人以上を登録したい場合は、一番下にある<tr>～</tr>で囲まれている部分をコピーして追加してから、「XX_ユーザー名」「XX_ID」「XX_機体名」を入力してください。
あと「id_XX」となっている部分（2カ所）のXX部分の数字を11、12、13などの数字に置き換えてください。

ここまでで下準備が終わりました。あとはサイトのページに貼り付けるだけです。
サイト編集画面の右側にある編集バーから、①「＜＞埋め込む」を選びます。次に②埋め込みコードを選択して、③入力欄に先ほどまでメモ帳で編集していた内容をコピペして④次へを押します。
確認画面が表示されるので、「挿入」を選択してページに入れます。

６．ページを公開する

最後に右上の「公開」ボタンを押して、ページを公開したら終わりです。

質問やもっと詳しく知りたい方

質問やもっと詳しく知りたい方は、TwitterのunoアカウントまでDMしてください！！