WordPress「Stinger3」サイドバーの背景色を変更する方法

2014/02/152015/02/16

[adsense]

サイドバーの背景色は意図的に変更していない

WordPressテーマ「Stinger3」のサイドバーのデフォルト背景色はサイト全体の背景色に依存します。メインコンテンツの背景色だけ違う方が読者の注意をメインコンテンツに向ける事が出来るからだと思います。自分でもやってみましたが、サイドバーの背景色を変更しない方が、メインコンテンツに目が向きやすい気がします。でも、それはそれ、これはこれ。デザイン上、サイドバーの背景色変えた方が好みの場合もあります。そんな人の為にサイドバーの背景色を変更する備忘録を残したいと思います。

デフォルトの状態のサイドバーはこちら

今回の方法でサイドバーの背景色を白にした場合はこちら↓

今回もOSXローカル環境にwordpressをインストールする方法で構築したローカル環境のWordPressでカスタマイズをします。

[adsense]

この自分のローカル環境のStinger3は過去のカスタマイズでスタイルシートの行数や細かな数値などデフォルト値とは違ってる部分もありますのでご了承ください。サイドバーの幅とメインコンテンツの幅はこちらの記事「WordPressテーマ「Stinger3」のサイドバーの幅を変更する方法」で変更しています。

style.cssを開いて編集

では、編集していきます。まずスタイルシート(style.css)を開きます。
例：ダッシュボード→外観→テーマ編集から→スタイルシート(style.css)自分は編集にTransmit4を使っています。

スタイルシート(style.css)の４７２行目あたりのこのコード

#wrap #wrap-in #side {
	float: right;
	width: 300px;
}

注意：ディーエムガジェットでは過去にサイドバーの幅を336pxから300pxに変更しています。デフォルトの方は336pxです。

この「width: 300px;」のあとにこのコード

	border: 1px solid #ccc;
	background-color: #FFF;
	border-radius: 4px 4px 4px 4px;
	padding-bottom: 20px;

を足します。最終的にこのようになるはずです。

#wrap #wrap-in #side {
	float: right;
	width: 300px;
	border: 1px solid #ccc;
	background-color: #FFF;
	border-radius: 4px 4px 4px 4px;
	padding-bottom: 20px;
}

[adsense]

完成

簡単に変更出来ました！色の変更は「background-color: #FFF;」の中の「#FFF」の部分をこのような

カラーチャートを紹介しているサイトを参考にお好きなように変更してみてください。読んで頂いてありがとうございました。