ディーエムガジェット

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[Acunetix WP Security] 基本的なセキュリティー対策と脆弱性対策
WordPress[Acunetix WP Security] 基本的なセキュリティー対策と脆弱性対策
WordPress[Stinger3用 子テーマ]サイドバーのNEW ENTRYを削除する方法
WordPress[Stinger3用 子テーマ]サイドバーのNEW ENTRYを削除する方法
WordPressテーマ「Stinger5」に子テーマを導入する方法
WordPressテーマ「Stinger5」に子テーマを導入する方法
WordPress サイドバーにFeedlyボタンとRSSボタンを表示する方法
WordPress サイドバーにFeedlyボタンとRSSボタンを表示する方法
WordPressテーマ「Stinger3」の画像の周りに線を入れる方法
WordPressテーマ「Stinger3」の画像の周りに線を入れる方法
WordPress[nend] スマホ用広告(アフィリエイト)の導入方法
WordPress[nend] スマホ用広告(アフィリエイト)の導入方法
WordPress[WP-DB-Backup] プラグインでデータベースをバックアップ
WordPress[WP-DB-Backup] プラグインでデータベースをバックアップ
WordPress 蛍光ペン風テキスト装飾をCSSに設定
WordPress 蛍光ペン風テキスト装飾をCSSに設定
WordPressテーマ「Stinger3」のトップページの記事の間に区切り線を入れる方法
WordPressテーマ「Stinger3」のトップページの記事の間に区切り線を入れる方法
WordPress サイドバーにTwitter(ツイッター)のタイムラインを表示する方法
WordPress サイドバーにTwitter(ツイッター)のタイムラインを表示する方法