AFFINGER5はカスタマイズがかなり細かいところまでできてしまう反面、設定方法が複雑になっています。
今回はAFFINGER5EXのサンプルサイト『SWICH』で使われているスマホ用のヘッダー（横列）表示の設定の仕方を3つのステップで解説していきます。
この部分のこと。
パソコンでサンプルサイトを見ても表示されないのでなかなか分からない部分ではあるところですが、読者の回遊率アップやオシャレなデザイン的にも設定しておくといいですね！
この記事を最後まで読むと…
- スマホ用ヘッダー（横列）メニューの設定方法がわかります
もくじ
スマホ用ヘッダー（横列）メニューって？
文字で説明しても分かりにくいですよね。
コレのことです。動画になっているので再生してみてください。
スマホで見たときにこんなメニューがあるとなんかオシャレですよね。素人感がちょっとはなくなるはず！たぶん…
それにヘッダー部分に追従するような動きになるので、各カテゴリーを表示してくれて読者の回遊率アップにも貢献してくれます。
ただ、1点だけ注意点です。
このカスタマイズ、スタンダード版のAFFINGER5では設定できません
スマホ用ヘッダーメニューの追従と横列表示は上位版である『AFFINGER5EX』でしか出来ない設定なので、コレを使いたい！という方はアップグレードをお願いします。
ちなみにAFFINGER5EXは単体での購入はできません。スタンダード版を購入後アップグレードするか、PACK3（AFFINGER5EX＋タグ管理マネージャー３＋ABテストのお得パック）を購入するかしか利用できないようになっています。
設定までの4ステップ
AFFINGER5の公式サイトでも導入の説明が記載されていますが、とても簡単にしか表記されていないので慣れていない方にとってはかなり分かりにくいです。
分かりやすく説明していきますね。パソコンの画面で説明していますが、スマホでも同様に設定ができます。
※AFFINGER5EXの導入が終わっていることが前提です。
step
1ワードプレス側でメニューを作成する
AFFINGERでの設定の前にスマホ用のメニューを作成します。
ワードプレスの左メニュー『外観』内にある『メニュー』を選択します。
すでにいくつかメニューが作成されている場合は、メニューを新しく作成するので『新しいメニューを作成しましょう』をクリックします。
新規作成画面になるので『メニュー名』を入力し、『ヘッダー用メニュー（横列）』にチェックを入れて『メニューを作成』をクリックします。
メニュー名はご自身が分かりやすい名前を入力してください。
表示したいメニューを選択して『メニューに追加』をクリックします。
例としてカテゴリーから選択しています。
メニューに追加された事を確認します。
この時、表示する順番をドラッグして入れ替えたり、カテゴリー右側の『▼』を押して表示するタイトルの変更ができます。
完了したら右下の『メニューを保存』をクリックします。
メニュー内にホームボタンを設置したい場合は、『カスタムリンク』を選択してホームページのURLと文字列に“ホーム”と入力して追加することで表示できるようになります。
これでステップ１は完了です。
step
2AFFINGER5のカスタマイザーでメニュー表示を設定する
ここからはAFFINGER側の設定になります。
ワードプレス左メニュー『外観』内の『カスタマイズ』をクリックします。
AFFINGERのカスタマイズ画面に変わるので、『[＋]メニューのカラー設定』→『スマホスライドメニュー』をクリックします。
スマホスライドメニュー内を下にスクロールしていくと『表示パターン』の項目があるので、3つ目の『スクロール追尾』を選択し、その下の『スクロールで内容対象を〜』にチェックを入れます。
設定できたら最後に上の『公開』ボタンを押して保存すれば完了です。
これでスマホで追従メニューが表示されているはずです。
step
3メニューの色を変更する
メニューの色はデフォルトのままだと灰色の背景に黒文字なのでブログのテーマカラーに合わない場合もあると思います。
色の変更は『[＋]メニューのカラー設定』→『スマホミドル / 横列メニュー』内にあります。
上の3つの色を変更するとそれぞれの色が変更されます。ブログのテーマカラーに合った色を選びましょう。
『スマホ用ヘッダーメニューの設定方法』のまとめ
AFFINGERは本当に細かい部分まで設定することができるのですが、その設定に行き着くまでがかなりややこしいです。
分かりやすいチャートみたいなものがあるといいんですけどね。
今回ご紹介したのはかなり細かい部分ですし、スマホでサンプルサイトを見ないと気づかない所ですが、この機能はいい！と思ったので記事にしてみました。
設定が分かりにくいので僕同様お困りの方もいらっしゃるのではないでしょうか。
繰り返しますが、この設定はAFFINGER5のスタンダード版ではできません。上位版のEXでのみ設定することが可能です。
この機能使いたい！と思った方はアップグレードかパック3をご購入くださいませ。
最後まで読んで頂きありがとうございました。