今回は、モバイルメニューのカスタマイズについて紹介していきます。モバイルで表示されるメニューやモバイルスライドインメニューの設定方法について紹介していきます。
他のCocoonカスタマイズは ⇒ こちら ⇐
今回の内容は、以下のカスタマイズが終わった方向けの記事になります。
まだ完了していない人は、是非カスタマイズに挑戦してみてください。
このブログはWordPressテーマのCocoonを使用していますが、モバイル表示版のヘッダーメニューは以下のようなデザインをしています。
モバイル用に設定をしない場合は、ヘッダーメニューがそのまま表示されます。モバイル用に修正することで、読みやすいデザインに変更していくことができます。今回は、私が変更していく手順を紹介していくので、是非参考にしてみてください。
１．モバイル表示版ヘッダーの設定方法
モバイル設定
１．まずは、WordPressメニューから「Cocoon設定」を選択します。
２．「Cocoon設定」の「モバイル」タブをクリックします。
３．設定内容は以下の通りです。
・モバイルメニュー
→フッターモバイルボタン
・モバイルボタン
→サイトヘッダーロゴを表示する
→モバイルボタン時コンテンツ下のサイドバーを表示
デザインの確認をする
このように表示されていれば、OKです。これでモバイル表示版のカスタマイズは完了です。
２．モバイルスライドインメニューの設定方法
Cocoonのカラフルラインのデフォルトでは、このようなデザインで項目にはヘッダーメニューの内容が表示されています。
独自メニューを設定する
モバイルスライドインに独自メニューを追加する場合は、以下の方法で新規メニューを追加する必要があります。
※表示メニューを変更しない場合は、この設定は不要です。
１．WordPressメニューの「外観」から「メニュー」を開きます。
２．「新しいメニューを作成しましょう。」をクリックします。
３．メニュー名に「モバイルスライドインメニュー」と入力して、メニューの位置を「モバイルスライドインメニュー」に設定する。その後、「メニューを作成」をクリックします。
４．「メニュー項目を追加」からメニューに並べたいコンテンツを複数選び、「メニューに追加」をクリックします。
５．追加したコンテンツが並んで表示されるので、表示する内容を考えながら表示名や並び順を編集します。
６．表示名の編集が終わったら、「メニューを保存」をクリックします。
デザインを確認する
今回は、私も新しくモバイルスライドインメニューをアレンジしてみました。編集後このように表示されれば、完了です。
モバイルでの表示用にタイトルの文字数を短くしたり、副項目に変更したり、色々と試してみると良いです。
他のカスタマイズについても紹介していますので、是非こちらを参考にしてみてください。
コメント