※当サイトではGoogleAdSense、アフィリエイトを使用した商品の紹介で収益を得ています。

Cocoonのグローバルメニュー周りのカスタマイズ

wordpress
この記事は約3分で読めます。

カスタマイズ関係の記事をポストしたばっかりですが

Cocoonに変更してからやったカスタマイズ
テーマをCocoonに変更後行ったカスタマイズの備忘録記事です

こうしたいなーって言うことが出来たので記事にしておきます

Sponsor Link
Sponsor Link

やりたい事

メニューバーの幅を狭める 記事トップにある記事で変更済み

最新のCocoonで以前の物よりも狭く出来るようになっているようです

今回の記事ホバーエフェクトをもう少し分かりやすくしサイトに合わせた変更

変更部分やコードなど

デベロッパーツールについて

変更するにも追加するにも、まずはどの部分に適用させれば良いのかを調べないといけません
そこでブラウザがChromeの場合ですが、F12を押してデベロッパーツールを開きます

赤いアンダーラインを引いた部分をクリックして探したい部分をクリックします
ちなみにその隣の部分をクリックするとモバイル端末での見え方などが確認出来ますよ
レスポンシブなどの確認に便利です

クリックするとその部分のソースが表示されます

今回はメニュー部分を弄りたいので該当部分をクリックしてソースを確認します
この時一回で該当部分が見つけられるとは限りませんが、その周囲にはある筈なので確認します

Sponsor Link

コードを見つけて追記や変更

あとはエラー&リトライを繰り返すだけです!めげずにやっていきましょう

cocoonを使っている場合はCocoon設定 通知を有効化し
現在デザインを弄っている旨を表示しておくと良いかもしれません

さて、今回追記をした部分は以下になります(トップにある記事にも載せてある所も書いておきます)

メニュー部分の背景色の変更

/* グローバルメニュー */
.menu-header, #navi .navi-in>.menu-header .sub-menu {
    background-color: #f3f4f5;
}

メニュー部分の幅を狭くする

.navi-in>ul li {
    height: 35px;
    line-height: 35px;
}

メニュー部分のホバーエフェクト

.caption-wrap:hover {
    background-color: #dbf4ff;
    color: #4489ff;
}
.sub-menu li:hover {
    background-color: #dbf4ff;
    color: #4489ff;
}

こんな感じで指定してあげると…

このような感じになります

なかなか見つけられなかった部分として子カテゴリ部分でした
子カテゴリ部分を開いたまま固定っていう事が出来ないため
ピンポイントでその部分のソースを確認する事が出来ないんですよね…
ここかな?と指定しても全体の背景が変わらず、両脇が元の色が残ったりと少し苦労しました

おわり

本当はもう少し派手というか3D風みたいな感じがいいかなーと思ったんだけど
流石に複雑というかコード部分が長いので止めました
今回の変更でも十分分かりやすくなったと思うしね

cocoonに限らず同じテーマを使っている人は多いと思うし、今回みたいにcssファイルで見た目を変えられる
カスタマイズは思っているほど難しくないのでチャレンジしてみてください

変更前にはちゃんとバックアップを取っておくことを忘れずに!

[share]

Comments

  1. 何故かCodeColorerが効かなくなっちゃってるのでPreで代用しました
    …何が起きてるんだ(;・∀・)

    • どうもplugin load filterのせいだったみたいだ
      一度削除して再インストールし設定し直したら直ったっぽい
      またおかしくならなきゃ良いけど…

タイトルとURLをコピーしました