ヘッダー基本設定（各設定メニューの使い方）
基本設定
表示環境を設定
ヘッダーエリアをPC・スマホ、どちらの閲覧環境で表示させるか設定する機能です。
以下の4つの項目から表示環境を選択できます。
例えば、スマホ/PCで表示を選択すれば、スマホ・PCともに「ヘッダーエリア」が表示されます。
- スマホ/PCで表示
- スマホ/PCで非表示
- スマホで非表示
- PCで非表示
デザインを選択
ヘッダーエリアのデザインを設定する機能です。
シンプル・ボックス・セパレートの中からデザインを選択できます。
- 下記サンプル画像①（❶赤枠内）は：「ボックス」
- サンプル画像②（❷赤枠内）は：「セパレート」
を指定した事例をご紹介しています。
サンプル画像①
サンプル画像②
枠デザインを選択
ヘッダーエリア・外枠のデザインを設定する機能です。
以下の項目の中からデザインを選択できます。
- 無し
- サークル
- 角丸
- 角丸（強）
サンプル画像①
表示高さをpxで指定
ヘッダーエリア全体の高さ（上下の幅）を設定する機能です。
表示幅を選択
ヘッダーエリア全体の表示幅（横幅）を設定する機能です。
コンテンツ領域を選択
コンテンツ領域の幅（横幅）を設定する機能です。
下記画像（➊赤枠内）で示された領域がコンテンツ領域です。
外側余白をpxで指定
ヘッダーエリアの外側余白の幅を設定する機能です。
境界線設定
境界線を選択
ヘッダーエリアの境界線（外枠）のデザインを設定する機能です。
無し・ボーダー・シャドウの中からデザインを選択できます。
- 下記サンプル画像①は：「ボーダー」
- サンプル画像②は：「シャドウ」
を指定した事例をご紹介しています。
サンプル画像①
サンプル画像②
背景設定
背景を選択
ヘッダーエリアの背景を設定する機能です。
以下の項目から背景を選択できます。
- なし
- 単色
- 5ポイントグラデ
- 画像
- 画像+単色オーバーレイ
- 画像+5ポイントグラデオーバーレイ
サンプル画像①
追従ヘッダー設定
表示環境を選択
追従ヘッダーをPC・スマホ、どちらの閲覧環境で表示させるか設定する機能です。
以下の4つの項目から表示環境を選択できます。
例えば、スマホ/PCで表示を選択すれば、スマホ・PCともに「追従ヘッダー」が表示されます。
- スマホ/PCで表示
- スマホ/PCで非表示
- スマホで非表示
- PCで非表示
■追従ヘッダーの動作の仕方について
一般的なテーマの追従ヘッダーは、画面を下スクロール↓した際に、追従ヘッダーがスクロール動作に沿ってベッタリと付いてきてしまいます。
この追従動作は、記事を読もうとする閲覧者に大きなストレスを与え、サイトからの離脱率を高めてしまうリスクがあります。
一方で、ゴールドテーマの追従動作は、行動科学・行動心理学的視点に立ち、閲覧者にストレスを与えない仕様になっています。
具体的には、
- 下方↓にスクロールした時点では追従しない
- 閲覧者がページ上方↑に戻ろうとした際に追従ヘッダーが表示される
といった、閲覧者にストレスを与えない優しい仕様となっています。
↓スクロール時に追従しないのは不具合ではありません。