小野市のWEB職人によるブログ

クール版 カスタムメニュー 表示崩れ ズレ修正

賢威のクール版でカスタムメニューの表示が崩れる現象が起きていますが、これは、賢威がカスタムメニューに対応してない為で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;←ここの数字を修正して微調整します。
 }

入力が終わったら、「ファイルを更新」をクリックで修正完了です。お疲れさまでした。

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

郵便番号から住所検索

-

Address

ブログ

にほんブログ村 地域生活(街) 関西ブログへ