ストークのスマホ表示でアフィンガーっぽいミドルメニューを表示する方法


こんにちは!くまぺです。

この記事では、有料テーマ「ストーク」でAFFINGERのようなミドルメニューを表示する方法について解説します。

ストークのスマホ表示はヘッダー部分のスライドメニューが特徴的ですが、アフィンガーのようなメニューを表示させたい!という場合もありますよね。

アフィンガータイプのミドルメニューは、ストークでもコードを追記することで実装できます。

この記事は、STORK(ストーク)用のカスタマイズです。
SANGOをお使いの方は、あずさんのブログで解説してくださっているのでそちらをご覧ください。
>> コピペでSANGOのモバイルメニューをミドルメニューにする&フッターに固定するカスタマイズ

変更する部分は4ヶ所です。

  • 1. functions.phpでメニューの位置を追加
  • 2. メニュー画面でミドルメニューを設定
  • 3. header.phpでミドルメニューを表示
  • 4. style.cssでデザインを整える
の順に解説していきます。

1. functions.phpでメニューの位置を追加

まずは、アフィンガーっぽいメニューを設定するための「メニューの位置」を追加します。
「メニューの位置」はデフォルトで

  • グローバルナビ
  • グローバルナビ(スマートフォン)
  • フッターナビ

の3つが用意されています。

(「外観」 → 「メニュー」 → 「位置の管理」で確認できます。)

ここに、今回表示する「スマートフォン用ミドルメニュー」を追加します。

functions.phpの一番下に以下のコードを追記します。

functions.phpの変更を保存すると、メニューの位置に「スマートフォン用ミドルメニュー」が追加されます。

2. メニュー画面でミドルメニューを設定

次に、「外観」 → 「メニュー」でミドルメニューに表示するものを設定しましょう。

メニュー画面で「新規メニューを作成」をクリックします。

メニュー名に「スマホミドルメニュー」と入力し、「メニューを作成」をクリックします。

「編集するメニューを選択:」が「スマホミドルメニュー」になっていることを確認し、表示したいメニューを追加します。

下にスクロールして、「スマートフォン用ミドルメニュー」にチェックを入れ、「メニューを保存」をクリックします。

3. header.phpでミドルメニューを表示

次に、設定したミドルメニューを実際のブログに表示するためheader.phpを変更します。

まず、header.phpの下の方、125行目あたりにあるこのコードの部分を探しましょう。

この部分のすぐ下に以下のコードを記述し、変更を保存します。

くまぺ
これで、「スマートフォン用ミドルメニュー」に設定したメニューがブログに表示されるようになりました!

4. style.cssでデザインを整える

この段階でミドルメニューを表示することはできるのですが、ここままでは下の画像のように表示されてしまいます。

なので、style.cssを変更して下の画像のようにデザインを整えましょう。

style.cssに以下のコードを記述します。

このコードでミドルメニューが下の画像のようなデザインになります。

メニューの背景色や枠線の色はお好みの色に変更してください。
例えば、枠線の色と文字色をそれぞれ#3e3e3e、背景色を#ffffffにすると下の画像のようになります。

また、中ほどにあるwidthではメニュー1つの幅を指定しています。
縦2列の場合は50%を、縦3列の場合は33.3333%を指定してください。


縦2列の場合

縦3列の場合
くまぺ
縦2列の場合はメニューの数を偶数に、3列の場合はメニューを3の倍数の数だけ設定しましょう。

完成

カスタマイズは以上で完了です!

スマートフォンでブログを見てみましょう。
アフィンガーっぽいミドルメニューが表示されていると思います。

もし下のように「スライドメニューも表示されてしまう!」という場合は、メニュー位置の設定を変更しましょう。

「外観」 → 「メニュー」 → 「位置の管理」で、
「グローバルナビ(スマートフォン)」で「ーメニューを選択ー」を選択し、「変更を保存」をクリックします。

これでスライドメニューが表示されなくなり、ミドルメニューだけが表示されるようになります。

おわりに

いかがでしたでしょうか。

このカスタマイズで「位置の管理」でいつでもスライドメニューとアフィンガーっぽいミドルメニューを切り替えることができます。

ストークのスライドメニューとアフィンガータイプのメニューではクリック率も変わってくると思います。
ABテストなどで検証し、よりクリックされる方を採用されてはいかがでしょうか。

ではでは〜



2 件のコメント