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

サイドバーの背景色は意図的に変更していない
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テーマ「Stinger3」見出しから自動的に目次を作ってくれるプラグインを導入 2014.02.14
-
次の記事
Mac[OSX]スクリーンショットの拡張子を.pngから.jpgに変更する方法 2014.02.16