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