【注意】このMASAa.netはWordPressテーマ Cocoonを使用しており、THE THORはZMASAa.blogで使用中です。クリックするとZMASAa.blogを開きます。
WordPressCocoon

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

アイキャッチ画像 Cocoon
この記事は約3分で読めます。
スポンサーリンク

ヘッダーメニュー

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

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

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

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

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

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

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

カスタマイズ内容

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

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

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

サイズは、横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で使われている「ヘッダーメニュー」は、次のようになりました。

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

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

最後に

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

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

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

……… THE THOR(ザ・トール)購入について ………
下記バナーからTHE THOR(ザ・トール)をご購入の方には、
当掲載のカスタマイズについて優先的にサポートさせて頂きます。

下記バナー経由でTHE THOR(ザ・トール)を購入した日付と時刻
を合わせてお問い合わせフォームからご連絡下さい。



気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
空島クロニクル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
MU:アークエンジェル
Cave Shooter
イース6オンライン
ザ・アンツ
リネージュ2M
クッキーランキングダム
ドラゴンとガールズ交響曲
魔剣伝説
パズにゃん
ブレイドエクスロード

おすすめWordPressテーマ!
WordPressテーマ WING(AFFINGER6)
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver

MASAa.net

コメント