ヘッダーメニューにさらに細かいタグごとのサブメニューを追加表示して、かっこよくカスタマイズしたい！
と思ったので、Cocoonのヘッダーサブメニューの設定方法を解説します。
グローバルナビメニュー（ヘッダーメニュー）とは、サイトヘッダー下にあるメニューのことです。ここではカテゴリー別にメニューを表示していますが、さらに細かいタグごとのサブメニューを表示できるようにします。
やること
- サブメニューの追加（クリックだけでできます）
- カスタマイズ（コピペでOKです）
ちなみにこのブログは、
- WordPress
- テーマ・「Cocoon」（わいひらさん作）
- スキン・「ホワイトラーメン」（takasakiさん作）
をベースに、自分でカスタマイズして作成しています。
サブメニューの追加
実際にカテゴリ「LIFE」にサブメニューを追加してみます。
WordPress左側のメニュー一覧から、「外観」→「メニュー」を選択します。
このような画面です。（画面上部の選択欄は「ヘッダーメニュー」に合わせます。）
赤で囲った部分が現在表示されているグローバルメニュー（ヘッダーメニュー）の中身です。
「外観」→「メニュー」の中の「メニュー項目を追加」から、サブメニューとして追加したい項目を選びます。わたしの場合、タグごとにサブメニュー化したいので「タグ」を選びます。
このようにタグの一覧が表示されました↓
サブメニューとして表示したい項目を選択し「メニューに追加」をクリック。
メニュー構成の一番下にタグ「初心者ブログメモ」と「成長のためのメモ」が追加されました。
追加した項目は、クリックでつかんで自由に上下移動できます。カテゴリ「LIFE」のなかに副項目として「初心者ブログメモ」と「成長のためのメモ」を移動しました。
一段下がって表示されていますね。これで「メニューを保存」をクリック。
これで「LIFE」の下にサブメニューが表示されるようになりました。
カスタマイズ
メニュー幅を変える
「Cocoon設定」→「ヘッダー」と進みます。
一番下に「グローバルナビメニュー幅」という項目があるので「サブメニュー幅」で変更します。
私の場合、少し幅を縮めたかったので180pxに変更。（デフォルトでは240pxに設定されています。）幅を変えたら、「変更をまとめて保存」をクリック。
デフォルトと比べて、少しだけ短く出来ました。
点線でサブメニュー内を区切る
「外観」→「テーマエディター」から「スタイルシート」を編集します。
.sub-menu .caption-wrap {
border-top: dotted #333333;
}
をコピペしてください。ちなみに、
border-top…枠線の上部分
dotted………点線
#333333……黒色
を変更する要素です。
コピペしたら「ファイルを更新」をクリック。点線が表示されるようになりました。
これでサブメニューのカスタマイズは完了です。初心者でもサブメニューをカスタマイズすることができました。
こちらの記事もよく読まれています。
コメント