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;
変更が終了したらサーバーの子テーマのフォルダにアップロードして、サイトを確認してください。
なお、隙間を開けたことによって少しメニューバーがはみ出してしまった場合の修正は別途・・・
この投稿へのトラックバック
トラックバックはありません。