テーマを設定してサイト全体のデザインを変更する

Google サイトではタイトルや見出しのフォントやサイズなどが設定されているテーマがいくつか用意されています。デフォルトで設定されているテーマから別のテーマに変更することで、サイト全体のデザインを変更することができます。ここでは Google サイトでテーマを設定する方法について解説します。

(2022 年 04 月 21 日公開 / 2022 年 04 月 21 日更新)

テーマを選択する

作成したサイトでテーマを選択する方法です。テーマはタイトルや見出しで使用する画像やフォントなどを定義したものです。テーマを選択することで定義されたスタイルがサイトに適用されます。テーマを変更するには対象のサイトの編集画面を表示してください。

テーマを選択する(1)

画面右側の「テーマ」タブをクリックしてください。

ページを追加する(2)

画面右側に選択可能なテーマの一覧が表示されます。

ページを追加する(3)

デフォルトでは「シンプル」テーマが使用されています。

それでは例として「ディプロマット」テーマをクリックしてみます。

ページを追加する(4)

ディプロマットテーマで設定されているスタイルがタイトルや見出しのデザインに適用されました。

ページを追加する(5)

今度は「Vison」テーマをクリックしてみると、 Vison テーマで設定されているスタイルがタイトルや見出しのデザインに適用されました。

ページを追加する(6)

テーマの種類はそれほど用意されているわけではありませんが、テーマを変更することでサイト全体のデザインをまとめて変更することができます。

色やフォントスタイルを選択する

テーマの中でも色やフォントスタイルを変更することができます。例えば「デイプロマット」テーマを選択したときは次のように表示されます。

色やフォントスタイルを選択する(1)

「デイプロマット」テーマの中にある別の色をクリックしてみます。

色やフォントスタイルを選択する(2)

するとタイトルの背景色が変更されました。

色やフォントスタイルを選択する(3)

またあらかじめ用意されている色ではなく任意の色を指定する場合は右端の色をクリックしてください。

色やフォントスタイルを選択する(4)

すると色の選択画面が表示されます。この中からから任意の色を選択することができます。

色やフォントスタイルを選択する(5)

色やフォントスタイルを選択する(6)

続いてフォントを変更してみます。「フォントスタイル」の部分をクリックしてください。

色やフォントスタイルを選択する(7)

選択可能なフォントの種類が表示されます。今回は「ヘビー」をクリックしてみます。

色やフォントスタイルを選択する(8)

サイトのタイトルで使用されている文字のフォントが変更されました。

色やフォントスタイルを選択する(9)

このように同じテーマであっても色やフォントスタイルを変更することができます。

テーマ毎のデザインを確認

最後にそれぞれのテーマを選択した場合にどのように表示されるのかを確認します。

シンプルテーマ

最初にシンプルテーマです。フォントスタイルは「中細」「クラシック」「ヘビー」が用意されています。

テーマ毎のデザインを確認(1)

テーマ毎のデザインを確認(2)

アリストテレステーマ

次にアリストテレステーマです。フォントスタイルは「モダン」「クラシック」「太字」が用意されています。

テーマ毎のデザインを確認(3)

テーマ毎のデザインを確認(4)

ディプロマットテーマ

次にディプロマットテーマです。フォントスタイルは「クラシック」「中細」「ヘビー」が用意されています。

テーマ毎のデザインを確認(3)

テーマ毎のデザインを確認(4)

Visionテーマ

次に Vision テーマです。フォントスタイルは「太字」「モダン」「クラシック」が用意されています。

テーマ毎のデザインを確認(5)

テーマ毎のデザインを確認(6)

レベルテーマ

次にレベルテーマです。フォントスタイルは「サンセリフ」「スラブ」「幅狭」が用意されています。

テーマ毎のデザインを確認(7)

テーマ毎のデザインを確認(8)

インプレッションテーマ

最後にインプレッションテーマです。フォントスタイルは「キャピタル」「フランク」「幅狭」が用意されています。

テーマ毎のデザインを確認(9)

テーマ毎のデザインを確認(10)

-- --

Google サイトでテーマを設定する方法について解説しました。

( Written by Tatsuo Ikura )

広告
Profile
profile_img

著者 / TATSUO IKURA

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。