BLOG

ブログ

Google サイトでテーマ色やページ構成をカスタマイズする方法

Google サイト タイトル

Future ‘I’ Mark株式会社の得能です!

 

この記事はGoogle サイトの使い方【基本編】シリーズその③となります。

前回はGoogle サイトに入力したテキストの設定方法、YouTube動画の導入を通じてWebページにコンテンツを挿入する方法をご紹介しました。

Google サイトでテキストやコンテンツを自分好みに編集する方法

 

今回はWebページのデザインや構成をカスタマイズする方法をご紹介します。

ここまでの操作方法の説明でWebページタイトルの背景色や挿入したテキストの強調色などを見て「青色ばっかりだなぁ」と思いませんでしたか?

今までご説明していなかっただけでWebサイトの色のテーマを設定する方法はあります!今回の内容の1つめとして、Webサイトのテーマ色やフォントのデザインを設定する方法についてご説明します。

また、ここまでWebページに見出しや本文、YouTube動画を挿入しましたが、今後このような形でWebページを組み上げていくと1ページあたりのコンテンツ量が増えてしまい見づらいWebページとなってしまいます。

それを解決する方法として、別ページを作成して内容やカテゴリ別にそれぞれのページを構成していく必要があります。Google サイトでも別ページを作成してWebサイトを拡大していく方法がありますので、今回の記事の内容2つめとしてそれをご紹介します。

今回の内容をマスターすることで、より自分らしく、見やすいWebページを作成することができます。学んでいきましょう。

 

Google サイトの3つの編集項目~「挿入」「ページ」「テーマ」~

これまで、Google サイト利用時に何かと利用してきた右側メニューですが、上側に「挿入」「ページ」「テーマ」と書かれていることにお気づきでしたか?

 

実は、前回までの記事においては「挿入」タブ内にある機能のみしか利用していませんでした!

「挿入」以外の機能というのが、今回ご紹介するページの作成・管理ができる「ページ」、ページのテーマ色やフォントデザインの変更などができる「テーマ」なのです。

 

Webページのデザインを変更して自分らしいWebページにする方法

では、「ページ」タブをクリックしてWebページのデザイン面を変更していきましょう。この章を読み終えたときにはWebページの雰囲気が大きく変わっていることでしょう。

 

Webページのテーマを設定する方法

「ページ」タブ内に入るとこのような画面に移動すると思います。ここでテーマ色やフォントなどを設定していきます。

Google サイト テーマ設定

 

現在は画像のように「シンプル」という名のボックスの中にある青色のマークにチェックマークが入っていると思います。これは現在のWebページのテーマ設定およびGoogle サイトで作るWebサイトの初期設定テーマが”シンプルデザインの青”で設定されているということになります。

「シンプル」の下の「アリストテレス」を選択してみましょう。一気にWebページのデザインが変更されたのがおわかりいただけましたか?これがWebページの”テーマの変更”です。

Google サイト テーマ設定

 

試しに他のテーマも選択してみましょう。Webサイトのイメージが大きく変化するのがお分かりいただけると思います。

このようにテーマの変更によってWebサイトのデザイン、色、フォントなどを一気に変更することができるのです。

Webサイトのデザインは「シンプル」、「アリストテレス」、「ディプロマット」、「ビジョン」、「レベル」、「インプレッション」の6種類から選択できます。(2017年8月現在)

 

色やフォントを個別に設定する方法

では、さらに踏み込んでWebサイトのテーマ色やフォントを個別に設定する方法を見ていきましょう。

色は自分好みに自由に設定することができ、フォントは各テーマごとに各3種類用意されておりその中から一つ選択することができます。

Webページの色は設定したいテーマを選択した後に現れる色の丸印の中から好きな色を選択、もしくは一番右側のマークをクリックして好きな色を設定することで決められます。

Google サイト テーマ 色 設定

 

フォントは「フォント スタイル」をクリックすることで設定をすることができます。

Google サイト フォント 設定

 

アリストテレステーマ下では「モダン」「クラシック」「ボールド」の中から選択できます。フォントの名前はテーマによって違います。

Google サイト フォント 設定

 

今回、テーマ-色-フォントをアリストテレス-朱色-ボールドの設定に変更してみた結果がこちら!前回記事終了時と比べてサイトのイメージが大きく変わったのではないでしょうか。

Google サイト テーマ 設定

 

テキストの色やフォントの設定はページ全体に影響しますので、部分的に変更を加えたいと考えている方には少し物足りないかもしれません。

しかし、ページ全体に設定を反映させることでページデザインに統一感を持たせ、ページのデザインの質や視認性などを向上させているのだと思います。

 

Webページへの新規ページ追加およびカスタマイズする方法

さて、デザインの次はページの構成です。「ページ」タブをクリックしてページ設定画面を開いてください。

 

Webページに新規ページを追加する方法

ページタブをクリックすると以下のような画面が表示されると思います。先ほどのテーマタブに比べるとかなり寂しいメニューになりますが、ページ数が増加するとともにこのメニューで表示される情報の量も増えていきます!

Google サイト ページ追加

 

まずは新規ページを追加してみましょう。小さくプラスマークの入ったこちらの丸印が新規ページ作成ボタンとなります。クリックしてください。

Google サイト ページ 追加

 

新しく作成するページの名前をどうするか聞かれるので記入します。ここでは「サブページ」と設定しました。

Google サイト ページ追加

 

しばらくすると新しいページの名前が追加されて、左側のページビューでは新しく追加されたページが表示されます。

Google サイト ページ 追加

 

さて、新規ページを追加するとWebページの右上に何やら文字が現れました。これが「ナビゲーション」です。実際にこのWebサイトを閲覧時に他のページアクセスしたいと考えた場合に利用するのがこのナビゲーションです。

Google サイト ページ ナビゲーション

 

ナビゲーションは新規ページを追加していくとともに増えていきます。また、スマホでの閲覧時には自動的にスライドメニューに変換されて左上に表示されます。メニューをクリックすると別ページへのリンクが出現します。(GIF参照)

Google サイト ページ ナビゲーション

 

各ページの詳細を設定する方法

さて、各ページの設定項目を見てみましょう。ページの名前右側にある縦に点が3つ並んだアイコンをクリックすると設定メニューが表示されます。

Google サイト ページ

 

Google サイト ページ

 

各設定項目について簡単にですが説明していきます。

 

ホームページとして設定

選択しているページを現在作成しているWebページたちのトップページとして設定します。

 

ページのコピーを作成

選択しているページをコピーして複製します。

 

ページ名を変更

選択しているページの名前を変更します。ちなみに、これまで作成してきたWebページにも「ホーム」という名がつけられており、こちらも変更することが可能です。

ページ名が変更されることで、Webページが公開されたときのURLにも影響してきます。

 

サブページを作成

選択しているページの配下にページを作成することができます。サブページというのは下記の図のイメージのページのことです。

Google サイト ページ

 

3段目以降のサブページは作成することができません。また、サブページを作成するとナビゲーションも変化します。サブページをいくつか抱えた親ページにマウスカーソルを合わせると配下のサブページへのリンクが出現するようになります。

Google サイト ページ

 

サイトからページを削除

選択しているページを削除します。ホームページに設定されているページや配下にサブページを持っているページは削除することができません。

 

ナビゲーションに表示しない

選択しているページをナビゲーション表示から消します。ただし、ページそのものを消しているわけではないので、設定後も引き続きURLなどからアクセスすることは可能なままとなります。

 

Webページのナビゲーション位置を設定する方法

さて、ナビゲーションの位置ですが、実はカスタマイズ可能です。ナビゲーションのあるバーにマウスカーソルを当てると左側に歯車のアイコンが出現するのでクリックします。

すると、ナビゲーションの位置を”上”か”横”にするかという選択画面になります。これまでは上でしたので横に設定してみましょう。

Google サイト ページ ナビゲーション

 

横に設定するとこのようにWebページの横側にメニューが表示されるようになります。スマートフォンなどでの端末で閲覧した場合によるナビゲーションの表示の変化は先ほどといっしょです。

Google サイト ページ ナビゲーション

 

Webページに会社のロゴを設定する方法

少し話は逸れますが、ナビゲーション付近にある設定機能なので最後にひとつ。ナビゲーションの左側に会社などのロゴを設定することができます。

まず、ナビゲーションにマウスカーソルを当てると現れる「ロゴを追加」をクリックしてください。

Google サイト ロゴ 追加

 

画像を設定してくださいという案内が出るので「アップロード」、もしくは「選択」(Google Driveから選択、ネットから検索など)のどちらかの手段で画像を設定してください。

Google サイト ロゴ 追加

 

ロゴを設定するとこのような画面が表示されます。ここでさらに設定をしていくことでロゴが見やすくなる、魅力的なWebサイトに仕上がります。

Google サイト ロゴ 追加

背景

ナビゲーションバーの背景色を”透明”、”白”、”黒”の中から選択できます。会社のロゴが見えやすい、Webページのデザインを損なわない色を選択してください。

 

テーマにロゴの色を使用

「色やフォントを個別に設定する方法」でWebページのテーマ色を設定しましたが、「テーマにロゴの色」をクリックすることでもページの色を変更できます。Googleの人工知能が会社のロゴのメインカラーを判断し、その色をWebページに適用してくれます…すごい!

 

ロゴの削除

ロゴ画像右上にあるゴミ箱のマークをクリックするとロゴ画像を削除することができます。

以上がロゴの設定になります。設定したロゴ画像は作成しているWebページのすべてに設定されます。

Google サイト ロゴ 追加

 

おわりに

今回は作成しているWebページのテーマや色などを変更する方法、ページやナビゲーションの管理について見てきました。

今回学んだ操作方法を利用することで今Google サイトで作成しているWebページを自分オリジナルに染めることができます!また、ページ作成の幅が広がる、見やすさの向上にもつながります。

Webページ作成になれるにはとにかくやってみるのみです。本記事を参考にどうぞWebページ作成を試してみてください!

 

次回は基本編の最後として「Webページの公開」についてご説明していきたいと思います。

 

お問い合わせ

当社ではG Suite正規代理店としてG Suite導入による業務改善提案・サポートを行っております。

Google サイトの使い方をもっと知りたい、G Suiteを導入してみたいという場合はぜひお気軽に当社までお問い合わせください!

その他、京都、大阪、兵庫、滋賀、奈良など、関西圏での法人携帯(BIZパッケージ)、ZohoCRMの導入、などもFuture’I’Markへおまかせください!

 

お問い合わせはこちらから

 

おすすめの記事

Page Top