ヘッダーメニュー
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で使われている「ヘッダーメニュー」は、次のようになりました。
ヘッダー部分とヘッダーメニュー部分の区分けがハッキリし、ヘッダーメニューの下側にシャドーフレームを取り入れたことで、ヘッダー全体が綺麗に見えるようになりました。
最後に
ヘッダーは最初にアクセスして見られる領域なので、少しだけ綺麗にしておきたい部分でもあります。
特にヘッダーの背景画像を使用しなくても、今回のカスタマイズでヘッダーに立体感が出ました。
コメント