ディーエムガジェット

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テーマ「Stinger3」の「続きを読む」を右側へ移動する方法
WordPressテーマ「Stinger3」の「続きを読む」を右側へ移動する方法
WordPress[Broken Link Checker] リンク切れを自動通知する方法
WordPress[Broken Link Checker] リンク切れを自動通知する方法
WordPress[Stinger3] RSSフィードにアイキャッチ画像を表示
WordPress[Stinger3] RSSフィードにアイキャッチ画像を表示
WordPress サイドバーにFeedlyボタンとRSSボタンを表示する方法
WordPress サイドバーにFeedlyボタンとRSSボタンを表示する方法
WordPress サイドバーにFacebookのいいねボックスを表示する方法
WordPress サイドバーにFacebookのいいねボックスを表示する方法
WordPress Backup to Dropbox
バックアップ命「WordPress Backup to Dropbox」を導入
WordPress[Stinger5] プラグインなしで背景を画像にする
WordPress[Stinger5] プラグインなしで背景を画像にする
WordPress[Tweetily] 過去記事を自動ツイートする方法
WordPress[Tweetily] 過去記事を自動ツイートする方法
WordPress サイドバーにTwitter(ツイッター)のタイムラインを表示する方法
WordPress サイドバーにTwitter(ツイッター)のタイムラインを表示する方法
WordPressテーマ「Stinger3」のフォントを変更する方法
WordPressテーマ「Stinger3」のフォントを変更する方法