スマホ設定 設定

スマホのヘッダーを固定orスクロール追尾する方法

今回は、スマホのヘッダーを「固定」or「スクロール追尾」する方法について書いていきます。

AFFINGER6で設定できるスマホヘッダーの表示パターンは3つあります。

  1. 通常】:ヘッダーは固定されません
  2. 固定】:常にページ上部にヘッダーが固定されます
  3. スクロール追尾】:下へスクロールするとヘッダーは消え、上へスクロールすると消えたヘッダーが現れます

表示パターンのイメージ

スマホヘッダー表示 通常
通常
スマホヘッダー固定
固定
スマホヘッダーのスクロール追尾
スクロール追尾

表示パターンの設定は「カスタマイズ」で行います。

この記事では、

  • スマホヘッダーの表示パターン設定
  • 「ヘッダー背景が透過して見にくい…」という問題への対策

この順に解説していきます。

スマホヘッダーの表示パターン設定

表示パターンの設定手順

WordPressのダッシュボードを開き、「外観」→「カスタマイズ」→「- 各メニュー設定」の順にクリック。

各メニュー設定の中にある「スマホメニュー(スマホヘッダー)」を開き、下へスクロールすると「表示パターン」の設定があります。

ここでスマホのヘッダーをどのように表示するのかを設定してください。

表示パターンのイメージ

スマホヘッダー表示 通常
通常
スマホヘッダー固定
固定
スマホヘッダーのスクロール追尾
スクロール追尾

スクロールで内容対象をヘッダーメニュー(横列)に変更

「スクロールで内容対象をヘッダーメニュー(横列)に変更」にチェックを入れると、スクロールするとヘッダーメニュー(横列)が表示されるようになります。

ページの一番上まで戻ると、通常のヘッダーが表示されます。

イメージ

固定のスクロールで内容対象をヘッダーメニュー(横列)に変更
固定
スクロール追尾のスクロールで内容対象をヘッダーメニュー(横列)に変更
スクロール追尾

ヘッダーメニュー(横列)に誘導したい記事へのリンクを置いている場合は、この機能が非常に有効です。

なぜなら、ヘッダー部分は常に目につくので、リンクをクリックされる可能性が上がるからです。

たとえばランキング記事や比較記事などを、「ランキング」や「〇〇比較」として置いておくという手もあります。

誘導したい記事がある場合はぜひ試してみてください。

ヘッダーの背景が透明な状態をどうにかしたい!

ヘッダーの背景色を設定していないと、ヘッダーとコンテンツが重なってしまって非常に見にくい状態になります。

これを解決するには、スライドメニューバーの背景色を設定する必要があります。

手順

1.「外観」→「カスタマイズ」→「- 各メニュー設定」→「スマホメニュー(スマホヘッダー)」の順に開きます。

2.「スライドメニューバー背景色」という項目があるので、スマホのヘッダーに設定したい色を決めて保存します。

これで、スマホヘッダーが透過してしまう問題は解決できました。

-スマホ設定, 設定
-,