PR AFFINGER基本機能 デザイン・カスタマイズ

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

KAZU

2017年からAFFINGERを愛用。
色んなテーマを試してきたけど、結局AFFINGERが一番使いやすい!

★…AFFINGER利用歴8年超
★…テーマ比較実績 10種類以上
★…生成AIを使った実験と検証数え切れず

現在は、AFFINGER×AIを使えば誰でも稼げる、そんな仕組みを検証中。

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

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

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

表示パターンのイメージ

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

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

この記事では、

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

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

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

表示パターンの設定手順

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

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

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

表示パターンのイメージ

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

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

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

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

イメージ

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

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

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

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

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

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

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

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

手順

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

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

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

  • この記事を書いた人
  • 最新記事

KAZU

2017年からAFFINGERを愛用。
色んなテーマを試してきたけど、結局AFFINGERが一番使いやすい!

★…AFFINGER利用歴8年超
★…テーマ比較実績 10種類以上
★…生成AIを使った実験と検証数え切れず

現在は、AFFINGER×AIを使えば誰でも稼げる、そんな仕組みを検証中。

-AFFINGER基本機能, デザイン・カスタマイズ
-,