クール版 カスタムメニュー 表示崩れ ズレ修正
賢威のクール版でカスタムメニューの表示が崩れる現象が起きていますが、これは、賢威がカスタムメニューに対応してない為でCSSを改造することにより、改善されます。
※必ず、バックアップを取ってから修正してくださいね。
「外観」＞「テーマ編集」＞「wordpress.css」
以下のコードをwroadpress.cssの最下に追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
/*カスタムメニュー修正*/ #sidebar .widget_nav_menu ul li{ width: 218px; border-bottom: 1px solid #7ECEE5; list-style: none; } #sidebar .widget_nav_menu ul li a{ display: block; padding: 15px 10px 15px 30px; background: url(images/icon/icon-sidenavi01.png) 7px 15px no-repeat; } #sidebar .widget_nav_menu ul li li{ width: 218px; border-bottom: 0; } #sidebar .widget_nav_menu ul li ul{ margin-bottom: 15px; } #sidebar .widget_nav_menu ul li li a{ padding: 5px 10px 5px 43px; width: 165px; background: url(images/icon/icon-arrow.png) 22px 8px no-repeat; } /*マウスオーバー時の背景の設定*/ #sidebar .widget_nav_menu ul li a:active, #sidebar .widget_nav_menu ul li a:hover{ background: url(images/icon/icon-sidenavi01.png) 7px 15px no-repeat #7ECEE5; color: #fff; } #sidebar .widget_nav_menu ul li li a:active, #sidebar .widget_nav_menu ul li li a:hover{ background: url(images/icon/icon-arrow.png) 22px 8px no-repeat #7ECEE5; color: #fff; } #sidebar .menu h3, #sidebar2 .menu h3{ margin: -10px -8px 10px -11px; } |
ボーダーカラー（下線の色）の設定は以下をご覧ください。
|
1 2 3 4 5 |
#sidebar .widget_nav_menu ul li{ width: 218px; border-bottom: 1px solid #7ECEE5; ←ここを修正（例：#ffffff でホワイト） list-style: none; } |
マウスオーバー時の背景カラー修正は以下をご覧ください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/*マウスオーバー時の背景の設定*/ #sidebar .widget_nav_menu ul li a:active, #sidebar .widget_nav_menu ul li a:hover{ background: url(images/icon/icon-sidenavi01.png) 7px 15px no-repeat #7ECEE5;←ここを修正 color: #fff; } #sidebar .widget_nav_menu ul li li a:active, #sidebar .widget_nav_menu ul li li a:hover{ background: url(images/icon/icon-arrow.png) 22px 8px no-repeat #7ECEE5;←ここを修正 color: #fff; } #sidebar .menu h3, #sidebar2 .menu h3{ margin: -10px -8px 10px -11px; } |
さらに、サイドメニュー「H3」の画像のズレは以下を修正
|
1 2 3 |
#sidebar .menu h3, #sidebar2 .menu h3{ margin: -10px -8px 10px -11px;←ここの数字を修正して微調整します。 } |
入力が終わったら、「ファイルを更新」をクリックで修正完了です。お疲れさまでした。
この記事へのコメントはありません。