02-03.ホームページ全体の構築

ホームページを開設したら、いよいよホームページを編集していきます。
ここでは、ロゴや背景、その他さまざまなパーツ(ガジェット)を活用し、
ホームページ全体のデザインや設定の方法を解説します。



画像素材の準備

素材のダウンロード
解説のため、以下のURLに素材を用意しています。
ご自身でヘッダーなどの素材をお持ちでなく、
編集の手順をすぐに学びたい、
という方は、以下の素材をお使いください。

https://drive.google.com/drive/folders/0B4zJ7XqFPp9jLTJSSnJ3RWhRWVE


画像素材の解説

logo.png…138×59ピクセル
ロゴ画像として使用

wrapper.png
2200×125ピクセル
ヘッダー部分の画像として使用

footer.png
2200×125ピクセル

 フッター部分の画像として使用

back.png
2200×310ピクセル
背景画像として使用

button01.png
200×40ピクセル
 サイドバー部分に、各ページへのリンクボタンとして使用

button02.png
200×40ピクセル
 サイドバー部分に、各ページへのリンクボタンとして使用

button03.png
200×40ピクセル
 サイドバー部分に、各ページへのリンクボタンとして使用

button04.png
200×40ピクセル
 サイドバー部分に、各ページへのリンクボタンとして使用

favicon.ico
16×16ピクセル
ファビコン(ブラウザの上部のタブに表示されるときの小さな画像)として使用
 ※favicon.icoというファイル名でないと、ファビコンには指定できないので注意

(再掲)上記の画像はサンプルとして以下に格納していますので、ご自由にご利用ください。


ホームページ全体の横幅の設定

 
 「その他の設定(m)」をクリック
「サイトのレイアウトを編集」をクリック


 サイトの幅を設定
「サイトの幅」を「カスタム」にチェック
「980」と入力して「閉じる」をクリック
スマートフォンやタブレットからサイトが表示された時、
画面内に収まるサイズが「980」ピクセルなので、ここでは980と設定しています。サイトの幅に決まりはありませんが、多くの端末で見やすい設定として、950〜1020ピクセルの範囲内で指定するのが一般的です。




水平ナビゲーションの設定

 
 「その他の設定(m)」をクリック
「サイトのレイアウトを編集」をクリック

水平ナビゲーションの設定
「水平ナビゲーション」のボタンをクリック

水平ナビゲーションが表示される
「水平ナビゲーションを編集」をクリックすると、
ホームページ内で作成したページや、
外部のページへのリンクを追加するなどの編集ができます。
ここでは、水平ナビゲーションの追加の説明は割愛します。



サイドバーの設定


 
 「その他の設定(m)」をクリック
「サイトのレイアウトを編集」をクリック



「サイドバー」のボタンをクリック
(初期状態で、サイドバーが表示されるようになっています)

「Sidebar」の編集ボタンや追加ボタンをクリックすると、
様々なホームページのパーツ(ガジェット)や、
画像、テキストなどをサイドバーに表示させることが
できるようになります。サイドバーの編集方法については、
別のページを作成した後で解説していますので、
ここでは説明を割愛します。


ヘッダーの編集

 
  「その他の設定(m)」をクリック
「サイトのレイアウトを編集」をクリック


ヘッダーの設定
ヘッダーの領域をクリック

ヘッダーを編集
「ロゴを選択」を、カスタムロゴに設定すると、
ロゴの部分を好きな画像に設定することができます。
ファイルを選択をクリックします。

ファイルをアップロード後、
ロゴ画像をヘッダーの配置を設定できます。

素材からヘッダー画像を選択

ロゴに指定したい画像を選択します。

ロゴの画像をご自身で用意していなくて、
実装の手順を学びたい方は、以下のURLから、
上記のイメージで用いている素材をご利用いただけます。


https://drive.google.com/drive/folders/0B4zJ7XqFPp9jLTJSSnJ3RWhRWVE


ヘッダーを保存

ロゴ画像をアップロード完了後、
「OK」ボタンをクリックすると、
ヘッダーにロゴ画像を設定できます。


水平ナビゲーションを編集

 
   「その他の設定(m)」をクリック
「サイトのレイアウトを編集」をクリック

 水平ナビゲーションが表示される
「水平ナビゲーションを編集」をクリック


水平ナビゲーションにページを追加 
「ページを追加」をクリックするとホームページ内のページを、
「URLを追加」をクリックすると外部のサイトのページなどを、
水平ナビゲーションに追加することができます。

水平ナビゲーションに、サイトマップや最近の更新履歴を追加することもできます。
表示するページは、矢印ボタンを用いて、表示させる順番、階層構造の設定を行うことができます。
一度設定した後で、ページ名を表示させないようにするには、ゴミ箱のアイコンをクリックします。

水平ナビゲーションに表示させる文字のスタイルを、
ボックス、タブ、リンクから選択することができます。

設定が完了したら、「OK」ボタンをクリックすることで、
水平ナビゲーションの設定が完了します。


 水平ナビゲーションをクリック
「ページを追加」をクリックした場合、
ホームページ内のページを指定して、
「OK」ボタンをクリックすることで、
水平ナビゲーションにページを追加できます。


 ナビゲーションに外部のページを追加
「URLを追加」をクリックした場合、
水平ナビゲーションに表示させるテキスト、
そのリンクをクリックした時に表示させるページのURLや
メールアドレスを指定することができます。
指定したURLを、ブラウザの新しいタブで開くようにするか、
同じタブで開くようにするかを指定することができます。
「OK」ボタンをクリックすることで、
水平ナビゲーションにページを追加できます。

外部のサイトへのリンクを表示させる場合、
 新しいウィンドウでリンクを開かせることで、
 サイトからの離脱が行われにくくなります。



 ここまでで、Google Sitesで作成したホームページの全体の構築の編集について解説しました。


いかがでしたか?サンプル画像を用いて、
・ホームページの横幅の設定
・水平ナビゲーションの設定と、ページの追加
・サイドバーの設定
・ヘッダー部分へのロゴ画像の追加

を行いました。

ホームページ内へのページの追加や、
ページ内の編集ができると、
水平ナビゲーションに表示させられるページを増やすことができます。
ページの追加については、別の章で解説をしています。

 次のページでは、ホームページ全体ではなく、
編集したページの中だけで反映される編集をしていきます。

次のページへ
>02-04.ページ設定の変更


goo.gl/gqs4PN
本サイトの内容が本になりました!
2016/02/14 第2版出版!
2016/01/01 初版出版!

Facebookページ
Facebookページ

YouTubeチャンネル
プログラミング解説YouTubeチャンネル

ブログ
お知らせやアプリ開発の記事

TekuruWebサイト
Tekuruプログラミングスクール