テーマ設定

２．カスタムテーマ

これから作成される場合は、後々の編集作業が軽減されることもあり、カスタムテーマを作成して始めることをお勧めします。特に①色の設定と②テキストの設定は、編集作業に直に関わる項目のため、この2点だけでもまずは設定しましょう。一度作成したテーマも後から何度でも変更も可能です。

テーマ上部のカスタム「+」をクリックします。テーマ作成画面になります。

名前欄に適当な名称を入れます。その下に「ロゴを追加」と「バナー画像を追加」とあります。バナー画像は、「ヘッダー」で説明したものです。ここでは、この2つは飛ばし、「次へ」をクリックします。

「プリセット色」画面は、セクション背景の3種類のカラーです。下図の16のパターンがあります。ここでは赤系か青系など適当なものを一端選んでください。後で細かく設定していきます。

そして「次へ」で「フォントの選択」画面です。日本語のフォントが少ないので、「メリオ＝Meriyo」ぐらいで良いかと思います。▼をクリックして変更し、「テーマを作成」ボタンでカスタムテーマが出来上がります。

作成されたテーマ名下のＡマーク（テキスト）とパレットマーク（色）をクリックするとテーマ作成時のフォントと色セットの変更ができます。

テーマ編集のメニューは、「色」・「テキスト」・「画像」・「移動」・「コンポーネント」・「間隔」の6つの編集メニューが表示されます。

「色」と「テキスト」は重要です。この2点は設定しておきます。

①色の設定

セクションの「背景色」と背景に見合う「テキストの色」（タイトルと見出し、本文）を指定します。

背景を濃い色とした場合に文字色を白（抜き文字風）などで目立つ色設定などが考えられますが、通常は、背景色が淡い色であれば、文字色はすべて黒の設定で問題と思います。

スタイルが３パターンあるので、「淡い色～中間～濃い色」、同色系か違う色を設定するか、背景色とそれに見合う文字色を決めてから設定するとよいでしょう。

色設定は、「スタイル１」、「スタイル２」、「スタイル３」の３つのパターン毎に設定します。「セクションの色」の3つのパターンです。

試しにコンテンツエリア側で「セクションの色」から「スタイル１」、「スタイル２」、「スタイル３」をクリックして、「背景」と「タイトルや本文」の色の変化を見てみましょう。

注：コンテンツエリアに何もない状態ではセクションの色設定ができませんので、テキストボックスで文字列がある状態が必要です。

設定は、

色をクリックすると下図になります。

「スタイル１」をクリック、「背景」の▼マークで色を選択します。この背景色に合う（見やすい）色を「タイトルと見出し」と「本文」（フォントの色）に設定します。続いて「スタイル２」、「スタイル３」と同様に設定します。

なお、フォント色設定の「タイトルと見出し」と「本文」部分は、下の「その他のオプション」をクリックすることで、詳細に設定ができます。題名はタイトル文字色。「見出し」、小見出し」は目次を利用する場合に設定します。

本文の「文字サイズ小」はフッターの規定値になっています。

②テキストの設定

テキストは「フォント」の種類、「サイズ」＝ポイント数、「表示形式」＝太字（B)か斜体、「配置」＝左・中央・右・両端揃え、「行間隔」＝１～２、「段落の間隔」＝前後を任意のポイント数、など変更ができます。

これを、「標準テキスト」、「題名」、「見出し」、「小見出し」、「文字サイズ小」の５種類でそれぞれに設定します。

標準テキストは必ず設定しておくとよいでしょう。特にフォントのサイズと行間隔は設定しておきましょう。

HPで推奨されているフォントサイズが14px～18pxのようです。行間間隔は1.5ぐらいが良いと思います。

「見出し」や「小見出し」は利用する場合に設定しておけばよいと思います。なお、このHPでは、「標準テキスト」を14pxにして、「見出し」を18pxと「小見出し」を16pxとしています。16pxは選択できる数値に無いので、ここでの設定が便利です。

③画像

「ヘッダー」と「ロゴ」と「ファビコン」の設定です。

「ヘッダー」（タイトル部分の画像）は「ヘッダーとフッター」で説明しています。ヘッダーを個別に設定したページ以外をまとめて変更する場合に利用すると便利です。

「ロゴ」と「ファビコン」は設定（編集画面上部の歯車マーク）のブランド画像での設定と同じです。

ロゴは、ページ上部に表示されます。320ピクセル×132ピクセルがGoogleで使われているようです。このＨＰでは143×61ピクセルのものです。

ファビコンとは、favorite icon、それを略してfavicon（ファビコン）と呼ばれています。ＨＰをお気に入りに登録した際に出てくるアイコン、という意味で、現在ではそれを略してファビコンという名前で呼んでいるというわけです。

ファビコンは、16×16ピクセルが多いようです。24×24ピクセルや32×32ピクセルもあるようです。

いずれせよ、予め作成しておく必要があります。

⑤コンポーネント

挿入メニューの「ボタン」、「分割線」、「リンク」、「画像カルーセル」の設定です。

この４項目の設定をスタイル１～３（セクションの色）に対してそれぞれの色を設定します。

背景毎に見やすいカラー設定ができるようになっています。

「ボタン」は、「塗りつぶし」、「アウトライン＝抜き文字」、「テキスト＝文字だけ」の色を設定します。セクションの色に対して見やすい設定と色を選択します。

「分割線」は、色と太さ（１～５）が設定できます。

「リンク」は、文字列にリンク設定した場合の文字色が設定できます。

「画像カルーセル」のアクティブドット」とは、画像カルーセルを挿入した時に画像枚数分の「・」ドットが画像の下部に表示されるものです。配置した画像内、現在どの画像が表示されているかを確認しやすくするためのものです。このドット色の設定です。