ディーエムガジェット

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[Preserve Editor Scroll Position] エディターのスクロール位置を記憶
WordPress[Preserve Editor Scroll Position] エディターのスクロール位置を記憶
WordPress[Stinger3] RSSフィードにアイキャッチ画像を表示
WordPress[Stinger3] RSSフィードにアイキャッチ画像を表示
WordPress[Stinger3] サイドバーのアイコンを変更する方法
WordPress[Stinger3] サイドバーのアイコンを変更する方法
WordPressの人気テーマ「Stinger3」の追尾型SNSボックスを削除する方法
WordPressの人気テーマ「Stinger3」の追尾型SNSボックスを削除する方法
WordPress iPhone,iPad,Macのアプリ紹介に最適な「App Store Insert」を導入
WordPress iPhone,iPad,Macのアプリ紹介に最適な「App Store Insert」を導入
WordPressにAmazonアソシエイトのプラグイン「AmazonJS」を導入
WordPress[AmazonJS] Amazonアソシエイトのプラグインを導入
WordPress[WP-DB-Backup] プラグインでデータベースをバックアップ
WordPress[WP-DB-Backup] プラグインでデータベースをバックアップ
WordPress[Crayon Syntax Highlighter] ブログにソースコードを綺麗に表示
WordPress[Crayon Syntax Highlighter] ブログにソースコードを綺麗に表示
WordPress[nend] スマホ用広告(アフィリエイト)の導入方法
WordPress[nend] スマホ用広告(アフィリエイト)の導入方法
WordPress[MarsEdit] 過去記事を30件以上に変更
WordPress[MarsEdit] 過去記事を30件以上に変更