【Googleサイト】ヘッダーをカスタマイズする方法〜実践編

作りながら学ぶ

シリーズ連載を通して、ポータルサイトを作りながらGoogleサイトを体系的に学ぶ方法を解説。


今回は「第2回:ヘッダーをカスタマイズする方法」について説明していきます。

ページを開いて、まず初めに目にするヘッダーの見た目をデザインしていきましょう。


たま

全シリーズは以下のページにまとめてます


※目次をクリックすると
タイトルの先頭まで移動します(↓)

目次



前回のおさらい

googleサイト006

作成するサンプルサイトはこちら

シリーズ連載を通して上図サンプルサイトを作成しています。

前回の記事では、新しくGoogleサイトを作成してテーマの変更やインターネットに公開する作業を行いました。

今回は、その続きでヘッダーをカスタマイズしていきます。

前回の記事はこちら


ヘッダー画像を挿入する

以下リンク先より、ヘッダー画像をダウンロードしてください。

ヘッダー画像

画像をダウンロードしたら、Googleサイトの背面画像にカーソルを合わせて画像変更ボタンからアップロードを選択してください。

googlesites-study201

アップロードをクリックし、先程ダウンロードした画像を選択し画像を挿入してください。

googlesites-study202

ヘッダーに画像が挿入されました。

googlesites-study203

ココ

画像が切れてますよ

タマ

全体が表示されるように調整

しましょう


見出しのタイプを変更する

背面画像にカーソルを合わせ見出しのタイプボタンをクリックしてください。

googlesites-study204

カバーボタンをクリックしてください。

googlesites-study205

見出しタイプを変更できました。

googlesites-study206

画像の位置も調整しておきましょう。

右下部分にある画像を固定を選択してください。

googlesites-study207

右下を選択してくださいを選択してください。

googlesites-study219

ココ

キレイに表示できました


テキストを変更する

ヘッダー画像にあわせてテキストの大きさと位置を変更しましょう。

テキストボックスを選択し、ゴミ箱ボタンをクリックしてテキストボックスを削除してください。

googlesites-study209

ヘッダー部分をダブルクリックし、新しく【テキストボックス】を追加してください。

googlesites-study210

【はじめてのGoogleサイト】と入力し、【はじめての】の後を改行してください。

テキスト【Googleサイト】の後を5回改行してください。

googlesites-study212

テキスト【はじめての】を選択した状態でフォント サイズ ▼ボタンをクリックし、サイズを【65】に変更してください。

googlesites-study213

次に、テキスト【Google サイト】を選択しフォントサイズを【96】に変更してください。

googlesites-study214

テキストの色ボタンをクリックし、テキストの色を【#434343】に変更してください。

googlesites-study215

ココ

編集できました

タマ

プレビュー画面で編集したサイト

の状態を確認して見ましょう


ロゴ/ファビコンを挿入する

ブラウザのタブに画像(ファビコン)を挿入しましょう。

以下リンク先より、ファビコン画像をダウンロードしてください。

≫ロゴ/ファビコン画像

設定ボタンをクリックし、サイドメニューのブランドの画像を選択してください。

googlesites-study216

アップロードボタンから【ファビコン】と【ロゴ】に画像を設定してください。

googlesites-study217

ファビコンを挿入することができました。

googlesites-study218

まとめ

Gooleサイトのヘッダーをカスタマイズする方法をお伝えしました。

ヘッダーはサイトのイメージに大きく影響するとても重要な部分です。

画像のデザインや大きさに合わせて見出しのタイプを変更し、印象に残るヘッダーを作成しましょう。

全シリーズをまとめているページはこちら


ココ

会社のイメージに合わせて

作成します

タマ

次回は「お知らせページ」を

作成しましょう