Cocoonのグローバルナビの見た目を変える

こんにちは、ゆんつです。

僕はブログのテーマにCocoonを使っています。

ブログをPCで閲覧した時に、画面の上の方にあるカテゴリへのリンクをグローバルナビというのですが、Cocoonデフォルトではこんな感じの状態です。

グローバルナビの各リンクへの領域がやや大き目で、グローバルナビにマウスカーソルが乗ると背景色が薄灰色になります。

このグローバルナビの見た目を少し変えたいのです。

やりたいことは

・グローバルナビを今よりもスリムにする

・グローバルナビにマウスカーソルが乗った時に背景色は白のままで、文字を太字にして色をつけ文字と同じ色の下線を表示する

です。

今日はこれらのカスタマイズをやってみたいと思います。

グローバルナビを今よりスリムにする

これはとっても簡単です。

WordPressのダッシュボードから「Cocoon設定」→「ヘッダー」をクリックするとヘッダー設定の画面が開きます。

ヘッダー設定の画面でヘッダーレイアウトの項目を「デフォルト」から「センターロゴ（スリムメニュー）」に設定して変更を保存すればデフォルトの状態よりもスリムになります。

ちなみにヘッダーレイアウトで「センターロゴ（トップメニュー）」を選択するとヘッダーとグローバルナビの位置が入れ替わります。

「センターロゴ（スリムメニュー）」に設定してもまだ幅が広く感じる場合は、ヘッダー設定画面の一番下の方にある「トップメニュー幅」と「サブメニュー幅」の数値も変更します。

デフォルトはメインメニューが176px、サブメニューが240pxだったので、これを両方160pxに変更しました。

設定の変更が終わったら「変更をまとめて保存」ボタンをクリックして設定を保存しブログを確認してみます。

変更前

変更後

グローバルナビをスリムにして更に幅を狭めたことで、各項目の上下左右のスペースが狭くなって各項目の位置が近くなっていることが分かります。

Cocoonのデフォルトの状態ではグローバルナビにマウスカーソルが乗ると背景色が薄い灰色になります。

僕の思い描くデザインではマウスカーソルが乗った時の背景色は必要ないので、これを白に変更します。

これを変更するには「Cocoon設定」→「ヘッダー」→「グローバルナビメニュー色」から行います。

ここを変更することでマウスがグローバルナビに乗った時の背景色を変更することが出来ます。

今回は色をつけたくないので白を選んでおきます。

これによりグローバルナビにマウスが乗っても背景色つかなくなります。

続いてマウスカーソルがグローバルナビに乗った瞬間に文字が太字なって色が付き、文字と同じ色の下線が表示されるようにします。

これらのカスタマイズはcssに記述する必要がありますのでダッシュボードから「外観」→「テーマの編集」をクリックします。

編集するテーマとして子テーマの「Cocoon Child」が選択されていることを確認してからcssを記述していきます。

cssに以下のコードを記述します。

.caption-wrap:hover {
    font-weight: bold;
    color: #ffaf00;
    border-bottom: 3px solid #ffaf00;
}

するとこんな感じでマウスが乗った瞬間に文字はオレンジ色の太字になり、下線がつくようになりました。

ただしサブメニューにちょっと問題があります。

メインメニューの文字の位置に比べて、サブメニューの文字位置はずいぶん左寄りなのです。

ですのでこれを中央寄りにします。

.sub-menu .item-label {
    text-align: center;
}

これによりサブメニューの文字も真ん中にメインメニューと同じように真ん中に配置されるようになりました。

これで最初に思い描いた、マウスカーソルが乗ったら文字が太字になって色が付き、文字色と同じ下線がつくというデザインになりました。

というわけで、今回はCocoonのグローバルナビゲーションの大きさ、マウスカーソルが乗ったときの見た目についてカスタマイズしました。

それでは、またですー。