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

ヘッダーメニュー

WordPressテーマ Cocoonで使われている「ヘッダーメニュー」のカスタマイズについてまとめてみました。

テーマCocoonのヘッダーメニュー

WordPressテーマ Cocoonで使われている「ヘッダーメニュー」は次の様になっています。

ヘッダー部分とヘッダーメニュー部分が一体化されており、少し寂しいヘッダーとなっています。

ヘッダーメニューのカスタマイズ

ヘッダー部分とヘッダーメニュー部分の境にボーダーフレームを、ヘッダーメニュー部分の下側にシャドウフレームを追加するカスタマイズを行います。

カスタマイズ内容

最初に「ヘッダーメニュー」のバックグラウンド画像を用意します。

今回自分が作成した「ヘッダーメニュー」のバックグラウンド画像は次になります。

サイズは、横100px × 縦44px です。

この「ヘッダーメニュー」のバックグラウンド画像を見て頂ければ分かるのですが、上側にボーダーフレームを、下側にシャドウフレームが施されています。

次に下記のカスタマイズ内容を「スタイルシート(style.css)」に追記します。

/************************************
** ■ヘッダーメニューカスタマイズ
************************************/
.navi.cf,
.navi-in.wrap.cf,
.menu-header,
.menu-item.menu-item-type-custom.menu-item-object-custom.current-menu-item.current_page_item.menu-item-home,
.menu-item.menu-item-type-custom.menu-item-object-custom{
  height: 44px!important; /*メニュー縦幅設定*/
}
.navi.cf{
  background: url(https://masaa.net/images/menu_backgroundimage.png) center repeat; /*バックグラウンド画像指定*/
}
.caption-wrap{
  height: 44px!important; /*メニュー縦幅設定*/
  display: flex; /*並列スタイル指定*/
  align-items: center; /*縦中央寄せ*/
  justify-content: center; /*横中央寄せ*/
  font-weight: bold; /*文字強調*/
}

カスタマイズ後のヘッダーメニュー

今回のカスタマイズによって、WordPressテーマ Cocoonで使われている「ヘッダーメニュー」は、次のようになりました。

ヘッダー部分とヘッダーメニュー部分の区分けがハッキリし、ヘッダーメニューの下側にシャドーフレームを取り入れたことで、ヘッダー全体が綺麗に見えるようになりました。

最後に

ヘッダーは最初にアクセスして見られる領域なので、少しだけ綺麗にしておきたい部分でもあります。

特にヘッダーの背景画像を使用しなくても、今回のカスタマイズでヘッダーに立体感が出ました。