【Cocoon】ヘッダーメニューをカスタマイズ

ブログ運営のメモ Cocoon

ヘッダーメニューにさらに細かいタグごとのサブメニューを追加表示して、かっこよくカスタマイズしたい!

と思ったので、Cocoonのヘッダーサブメニューの設定方法を解説します。

グローバルナビメニュー(ヘッダーメニュー)とは、サイトヘッダー下にあるメニューのことです。ここではカテゴリー別にメニューを表示していますが、さらに細かいタグごとのサブメニューを表示できるようにします。

やること
  • サブメニューの追加(クリックだけでできます)
  • カスタマイズ(コピペでOKです)

ちなみにこのブログは、

をベースに、自分でカスタマイズして作成しています。

sponser link

サブメニューの追加

実際にカテゴリ「LIFE」にサブメニューを追加してみます。

WordPress左側のメニュー一覧から、「外観」→「メニュー」を選択します。

このような画面です。(画面上部の選択欄は「ヘッダーメニュー」に合わせます。)

赤で囲った部分が現在表示されているグローバルメニュー(ヘッダーメニュー)の中身です。

「外観」→「メニュー」の中の「メニュー項目を追加」から、サブメニューとして追加したい項目を選びます。わたしの場合、タグごとにサブメニュー化したいので「タグ」を選びます。

このようにタグの一覧が表示されました↓

サブメニューとして表示したい項目を選択し「メニューに追加」をクリック。

メニュー構成の一番下にタグ「初心者ブログメモ」と「成長のためのメモ」が追加されました。

追加した項目は、クリックでつかんで自由に上下移動できます。カテゴリ「LIFE」のなかに副項目として「初心者ブログメモ」と「成長のためのメモ」を移動しました。

一段下がって表示されていますね。これで「メニューを保存」をクリック。

これで「LIFE」の下にサブメニューが表示されるようになりました。

カスタマイズ

メニュー幅を変える

「Cocoon設定」→「ヘッダー」と進みます。

一番下に「グローバルナビメニュー幅」という項目があるので「サブメニュー幅」で変更します。

私の場合、少し幅を縮めたかったので180pxに変更。(デフォルトでは240pxに設定されています。)幅を変えたら、「変更をまとめて保存」をクリック。

デフォルトと比べて、少しだけ短く出来ました。

点線でサブメニュー内を区切る

「外観」→「テーマエディター」から「スタイルシート」を編集します。

.sub-menu .caption-wrap {
border-top: dotted #333333;
}

をコピペしてください。ちなみに、

border-top…枠線の上部分
dotted………点線
#333333……黒色

を変更する要素です。

コピペしたら「ファイルを更新」をクリック。点線が表示されるようになりました。

これでサブメニューのカスタマイズは完了です。初心者でもサブメニューをカスタマイズすることができました。

こちらの記事もよく読まれています。

【スキルなしでもOK!】アイキャッチ画像の作り方【canva】
無料の画像編集ソフト「canva」の使い方を解説します。デザイン経験のない初心者の方でも、canvaを使えばサクっとおしゃれな画像をデザインすることができます。もちろんアイキャッチ画像だけでなく、名刺やポストカードのデザインも可能です。
【著作権、大丈夫ですか?】おすすめの安心フリー素材サイト9選
おすすめのフリー素材サイトを紹介します。また、サイト運営者やクリエイターなら誰しもが気になる「著作権」についても、掲載サイトごとに徹底的にまとめました。
【もしもアフィリエイト】かんたんリンクをカスタマイズ【コピペでOK!】
もしもアフィリエイトのかんたんリンク。手軽で便利ですが、新しいデザインがちょっとダサくて気になるのでカスタマイズしました。style.cssにコピペで完成なので是非使ってみてください!

コメント

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