ディーエムガジェット

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テーマ「Stinger3」の画像の周りに線を入れる方法
WordPressテーマ「Stinger3」の画像の周りに線を入れる方法
WordPress クリック率3倍 記事本文中センターにショートコードでアドセンスを表示
WordPress クリック率3倍 記事本文中センターにショートコードでアドセンスを表示
WordPress[Crayon Syntax Highlighter] ブログにソースコードを綺麗に表示
WordPress[Crayon Syntax Highlighter] ブログにソースコードを綺麗に表示
WordPressテーマ「Stinger3」見出しから自動的に目次を作ってくれるプラグインを導入
WordPressテーマ「Stinger3」見出しから自動的に目次を作ってくれるプラグインを導入
WordPress[Simple Local Avatars] Gravatarに登録不要!プラグインでアバター画像を変更
WordPress[Simple Local Avatars] Gravatarに登録不要!プラグインでアバター画像を変更
WordPress[MarsEdit] プレビュー画面を自分のブログデザインに変更
WordPress[MarsEdit] プレビュー画面を自分のブログデザインに変更
WordPress[Stinger3用 子テーマ] 追尾型SNSボックスを削除する方法
WordPress[Stinger3用 子テーマ]追尾型SNSボックスを削除する方法
WordPress[Limit Login Attempts] ログイン試行回数を制限してブルートフォースアタックを防ぐ
WordPress[Limit Login Attempts] ログイン試行回数を制限してブルートフォースアタックを防ぐ
WordPressテーマ「Stinger3」記事タイトルのフォントカスタマイズ
WordPressテーマ「Stinger3」記事タイトルのフォントカスタマイズ
WordPress[Stinger3用 子テーマ]フォントを変更する方法
WordPress[Stinger3用 子テーマ]フォントを変更する方法