スマホメニューをカスタマイズして上部と下部に別々のモバイル専用メニューを設置しました

2023.08.052023.08.24

この記事は約6分で読めます。

当サイトは、スマホ用のメニューをカスタマイズして、上下２箇所に設置しました。このようなモバイル専用メニューのカスタマイズは無料のワードプレステーマでは難しいので、外部のデザイナーさんに外注依頼することが多いですが、コクーン（Cocoon）なら比較的簡単に自分でカスタマイズできます。
今回はそのやり方について紹介します。

このページの目次

スマホ専用のモバイルメニュー

スマホ専用のモバイルメニュー

コクーン（Cocoon）でカスタマイズしました

現状はこんな感じで表示されているはずです。（この画面はiPhoneSE2のサファリで表示しました）

スマホでは
・上部のモバイルメニューを表示
・下部のモバイルメニューを表示
・PCの右サイドバー内容はスマホで非表示
→上部メニューのサイドバーをタップすると表示
という仕様に変更しました。

このように上下２箇所のメニューに変更した理由は、複数の運用サイトでそのほうが転換率向上が図られたという情報を得てからです。

例えば、浜田紙業さんのモバイルメニューは上下でこのようになっています。
https://kaminotakuhaibin.com/

上部は、「メニュー」「公式通販サイト」「サイドバー」
下部は、「HOME」「電話」「問い合わせフォーム」「会社概要」
というように、目標としているページへのアイコンをわかりやすく表示することで、うまくそのページに誘導され、結果的に転換率が向上したようです。

モバイルメニューを上下に表示する方法

ワードプレスのダッシュボードから「Coccon設定」をクリックし、上部のメニュータブから「モバイル」を選びクリックすると設定画面になります。

モバイルメニューの選択肢（ラジオボタン）のなかで「ヘッダー・フッダーモバイルボタン」を選択して保存します。すると自動的にモバイルメニューが設定されます。

自動で表示されるモバイルメニューはこんな感じです。

※この画像はコクーンのオンラインマニュアルから引用しました。

ヘッダーモバイルボタンの設定方法

スマホ画面でヘッダーに操作ボタンを表示させる設定方法です。

この自動で表示されるモバイルメニューには少しクセがあります。例えば下部のモバイルメニューには「シェアボタン」がありますが、問い合わせに誘導するボタンや、電話を促すためのCallボタンなどがありません。

自分が思うとおりの表示でない場合は、モバイルメニューをカスタマイズします。

モバイルメニューのカスタマイズ方法

ワードプレスのダッシュボードで、外観→メニューから新しくメニューを作成します。

今回は、「モバイル上部ナビ」と「モバイル下部ナビ」という名称で、以下のように作成しました。

モバイル上部ナビ

▼モバイル上部ナビ

この「モバイル上部ナビ」の表示位置は「ヘッダーモバイルボタン」を選択してから保存します。

メニュー内容は「カスタムリンク」で作成します。中身は次のとおりです。

▼メニュー
URL　#menu
ナビゲーションラベル　メニュー
CSS class (オプション)　※空欄のまま

▼株式会社ドモドモコーポレーション
URL　/?utm_content=mobilemenue
ナビゲーションラベル　株式会社ドモドモコーポレーション
CSS class (オプション)　fa fa-home

▼サイドバー
URL　#sidebar
ナビゲーションラベル　サイドバー
CSS class (オプション)　※空欄のまま

モバイル下部ナビ

▼モバイル下部ナビ

この「モバイル下部ナビ」の表示位置は「フッターモバイルボタン」を選択してから保存します。

メニュー内容は「カスタムリンク」で作成します。中身は次のとおりです。

▼ブログ
URL　/tohdamikio/?utm_content=mobilemenue
ナビゲーションラベル　ブログ
CSS class (オプション)　fa fa-newspaper-o

▼検索
URL　#search
ナビゲーションラベル　検索
CSS class (オプション)　※空欄のまま

▼メール
URL　/formcontact/?utm_content=mobilemenue
ナビゲーションラベル　メール
CSS class (オプション)　fa fa-envelope

▼上に移動
URL　#top
ナビゲーションラベル　上に移動
CSS class (オプション)　※空欄のまま

モバイルメニューカスタマイズの注意点

今回のモバイルメニューカスタマイズは、コクーン独自の仕様もありますので、他のデザインテーマを使っている場合はこのままだとうまく表示されない可能性があります。ご注意ください。

コクーンがオリジナルで提供しているアイコンとリンクURLは「#****」で表示できます。以下は、よく使いそうなアイコンです。

URLコマンド	リンク文字列例	ボタンの役割
#menu	メニュー	グローバルメニューをスライドインで表示 ※ヘッダー・フッターモバイルボタンどちらかにひとつだけ設置を推奨
#home	ホーム	フロントページへのリンクボタン
#top	上に移動	そのページのトップ（上）に移動する
#sidebar	サイドバー	サイドバー項目をスライドインで表示
#search	検索	検索フォームを表示
#logo	サイト名	横幅広めのサイトロゴが表示されるボタンを表示

コクーンで用意されていないアイコンのマークは、アイコンフォント（FontAwesome4.7）を使いました。以下のサイトを参考にしてアイコンのコードを探し表示させています。

FontAwesome4.7のアイコンをクリックでコピーできる一覧表【日本語検索対応】

WebアイコンフォントFontAwesome4.7.0のコピペが面倒だったのでお目当てのアイコンをクリックでコピー出来るようにした一覧表です。自分用に作った物ですが頑張ったので公開。簡易的な検索とか絞り込みとかも出来ます。 2019-07-

たくさんのアイコンがあります。例えばメールや電話関連など、よく使いそうなものだけでも以下のような種類のアイコンが用意されています。

fa fa-envelope　\f0e0　メール封筒手紙郵便
fa fa-envelope-o　\f003　メール封筒手紙郵便
fa fa-envelope-open　\f2b6　メール封筒手紙郵便
fa fa-envelope-open-o　\f2b7　メール封筒手紙郵便
fa fa-envelope-square　\f199　メール封筒手紙郵便四角
fa fa-phone　\f095　電話受話器テレフォン連絡
fa fa-phone-square　\f098　電話受話器テレフォン連絡四角
institution　\f19c　建物機関施設
　fa fa-newspaper-o　\f1ea　新聞紙ニュースペーパー　ブログ
　fa fa-shopping-basket　\f291　ショッピングバスケット買物カゴ
　fa fa-shopping-cart　\f07a　ショッピングカート買物通販