ディーエムガジェット

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

WordPress[Stinger3] 記事下のSNSボックスの背景色を変更する方法

      2015/02/16

WordPress[Stinger3] 記事下のSNSボックスの背景色を変更する方法

Stinger3ユーザーもそうでないブロガーの方も記事下のSNSボックスを枠で囲ったり、背景色を変更してブログに来てくれる人にわかりやすいようにカスタマイズしている人が多い気がします。確かに背景色を付けるだけでSNSボックスが判別しやすいなぁと思ったので変更してみました。今回も備忘録として残したいと思います。今回は管理ブログの夢はアイアンマン!トライアスリートの挑戦。でカスタマイズを行いたいと思います。

スポンサーリンク

記事下のSNSボックスを枠で囲って背景色を変更する

現状のSNSボックスの表示はこんな感じです。

WordPress[Stinger3] 記事下のSNSボックスの背景色を変更する方法

自分の管理ブログではこの記事で書いたようにWordPress人気テーマSTINGER3の広告を2つ並べるカスタマイズGoogleアドセンスをダブルレクタングルで表示しています。その下にSNSボックスを表示させているのでスクロールしていると広告の配色に負けてSNSボックスがあまり目立たなくて「あれ?SNSボックスどこ行った!?」って事もたまにありますw。YouTubeでおなじみのカズちゃんねるのカズさんのブログもこんな感じで、

WordPress[Stinger3] 記事下のSNSボックスの背景色を変更する方法

ダブルレクタングルの下にSNSボックスを表示させています。カズさんの場合、自分の写真入れてちょっとしたコメント書いていますが、今回自分は「まぁ背景色ぐらい変わってればいいかな?」ぐらいの気持ちだったので枠で囲って背景色を変更してみたいと思います。完成するとこんな感じになります。

スポンサーリンク

WordPress[Stinger3] 記事下のSNSボックスの背景色を変更する方法

スタイルシート(style.css)を開く

スタイルシート(style.css)を開いて設定をしていきます。管理画面 → 外観 → テーマ編集 → 右のサイドバーからスタイルシート(style.css)開いて下さい。自分はTransmitを使用していますのでそちらで説明していきます。

Transmit
カテゴリ: ユーティリティ
現在の価格: ¥3,400

心配な方はスタイルシートのバックアップを必ず行ってください!スタイルシート(style.css)を開いて、800行目ぐらい(色々設定を追加しているので場所はみなさんと違うはずです。)にある下記の項目を変更します。デフォルトはこのような表記になっています。

後でデフォルト値に戻したい場合もあると思うので、これをコメントアウト(設定を反映させないように)します。下記のようになります。

上記の記述の下に枠と背景色のコードを足します。

最終的に下記のような見栄えになるはずです。

スポンサーリンク

デフォルト値に戻したい場合は下の設定を消して、上のコメントアウトを消せば元通りに戻ります。一番下の「background-color: #778899;」の#778899が背景色になっています。このようなカラーコードの鉄人サイトでお好きな色に変更してください。カラーコードで検索すると色々出てくるので探してみてください。

 - WORDPRESS

Message

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

CAPTCHA


  関連記事

WordPress[Crayon Syntax Highlighter] ブログにソースコードを綺麗に表示
WordPress[Crayon Syntax Highlighter] ブログにソースコードを綺麗に表示
WordPressテーマ「Stinger3」のフォントを変更する方法
WordPressテーマ「Stinger3」のフォントを変更する方法
WordPress[Simple Local Avatars] Gravatarに登録不要!プラグインでアバター画像を変更
WordPress[Simple Local Avatars] Gravatarに登録不要!プラグインでアバター画像を変更
WordPressテーマ「Stinger3」にプラグインなしでGoogleアナリティクスを導入する方法
WordPressテーマ「Stinger3」にプラグインなしでGoogleアナリティクスを導入する方法
WordPress[Preserve Editor Scroll Position] エディターのスクロール位置を記憶
WordPress[Preserve Editor Scroll Position] エディターのスクロール位置を記憶
WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法
WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法
WordPress 投稿一覧にタイトル文字数と本文文字数を表示させる
WordPress 投稿一覧にタイトル文字数と本文文字数を表示させる
WordPress サイドバーにFeedlyボタンとRSSボタンを表示する方法
WordPress サイドバーにFeedlyボタンとRSSボタンを表示する方法
驚くほど効果があった無料CDNサーバー「CloudFlare」の導入
驚くほど効果があった無料CDNサーバー「CloudFlare」の導入
WordPress ブログにメンテナンス中と表示 Easy Pie Maintenance Mode
WordPress ブログにメンテナンス中と表示 Easy Pie Maintenance Mode