この記事では、ヘッダーに関連するデザインの設定方法についてご紹介しています。
デザインの設定できることは、以下のとおりです。
- レイアウトの変更
- 固定表示の設定
- テキストカラーの変更
- 背景色の設定
- ヘッダーエリアの区切り線の設定
ヘッダーエリア設定へ進む
設定は、外観 ＞ カスタマイズ ＞ 共通エリア設定 ＞ ヘッダーエリア設定 ＞ ヘッダー設定 で行います。
ヘッダーのレイアウトを変更する
サイトタイトル（またはロゴ画像）や、検索アイコン(虫眼鏡）などの配置を変更することができます。
レイアウトを選択
レイアウトは、「シンプル（初期設定）」「ダイナミック」から選択することができます。
「ダイナミック」を選択
サイトタイトルが中央に、虫眼鏡アイコンは左に配置されます。
この記事では、サイトのロゴ画像を設定する方法をご紹介しています。 ロゴ画像が表示される場所はどこ？ サトコちゃん そもそも、ロゴ画像ってどこに表示されるの？ ロゴ画像が表示されるのは、サイトタイト[…]
ヘッダーの固定表示の設定
ヘッダーの表示を「固定表示しない（初期設定）」「固定表示する」かの選択ができます。
固定表示するかを選択
「固定表示する」を設定すると、ある程度、下へスクロールした際に、ヘッダーが現れ、常に表示されます。（わかりやすくするために、ヘッダー背景に色を設定しています）
ヘッダーのテキストカラーを変更
テキストカラーは、「黒（初期設定）」「白」から選択することができます。
テキストカラーを変更する
「白」に変更したのが下のイメージ。
ヘッダーの背景色を指定する
ヘッダーの背景色は、決まった色から選択するのではなく、カラーピッカーから好きな色を選ぶことができます。
1.色を選択をクリック
「色を選択」をクリックします。
2-1.カラーピッカーから選択
カラーピッカー上の〇（丸）を自由に動かし色を決め、彩度を調整します。
2-2.カラーコードを指定する
「色を選択」をクリックすると、入力エリアが表示されます（赤枠）。ここに、カラーコードを直接入力して色を指定することもできます。
ヘッダーの背景色について
ヘッダーの背景色は、「テーマカラー」や「ヘッダー背景色」の設定状況で、表示される色が変わってきます。
テーマカラー：カスタマイズ ＞ 基本設定 ＞ 基本スタイル設定
（表示されるカラー）
| デフォルトカラー | テーマカラー | ヘッダーカラー | |
|---|---|---|---|
| 設定なし | 〇 | ||
| テーマカラーのみ設定 | 〇 | ||
| ヘッダーカラーのみ設定 | 〇 | ||
| テーマカラー + ヘッダーカラーを設定 | 〇 |
ヘッダーエリアの区切り装飾の設定
「ヘッダーエリア」と「メインエリア」の区切りを装飾することができます。「無し（初期設定）」「シャドウ」「ボーダー」から選択。
シャドウ
ボーダー
