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サイトを体系的に学ぶ方法を解説してます。

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

  • 第1回:新規作成とテーマの変更
  • 第2回:ヘッダーをカスタマイズ(※作成中)
  • 第3回:お知らせページ作成(※作成中)
  • 第4回:社内イベントの共有(※作成中)
  • 第5回:業務ツールの共有(※作成中)
  • 第6回:書類の共有(※作成中)
  • 第7回:営業部のページを作成(※作成中)
  • 第8回:研修用のページ作成(※作成中)
  • 第9回:フッターをカスタマイズ(※作成中)