カスタマイズ関係の記事をポストしたばっかりですが
こうしたいなーって言うことが出来たので記事にしておきます
やりたい事
メニューバーの幅を狭める 記事トップにある記事で変更済み
今回の記事ホバーエフェクトをもう少し分かりやすくしサイトに合わせた変更
変更部分やコードなど
デベロッパーツールについて
変更するにも追加するにも、まずはどの部分に適用させれば良いのかを調べないといけません
そこでブラウザがChromeの場合ですが、F12を押してデベロッパーツールを開きます
赤いアンダーラインを引いた部分をクリックして探したい部分をクリックします
ちなみにその隣の部分をクリックするとモバイル端末での見え方などが確認出来ますよ
レスポンシブなどの確認に便利です
クリックするとその部分のソースが表示されます
今回はメニュー部分を弄りたいので該当部分をクリックしてソースを確認します
この時一回で該当部分が見つけられるとは限りませんが、その周囲にはある筈なので確認します
コードを見つけて追記や変更
あとはエラー&リトライを繰り返すだけです!めげずにやっていきましょう
現在デザインを弄っている旨を表示しておくと良いかもしれません
さて、今回追記をした部分は以下になります(トップにある記事にも載せてある所も書いておきます)
メニュー部分の背景色の変更
/* グローバルメニュー */ .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
何故かCodeColorerが効かなくなっちゃってるのでPreで代用しました
…何が起きてるんだ(;・∀・)
どうもplugin load filterのせいだったみたいだ
一度削除して再インストールし設定し直したら直ったっぽい
またおかしくならなきゃ良いけど…