【WordPress】モバイルメニューのカスタマイズ

※当サイトでは、アフィリエイト広告を利用しています

WordPress

今回は、モバイルメニューのカスタマイズについて紹介していきます。モバイルで表示されるメニューやモバイルスライドインメニューの設定方法について紹介していきます。

他のCocoonカスタマイズは ⇒ こちら ⇐

今回の内容は、以下のカスタマイズが終わった方向けの記事になります。

【WordPress】ヘッダーロゴのカスタマイズ
今回は、ヘッダーロゴのカスタマイズについてまとめています。 初心者でも簡単にCocoonをカスタマイズすることができるマニュアルは ⇒ こちら ⇐ ヘッダーロゴの設定方法 Cocoonの場合は、デフォルトのヘッターロゴはシンプルなものになっ...
【WordPress】ヘッダーメニューのカスタマイズ
今回は、ヘッダーメニューのカスタマイズについてまとめています。 初心者でも簡単にCocoonをカスタマイズすることができるマニュアルは ⇒ こちら ⇐ 私のブログでは、WordPressのCocoonのテーマを使用しています。ヘッダーメニュ...

まだ完了していない人は、是非カスタマイズに挑戦してみてください。

このブログはWordPressテーマのCocoonを使用していますが、モバイル表示版のヘッダーメニューは以下のようなデザインをしています。

モバイル用に設定をしない場合は、ヘッダーメニューがそのまま表示されます。モバイル用に修正することで、読みやすいデザインに変更していくことができます。今回は、私が変更していく手順を紹介していくので、是非参考にしてみてください。

1.モバイル表示版ヘッダーの設定方法

モバイル設定

1.まずは、WordPressメニューから「Cocoon設定」を選択します。

2.「Cocoon設定」の「モバイル」タブをクリックします。

3.設定内容は以下の通りです。

◆モバイル設定◆
・モバイルメニュー
 →フッターモバイルボタン
・モバイルボタン
 →サイトヘッダーロゴを表示する
 →モバイルボタン時コンテンツ下のサイドバーを表示
以上の設定を確認して、モバイル設定は完了です。

デザインの確認をする

このように表示されていれば、OKです。これでモバイル表示版のカスタマイズは完了です。

2.モバイルスライドインメニューの設定方法

Cocoonのカラフルラインのデフォルトでは、このようなデザインで項目にはヘッダーメニューの内容が表示されています。

独自メニューを設定する

モバイルスライドインに独自メニューを追加する場合は、以下の方法で新規メニューを追加する必要があります。

※表示メニューを変更しない場合は、この設定は不要です。

1.WordPressメニューの「外観」から「メニュー」を開きます。

2.「新しいメニューを作成しましょう。」をクリックします。

3.メニュー名に「モバイルスライドインメニュー」と入力して、メニューの位置を「モバイルスライドインメニュー」に設定する。その後、「メニューを作成」をクリックします。

4.「メニュー項目を追加」からメニューに並べたいコンテンツを複数選び、「メニューに追加」をクリックします。

5.追加したコンテンツが並んで表示されるので、表示する内容を考えながら表示名や並び順を編集します。

6.表示名の編集が終わったら、「メニューを保存」をクリックします。

デザインを確認する

今回は、私も新しくモバイルスライドインメニューをアレンジしてみました。編集後このように表示されれば、完了です。

モバイルでの表示用にタイトルの文字数を短くしたり、副項目に変更したり、色々と試してみると良いです。

他のカスタマイズについても紹介していますので、是非こちらを参考にしてみてください。

コメント

タイトルとURLをコピーしました