今回は、スマホのヘッダーを「固定」or「スクロール追尾」する方法について書いていきます。
AFFINGER6で設定できるスマホヘッダーの表示パターンは3つ。
- 【通常】：ヘッダーは固定されません
- 【固定】：常にページ上部にヘッダーが固定されます
- 【スクロール追尾】：下へスクロールするとヘッダーは消え、上へスクロールすると消えたヘッダーが現れます
表示パターンの設定は「カスタマイズ」で行います。
この記事では、
- スマホヘッダーの表示パターン設定
- 「ヘッダー背景が透過して見にくい…」という問題への対策
この順に解説していきます。
スマホヘッダーの表示パターン設定
表示パターンの設定手順
WordPressのダッシュボードを開き、「外観」→「カスタマイズ」→「- 各メニュー設定」の順にクリック。
各メニュー設定の中にある「スマホメニュー（スマホヘッダー）」を開き、下へスクロールすると「表示パターン」の設定があります。
ここでスマホのヘッダーをどのように表示するのかを設定してください。
スクロールで内容対象をヘッダーメニュー（横列）に変更
「スクロールで内容対象をヘッダーメニュー（横列）に変更」にチェックを入れると、スクロールするとヘッダーメニュー（横列）が表示されるようになります。
ページの一番上まで戻ると、通常のヘッダーが表示されます。
ヘッダーメニュー（横列）に誘導したい記事へのリンクを置いている場合は、この機能が非常に有効です。
なぜなら、ヘッダー部分は常に目につくので、リンクをクリックされる可能性が上がるからです。
たとえばランキング記事や比較記事などを、「ランキング」や「〇〇比較」として置いておくという手もあります。
誘導したい記事がある場合はぜひ試してみてください。
ヘッダーの背景が透明な状態をどうにかしたい！
ヘッダーの背景色を設定していないと、ヘッダーとコンテンツが重なってしまって非常に見にくい状態になります。
これを解決するには、スライドメニューバーの背景色を設定する必要があります。
手順
１．「外観」→「カスタマイズ」→「- 各メニュー設定」→「スマホメニュー（スマホヘッダー）」の順に開きます。
２．「スライドメニューバー背景色」という項目があるので、スマホのヘッダーに設定したい色を決めて保存します。
これで、スマホヘッダーが透過してしまう問題は解決できました。
