Twenty Twelve メニューバーの色を変更
メニューバーをサイトのイメージに合わせた色に変更することはよくある要望ですね。
こちらはCSSの変更により可能です。
メニューバーの背景に色をつける
Tewnty Twelve のCSSファイルのなかから以下の部分を探します。
.site-header h1 { font-size: 26px; font-size: 1.857142857rem; line-height: 1.846153846; margin-bottom: 0; } .main-navigation ul.nav-menu, /* メニューバーの表示設定の仕様 */ .main-navigation div.nav-menu > ul { border-bottom: 1px solid #ededed; border-top: 1px solid #ededed; display: inline-block !important; text-align: left; width: 100%; } .main-navigation ul { margin: 0; text-indent: 0; } .main-navigation li a, .main-navigation li { display: inline-block; text-decoration: none; }
背景に色を付けるのと同時に、初期からついている上下の薄い線を削除しますので、以下のように変更します。
.main-navigation ul.nav-menu, /* グローバルナビの表示設定 */ .main-navigation div.nav-menu > ul { /* border-bottom: 1px solid #ededed; */ /* border-top: 1px solid #ededed; */ background: #fdf5e6; /* これが背景色 好きな色を指定してください */ display: inline-block !important; text-align: left; width: 100%; }
これで背景に色が付きます。
ただ、色がつくと気づくのですが、メニューのそれぞれの文字が左の端にピッタリくっついてて残念な感じに・・・
これを隙間を程よく開けて見やすい感じに変更します。
.main-navigation ul { margin: 0; padding-left: 14px; /* 追記部分ここから */ padding-left: 1rem; position: relative; /* 追記部分ここまで */ text-indent: 0;
変更が終了したらサーバーの子テーマのフォルダにアップロードして、サイトを確認してください。
なお、隙間を開けたことによって少しメニューバーがはみ出してしまった場合の修正は別途・・・
この投稿へのトラックバック
トラックバックはありません。