Twenty eleven のナビゲーションを変えてみる

兎さん情報です。

スタイルシートの書き方が少しわかったので、Twenty eleven のテーマのナビゲーションの文字とバックグランドの色を変更してみました。ゆめさんのページは既に変更されていますね。

IE と Mozilla Firefox は確認済みですが、他のブラウザやモバイル端末に対する修正はしていません。 リクエストにお応えして、Chrome も追加しました。

本来なら、子テーマで対応すべきところを Twenty eleven の style.css に変更を加えます。色は適当に変えて下さいね。変更される方は、変更箇所を元に戻せるように、元の行をコメントアウトして残しておくことをお勧めします。

変更箇所はこちら、(長いので Moreタグを使ってみました）570行目付近で Menu と書いてあるところ。hover と focus の状態の設定が 620行目、630行目付近にありますが、こちらは変更していません。

#access {
/* background: #222; /* Show a solid color for older browsers */ /* IE の場合、この設定が使われる */
background: #6f4b3e; /* Show a solid color for older browsers */ /* #222 → #6f4b3e こげ茶 */
/* background: -moz-linear-gradient(#252525, #0a0a0a); /* Mozilla */
background: -moz-linear-gradient(#b28c6e, #6f4b3e); /* #b28c6e 柴染(ふしぞめ)から #6f4b3e こげ茶へのグラデーション */
background: -o-linear-gradient(#252525, #0a0a0a); /* Opera 用かな　#252525, #0a0a0a を別の色に変更するだけ */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */ /* このあたりは、モバイル系のブラウザ用と思う。*/
/* background: -webkit-linear-gradient(#252525, #0a0a0a); */  /* Chrome に対応する時にはここも変更 */
background: -webkit-linear-gradient(#b28c6e, #6f4b3e); /* #b28c6e 柴染(ふしぞめ)から #6f4b3e こげ茶へのグラデーション */
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
clear: both;
display: block;
float: left;
margin: 0 auto 6px;
width: 100%;}

もう一か所はナビゲーションの文字の色

#access a {
/* color: #eee; */
color: #f09199; /* 文字色を明るいグレーから桃色に変更 */
display: block;
line-height: 3.333em;
padding: 0 1.2125em;
text-decoration: none;
}