こんにちは、ブログ管理人のよしくまです。
ヘッダーの下に四角いメニュー(ボックスメニュー)が設置されているのを見ることがありますよね。
ヘッダーにはグローバルナビを設置できますが、ボックスメニューのほうが見やすいしおしゃれだなと思うことはないでしょうか。
私はボックスメニューのほうが見やすい感じがしたので設置しました。
この記事では、クラシックエディタ版でボックスメニューの作成からヘッダーへのボックスメニュー設置までの手順を解説していきます。
詳しく解説しますので、Cocoonに慣れていない方も以下の手順で試してみてください。
すでにサイドバーにボックスメニューを設置している人は、同じ要領できるので簡単です。
ボックスメニューを作成する
ボックスメニューに表示したいメニューを決めていきます。
管理画面の「外観」で「メニュー」をクリックしてください。
画面右上の「表示オプション」をクリックして、以下の項目にチェックを入れておきましょう。
「新しいメニューを作成しましょう」をクリックして、ヘッダー用のボックスメニューを作成します。
メニュー名は「ヘッダーボックスメニュー」など、自分が分かりやすいものを入力し、右下の「メニューを作成」をクリックします。
ここから、ヘッダーのボックスメニューに表示したい項目を決めていきます。
左側「メニュー項目を追加」の▼をクリックすると項目が出てくるので、追加したい項目にチェックを入れて「メニューに追加」をクリックしてください。
右側のメニュー構造に追加されます。
ひとまず固定ページかカテゴリーから選択するといいかと思います。
表示順も決まったら、画面右下の「メニューを保存」をクリックしてください。
これでヘッダー用のボックスメニューが完成したので、あとは設定するだけです。
ヘッダーにボックスメニューを設置する
「外観」の「ウィジェット」をクリックします。
下の方にスクロールして「コンテンツ上部」を見つけてください。その下の「＋」をクリックして、検索ボックスに「ボックスメニュー」と入力します。
ボックスメニューのアイコンをクリックします。
「メニュー名」のところで、先ほど作成したヘッダー用のボックスメニューを選択します。
タイトルは何も入力しなくて大丈夫です。画面右上の「更新」をクリックしたら完了です。
サイトを表示してチェックしてみましょう。
よくある失敗しがちな表示
ボックスメニューの設置はできたけれど、なんだかイマイチになってしまいがちなことの解決策を紹介します。
私がうまくできなかったことになります。スタイルシートを変更するので、失敗しても元に戻せるようにメモなどにコピーしてから試してみてください。
ボックスが左寄りになる
メニュー数によっては左側に寄っているので、その場合はCSSを追加する必要があります。
「外観」の「テーマエディター」を開いてスタイルシートの画面にしましょう。
「編集するテーマを選択」がCocoon Childになっていることを確認してください。
「子テーマ用のスタイルを書く」の下に下記のコードを貼り付けます。
/* ボックスメニューの設定 */
.wwa .box-menu {
width: calc(100%/4);
}
width: calc(100%/4)の一番最後の「4」のところは、メニューを横並べにしたい数にします。メニューが3個のときは「3」、メニューが5個のときは「5」に変更してください。
コピーして貼り付けてメニュー数を変更すればOKです。画面下の「ファイルを更新」をクリックします。
スマホでの表示が見にくい
ヘッダーのボックスメニューはPC画面では見やすいですが、スマホ（モバイル）だとけっこう幅を取って見づらいかもしれません。
PCだけにボックスメニューを表示させたい。スマホは非表示にしたい。
そんなときは、先ほど編集した「スタイルシート」の「レスポンシブデザイン用のメディアクエリ」の「/*1023px以下*/」の下に下記のコードを貼り付けます。
@media screen and (max-width: 1023px){
.content-top{
display:none;
}
}
「/*必要ならばここにコードを書く*/」は消しても大丈夫です。
貼り付けられたら、画面下の「ファイルを更新」をクリックしましょう。
これでスマホでは、ボックスメニューが表示されなくなります。
スマホでは以下のように、モバイルボタンを設置するとクリックでメニューを表示できるようになって見やすいかと思います。
ヘッダーモバイルボタンの設置については以下の記事で詳しく解説しています。
最後に
ヘッダーへのボックスメニューは設置するだけなら簡単ですが、うまく表示されないときの修正に少し手間がかかりますね。
私はあまり詳しくないのでスタイルシートを変更するのは苦手ですが、あらかじめコピーを取っておけば安心です。
少しずつカスタマイズをしてより見やすいものにしていきましょう。
コメント