Googleサイトの見た目を変更する方法

1時間で学べるGoogleサイトの教科書

シリーズ連載を通して「Google サイトの基礎」を解説しています。


こんにちは、たま(@closuppo)です!

今回は「第8回:Googleサイトの見た目を変更する方法」について説明していきます。

テーマのスタイルやメニューの位置、ファビコンを挿入してサイトの見た目を良くする方法を学びましょう。


たま

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


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

目次



まずはじめに

サイトのテーマを変更することで、サイト全体のイメージを変えることができます。

また、メニューの位置や色を変更することができたり、ブラウザのタブに画像(ファビコン)を設定することもできます。

googlesites-logo14

タマ

それぞれ設定方法

を見ていきましょう


サイトをデザインする方法

テーマメニューより、【シンプル】【アリストテレス】【ディプロマット】【Vision】【レベル】【インプレション】の6種類からテーマを選ぶことができます。

テーマのスタイルや色、フォントのスタイルを変更することでサイト全体の見た目が変わります。

googlesites-logo02

テーマを変更する

クリック一つで好きなテーマを選ぶことができ、簡単にサイトのイメージを変更することができます。

デフォルトのテーマは【シンプル】で設定されています。

お好みのテーマを選択してください。

googlesites-logo03

色を変更する

テーマカラーを変更することができます。

お好みのカラーを選択してください。

googlesites-logo04

フォントを変更する

各テーマに沿ったフォントが3パターン用意されています。

【フォントスタイル】のからサイトのイメージに合ったフォントを選んでください。

googlesites-logo05

ナビゲーションメニューを変更する方法

ナビゲーションメニューの位置を【上側】または【左側】に変更することができ、色を変更することもできます。


メニューの位置を変更する

ページ右上の設定またはメニューバーの設定をクリックしてください。

googlesites-logo06

設定をクリックするとウインドウが表示され、移動メニューの【モード】を選択することでメニューの位置を変更することができます。

googlesites-logo07

メニューの位置は、デフォルトでは【上】に設定されています。

【上】の設定ではメニューは上側に表示され、【横】に設定した場合は左側に表示されます。

googlesites-logo08

メニューの色を変更する

設定をクリックするとウインドウが表示され、移動メニューから【色】を選択することでメニューの色を変更することができます。

【透明】【白】【黒】から選択してください。

googlesites-logo09

ファビコンを挿入する方法

ブラウザのタブに画像(ファビコン)を挿入することができます。

たくさんタブを開いているときでも、そのタブがどのページなのかを簡単に区別することができます。


ココ

ファビコンって何ですか?

タマ

ブラウザのタブに反映

される画像のことです

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

【ファビコン】のアップロードを選ぶとローカルPCのフォルダ画面から画像を選択でき、選択を選ぶとGoogleドライブやGoogle画像検索から画像を選択することができます。

googlesites-logo12

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

googlesites-logo15

まとめ

  • 【シンプル】【アリストテレス】【ディプロマット】【Vision】【レベル】【インプレション】の6種類からテーマを選ぶことができる。
  • テーマの色やフォントスタイルを変更できる。
  • 【設定】の【移動】メニューより、メニューの位置を上側または左側に変更できる。
  • 【設定】の【移動】メニューより、色を変更できる。
  • 【設定】の【ブランドの画像】メニューより、ファビコンを設置できる。

Googleサイトの見た目を変更する方法についてお伝えしました。

テーマの種類や色、フォントの種類、メニューの位置や色を変えるとサイトの見た目がガラリと変わります。

見た目を良くして、サイトの利便性を高めていきましょう。


ココ

細かなところにも気を使う

見やすいサイトにしていきます

タマ

次回は「ヘッダーをカスタマ

イズする方法サイト」を見て

いきましょう



ポータルサイトを作りながら体系的に学ぶ

googleサイト006

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

サイト作成で学んだ基礎知識をアウトプットすることで、実用的なGoogleサイトのスキルを習得することができます。

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