～家族、グループの世話役さん必見!!～ Googleサイトでのホームページ作りは超簡単！

(1)

～家族、グループの世話役さん必見!!～

Googleサイトでの

ホームページ作りは超簡単！

(2)

■著者プロフィール荻野宏二（おぎの・こうじ）荻野技術士事務所代表 1939年生。慶応義塾大学工学部卒。２５年にわたり電機メーカーのSEとして大規模銀行オンラインシステムの構築に携わる。その後、慶應義塾大学環境情報学部を卒業。現在、ブラウザからJava、JSP,サーブレットなどを遠隔から実習できるシステムを開発し、e-ラーニングによる教育を実施中。約１０年前からシニアの仲間とテニスクラブを作り、テニスを楽しんでいる。このクラブのホームページを作るきっかけでGoogleサイトを知り、Googleサイトによるプライベートホームページ作りに興味を持つ。

(3)

はじめに

Googleは、いろいろな機能を提供していますが、その中の一つにホーム

ページを作成するGoogleサイト機能があります。

この機能は、無料で、特にサーバーも必要なく、簡単（HTMLは不要）に

ホームページが出来るという点で大きな特徴をもっています。

私は、この機能を使って、2010年夏、テニス仲間のホームページを作成し

ました。

簡単さ、見栄えのよさからこれは、プライベートなホームページを作るのに

最も適した優れものだと強く感じました。そんな訳で、是非皆さんにご紹介

をし、ホームページ作りを気軽に楽しんで頂きたいとこの本を出版すること

にしました。

いろいろな仲間のグループ、クラス会、同期会、ファミリなどで自分たちの

ホームページを作ってみたいという人たちに是非読んで頂きたいと思いま

す。

この本は、テニス仲間のホームページを例として、非常にシンプルな内容

のホームページからステップバイステップに内容を充実させ、最終的には

目標とするホームページを完成させるという構成をとっています。

ワープロが出来る人であれば、すぐにでもホームページが作成でき、充分

に楽しむことができると信じています。

気軽に、是非ホームページ作りに挑戦してみてください！

2011年2月吉日

著者

(4)

第０部目標とするホームページ

---6 １こんなテニスクラブのホームページを作ります---8 ２ホームページの構造---9

第１部シンプルなホームページの作成

---14 １ Googleアカウントを作る---16 ２シンプルなホームページを作る---20 ３ホームページの公開---54

第２部本格的なホームページの作成

---58 １テキストのみのページを追加---60 ２サイドバーに新しいカテゴリを追加---71 ３写真を取込んだページを追加---76 ４サイドバーにリンク情報を追加---110 ５サイトバーに｢サイト管理者」の写真を追加---122 ６｢お知らせ情報」ページを追加---141 ７カレンダーを取込んだページを追加---151 ８ Googleガジェットを取込んだページを追加---167 ９メニュー項目の順序を入替える---180 １０動画を取込んだページを追加---186 １１文字、背景、リンクのカラーを変える---195 １２｢最新のお知らせ情報」をトップページに追加---205 １３ Googleマップを取込んだページを追加---209

第３部 Q&A

---214 Q０１サイトのページ構成を知る方法は？---216 Q０２ページを削除するには？---218 Q０３サイトを削除するには？---220 Q０４サイトバーのカテゴリの順番を変えるには？---222 Q０５一つのGoogleアカウントで複数のサイトを作るには？---225 Q０６テーマにはどんなものがあるか？---228 Q０７サイトのテーマを変更するには？---229 Q０８ Googleサイトで使用できる保存容量は？---232 Q０９サイトで使用している容量を知るには？---233 Q１０サイトのヘッダー部のタイトル名を変えるには？---235 Q１１サイトバーの幅のサイズを変えるには？---237 Q１２コンテンツのレイアウトを２段組にするには？---240 Q１３フッターを作成するには？---244 Q１４ホームページを会員のみに公開するには？---248 Q１５ヘッダー部をロゴのみで置き換えるには？---252

(6)

(7)

１こんなテニスクラブのホームページを作ります

簡単なホームページの雛形からステップバイステップで目標とするテニスクラブのホームページを作っていきます。

簡単なホームページの雛形

(8)

私たちが対象としている家族やグループでの小規模なホームページは、次のような「ヘッダーの部分」「サイドバーの部分」「コンテンツの部分」からなる構造であれば充分です。

ヘッダーの部分

サイドバーの部分

コンテンツの部分

(9)

ヘッダー部

ヘッダー部には、ロゴとホームページのタイトルを入れます(ロゴは無くても良いです）。ロゴの部分ホームページのタイトルの部分

サイドバー部

サイドバー部は、カテゴリ毎に分けられ、各カテゴリ毎にメニュー項目が収められています。各カテゴリ毎には名称が付けられます。カテゴリカテゴリの名称メニュー項目

(10)

ページのコンテンツ部分

基本的には、サイドバーにあるメニュー項目毎にページが対応しています。そのページ内にコンテンツの情報が収められます。どれかのメニュー項目がクリックされれば、そのメニュー項目に対応したページが表示されます。イメージ的には、メニュー項目が目次項目に相当し、目次項目がクリックされると、その目次項目に該当する内容が表示されると言った関係になっています。下図では、｢トップページ」のメニュー項目がクリックされ、｢トップページ」のコンテンツが表示されています。「トップページ」は、ホームページがアクセスされたとき、最初に出るように設定されている特殊なページでもあります。「トップページ」のコンテンツの部分

(11)

「テニスルールあれこれ」のメニュー項目がクリックされれば、｢テニスルールあれこれ」のコンテンツが表示されます。

(12)

(13)

１ Googleアカウントを作る

Googleアカウントの作成

Googleは、単なる検索サイトではなくいろいろなサービスを提供しています。例えば、電子メールであるGmail、Googleカレンダー、画像を管理するPicasa、ホームページを作成するGoogleサイトなどが提供されています。これらのサービスを使うには、まずGoogleアカウントを作成する必要があります。Googleサービスを受けるためのパスポートのようなものです。 ①「ログイン」をクリック ②「アカウント作成」をクリックまずGoogleのトップページを表示します。そして、番号の順に従って操作してください。

(14)

③自分のメールアドレスを入力 ④パスワードを入力 ⑤画像に表示されている文字を入力 ⑥利用契約を読む ⑦ここをクリック ⑧ここをクリック

(15)

アカウント作成完了の画面が表示されます。

メモ

Googleアカウントに使用するメールアドレス

Googleアカウントを作成するには、アカウント名としてメールアドレスを使います。ここでは、契約しているインターネットプロバイダーで取得したメールアドレスを利用していますが、フリーのメールサービスのメールアドレスを使用しても構いません。特に、Gmailに登録しているメールアドレスを使用する場合は、Gmailに登録した時点で自動的にGoogle アカウントが作成されています。このときは、Googleアカウントを作成する必要はありません。Gmailのメールアドレスとパスワードを入力してログインができます。したがって、Gmailのメールアドレスがあれば、それを使用するほうが良いでしょう。

(16)

メールソフトを起動し、Googleから届いたメールを開きます。

ここのアドレスをクリック

登録の確認

次のような確認画面が表示されます。

(17)

２シンプルなホームページを作る

それでは、簡単なホームページを作ってみましょう。

第一部で作成するシンプルなホームページは、次のようなものです。

(18)

ホームページの雛形を作る

Googleのトップページを表示します。そして番号の順に操作してください。

①ログインをクリック

(19)

③｢その他」のプルダウンボタンをクリック

④｢サイト」をクリック

(20)

⑥ ⑩｢サイトを作成」をクリックホームページの雛形が出来上がります。形としては、もう立派なホームペジです。 ⑥「空のテンプレート」を選択 ⑧アドレスを入力他人と同じアドレスになるとやり直しになる (自動入力されるのをそのまま使ってもよい） ⑨画像文字を入力 ⑦ホームページのタイトルを入力

(21)

ホームページのデザインを変える

(22)

ホームページの雛形を表示

もしブラウザの画面でホームページの雛形が表示されていない場合には、次の様にして表示します。

①ログインをクリック

(23)

③｢その他」のプルダウンボタンをクリック

④｢サイト」をクリック

⑤｢私たちのテニスクラブ」をクリック

作成したホームページが表示されました。「マイサイト」の画面が表示されます。

(24)

①「サイドバーを編集」をクリック

②｢色とフォント」をクリック

(25)

③プルダウンメニューから｢テーマ」(デザイン）を選択します通常は、デフォルトの「運河」が選択されています選択すると、画面の下にプレビューが表示されます好みの「テーマ」を選択してください例題では「オレンジグレー」を選択しています ④｢変更の保存」をクリック ⑤｢サイトに戻る」をクリック

(26)

デザインが変更され、ホームページらしくなりました。

メモ｢テーマ」

③で「テーマ」を選択しています。｢テーマ」と言えばちょっと分かり難い言葉ですが、ホームページの見た目を変えるデザインのテンプレートと思えば良いでしょう。全部で５２種類が提供されています。

メモ｢ホームページ」と｢サイト」

｢ホームページ」と｢サイト」の言葉の意味の違いは、明確に区別されていないのが現状です。ブラウザのウインドウで表示されているのがページと呼ばれるものです。このページが集まって本のようになっているのが「サイト」になります。その表紙にあたるページが｢トップページ」です。現状では、｢ホームページ」は、この｢トップページ」を言う場合と、「サイト」を｢ホームページ」と呼ぶ場合があります。この本の中では、｢ホームページ」と「サイト」は、同じ意味に使っています。

(27)

雛形を自分のホームページ用に編集する

自分のホームページ用に編集主な変更点１ヘッダー部ロゴの挿入｢このサイトを検索」の部分を削除２サイドバー部「ホーム」を「トップページ」に変更｢サイトマップ」を削除「テニスクラブ」のカテゴリ名を追加３ページのコンテンツ部自分のコンテンツ内容を入力雛形のホームページを自分のホームページらしく変更してみます。雛形のホームページ

(28)

ヘッダー部の編集

「このサイトの検索」を削除小規模なホームページを対象としているので、ヘッダーの部分にある「このサイトを検索」はあまり必要ないので削除します（別にあってもかまいませんが）。「このサイトを検索」の部分は、次のようにして削除します。 ①「サイトバーを編集」をクリック

(29)

③｢検索を設定」をクリック

④ここのチェックを外す

⑤「OK]をクリック ②｢サイトのレイアウト」をクリック

(30)

⑥｢変更を保存」をクリック ⑦｢サイトに戻る」をクリック

「このサイトを検索」の部分は除去されています。

(31)

ロゴの挿入

ヘッダー部に下図のようにテニスボールのロゴを挿入してみます。ロゴ ①「サイドバーを編集」をクリック ③「ロゴ」を変更」をクリック ②｢サイトレイアウト」をクリック

(32)

④「カスタムログ」のボタンをクリックして選択

⑤「参照」をクリック

(33)

⑦「OK」をクリック

⑧｢変更を保存」をクリック ⑨｢サイトに戻る」をクリック

(34)

(35)

ロゴの挿入によりタイトルが崩れた場合

ロゴを挿入すると、ヘッダー部のホームページのタイトルが崩れる場合があります。

対処１ブラウザーのサイズを大きくしてみる

(36)

対処２ブラウザのサイズを変更しても直らないときは、次のようにサイトのレイアウトを変更します。

①｢サイドバーを編集」をクリック

③「サイトのレイアウトを変更」をクリック

(37)

④「サイトの幅」を指定して広げる

⑥「OK]をクリック

(38)

(39)

サイドバー部の編集

｢サイトマップ」を削除小規模なホームページを対象としているので、サイドバー部にある「サイトマップ」(ホームページ内のページの構成のリスト）もあまり必要性がなく取り除きます。｢サイトマップ」の部分は、次のように削除します。 ①｢サイドバーを編集」をクリック｢サイトマップ」を取り除きます

(40)

③「編集」をクリック

④ここのチェックを外す

⑤「OK]をクリック

(41)

(42)

メニュー項目名の変更

メニュー項目が「ホーム」になっているのを「トップページ」に変えます。

「トップページ」は、次のようにして変えます。

(43)

②ページのタイトルを記述する部分

ここの「ホームページ」を「トップページ」に変更します

③｢保存」をクリック

メニュー項目｢ホームページ」が｢トップページ」に変わりました。

(44)

カテゴリ名の追加

｢トップページ｣が属するカテゴリ名「テニスクラブ」を追加します。

(45)

①｢サイドバーを編集」をクリック

②｢サイトのレイアウト」をクリック

(46)

④タイトルを｢テニスクラブ」に書き換える ⑤｢タイトルを表示する」を選択 ⑥｢ナビゲーションを自動的に整理する」の選択を外す（自分で整理する方がわかりやすいので） ⑦｢OK」をクリック

(47)

⑧｢変更を保存」をクリック

⑨｢サイトに戻る」をクリック

(48)

ページのコンテンツ部の編集

トップページにコンテンツ(内容）を書き込みます。ここでは、テキストだけの内容とします。

(49)

次にように編集画面を呼び出し、コンテンツの内容を書き込みます。 ①｢ページを編集」をクリック上図の赤枠がコンテンツの入力エリアです。このエリアにワープロのようにツールバーを使ってテキストを書き込みます。ツールバー ②テキストのコンテンツを書き込む編集画面でテキスト入力

(50)

②｢保存」をクリック

(51)

３ホームページの公開

それでは、このシンプルなホームページをインターネットからアクセスしてみましょう。ここでは、インターネットから誰もが閲覧できるように設定します。 ①｢その他の操作」をクリック ②「このサイトを共有」をクリック

ホームページ公開の設定

(52)

③「変更」をクリック

「私たちのテニスクラブ」のホームページURL

④「ウエブ上で一般公開」を選択

(53)

⑥「閉じる」をクリック

これでインターネットで一般にアクセスが可能となります。そのときのURLはこれです。

(54)

54

会員のみに公開する場合については、「第３部 Q&A」の「Q１４：ホームページを会員のみに公開するには？」を参照してください。

～家族、グループの世話役さん必見!!～ Googleサイトでの ホームページ作りは超簡単！