ディーエムガジェット

WordPressのTips備忘録を中心にComputer全般やデジモノ、ガジェット、アプリ紹介など

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

      2015/02/16

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

スポンサーリンク

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

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

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

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

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

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

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

スポンサーリンク

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

style.cssを開いて編集

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

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

#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;
}

スポンサーリンク

完成

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

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

 - WORDPRESS

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


  関連記事

WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法
WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法
WordPress[Simple Local Avatars] Gravatarに登録不要!プラグインでアバター画像を変更
WordPress[Simple Local Avatars] Gravatarに登録不要!プラグインでアバター画像を変更
WordPress ブログにメンテナンス中と表示 Easy Pie Maintenance Mode
WordPress ブログにメンテナンス中と表示 Easy Pie Maintenance Mode
WordPress[Stinger5] 画像に囲み線を入れる
WordPress[Stinger5] 画像に囲み線を入れる
WordPress[Stinger3]Amazonアソシエイトの自動ランキングを導入
WordPress[Stinger3] Amazonアソシエイトの自動ランキングを導入
WordPress[WP-DB-Backup] プラグインでデータベースをバックアップ
WordPress[WP-DB-Backup] プラグインでデータベースをバックアップ
WordPress 投稿一覧にタイトル文字数と本文文字数を表示させる
WordPress 投稿一覧にタイトル文字数と本文文字数を表示させる
WordPressテーマ「Stinger3」のフォントを変更する方法
WordPressテーマ「Stinger3」のフォントを変更する方法
WordPress[Stinger3] 背景を画像や写真に変更する方法
WordPress[Stinger3] 背景を画像や写真に変更する方法
WordPress[Stinger3] LINEで送るボタンを設置
WordPress[Stinger3] LINEで送るボタンを設置