クール版 カスタムメニュー 表示崩れ ズレ修正
賢威のクール版でカスタムメニューの表示が崩れる現象が起きていますが、これは、賢威がカスタムメニューに対応してない為でCSSを改造することにより、改善されます。
※必ず、バックアップを取ってから修正してくださいね。
「外観」>「テーマ編集」>「wordpress.css」
以下のコードをwroadpress.cssの最下に追加します。
/*カスタムメニュー修正*/
#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;
}
ボーダーカラー(下線の色)の設定は以下をご覧ください。
#sidebar .widget_nav_menu ul li{
width: 218px;
border-bottom: 1px solid #7ECEE5; ←ここを修正(例:#ffffff でホワイト)
list-style: none;
}
マウスオーバー時の背景カラー修正は以下をご覧ください。
/*マウスオーバー時の背景の設定*/
#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」の画像のズレは以下を修正
#sidebar .menu h3, #sidebar2 .menu h3{
margin: -10px -8px 10px -11px;←ここの数字を修正して微調整します。
}
入力が終わったら、「ファイルを更新」をクリックで修正完了です。お疲れさまでした。
この記事へのコメントはありません。