wpのテーマ、「twentyfourteen」をカスタマイズしようと思い色々といじってみると、とても複雑な仕掛けになっていて感心しました。既に気が付いている人も多いと思いますが、様々なブラウザの横幅にcssが対応していて、横幅に対してレイアウトが変化するようになっています。その為、そのブラウザの幅毎にcssが設定されているので、複雑なcssになっています。もし、PCから「twentyfourteen」の使用するテーマを開いてみて、ブラウザの幅を摘まんで狭くしてみてください。全体のレイアウトが変化すると思います。面白いですね。
では、本題に入ります。
style.css の以下の行を変更します。
[css]
//3583行目から、background-color: #000;をお好みの色に変更
//
.site:before {
background-color: #000;
content: "";
display: block;
height: 100%;
min-height: 100%;
position: absolute;
top: 0;
left: 0;
width: 182px;
z-index: 2;
}
[/css]
これで、サイドバーの色が変更になります。
しかし、ご説明しました通り、変更後にブラウザの幅を摘まんで狭くしてみると、やはりまだ色が黒のままになっています。そこで、もう一カ所、変更します。
[css]
//2024行目のbackground-color: #000;の色も変更する
//
#secondary {
background-color: #000;
border-top: 1px solid #000;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
clear: both;
color: rgba(255, 255, 255, 0.7);
margin-top: -1px;
padding: 0 10px;
position: relative;
z-index: 2;
}
//
//2613行目にもbackground-color: #000;が存在します。
//ここも変更します。
.content-sidebar .widget_twentyfourteen_ephemera .widget-title:before {
background-color: #000;
// 以上ここまで
[/css]
これで、サイドバーの色が変更出来ました。
お試しください。