SimplicityでSNSシェアボタンの色を変えるのは超簡単だった。CSS例

Simplicityは人気のテーマなので、少しデザイン面をいじって使わないと、ユーザー目線に立ったときに“見飽きた感”があります。

でもだからといってデザインを大きくいじるのは大変。
ということで、“飽き”に大きく影響する「記事下のシェアボタン」の雰囲気を変えてみました。

といってもただ色を変えただけです。Simplicityのカスタマイザーから設定できる数種類の選択肢だけでは多くの人と雰囲気が被ってしまうので、ボタンの色を全部濃い目のグレーにしてみました。

これだけでかなり雰囲気が違ってくる気がします。恐らく私と同じように「この辺の見た目がみんな一緒でつまんないんだよね」と感じている人も多いと思うので、今回やったボタンの色の変更の仕方を紹介します。

面倒くさそうと思って後回しにしていましたが、いざ手を付けてみると拍子抜けするぐらい簡単な記述を加えるだけで済みました。私と同じ色でよければコピペするだけで終了です。

Simplicityのシェアボタンの色変更

SimplicityテーマがSNSシェアボタンのデザインをどうやって制御しているのか分からなかったので面倒くさそうと思っていましたが、色については単純にstyle.cssで設定されていました。

こちらが当該箇所の元のCSS

/* SNSボタンの色の元のcss */
ul.snsbs a.twitter-btn-icon-link{background-color:#55acee;}
ul.snsbs a.facebook-btn-icon-link{background-color:#3b5998;}
ul.snsbs a.google-plus-btn-icon-link{background-color:#dd4b39;}
ul.snsbs a.hatena-btn-icon-link{background-color:#3C7DD1;}
ul.snsbs a.pocket-btn-icon-link{background-color:#EE4257;}
ul.snsbs a.line-btn-icon-link{background-color:#00c300;}
ul.snsbs a.evernote-btn-icon-link{background-color:#51b125;}
ul.snsbs a.feedly-btn-icon-link{background-color:#87bd33;}
ul.snsbs a.push7-btn-icon-link{background-color:#eeac00;}
ul.snsbs a.comments-btn-icon-link{
  background-color:#555;
  padding-top: 4px;
  padding-bottom: 6px;
}

これの「#~」の部分を適宜好きな色のコードに変更するだけです。子テーマにコピペしてカラーコード部分だけ変えてやればOKです。

たとえば私のように濃い目のグレーにする場合、全部のボタンのCSSをそのまま変更すると次のように。

/* SNSボタンを濃い目のグレーに */
ul.snsbs a.twitter-btn-icon-link{background-color:#555;}
ul.snsbs a.facebook-btn-icon-link{background-color:#555;}
ul.snsbs a.google-plus-btn-icon-link{background-color:#555;}
ul.snsbs a.hatena-btn-icon-link{background-color:#555;}
ul.snsbs a.pocket-btn-icon-link{background-color:#555;}
ul.snsbs a.line-btn-icon-link{background-color:#555;}
ul.snsbs a.evernote-btn-icon-link{background-color:#555;}
ul.snsbs a.feedly-btn-icon-link{background-color:#555;}
ul.snsbs a.push7-btn-icon-link{background-color:#555;}
ul.snsbs a.comments-btn-icon-link{
  background-color:#555;
  padding-top: 4px;
  padding-bottom: 6px;
}

ただこれだと、元からカラーコードが#555だったコメントボタンも再度同じ指示を記述していますし、使っていないボタンの色も指定しています。

なるべく余計な記述を増やしたくないので、実際には私の場合は次のように少しスリムな記述を子テーマに加えました。

/* SNSボタンの色変更 */
ul.snsbs a.twitter-btn-icon-link{background-color:#555;}
ul.snsbs a.facebook-btn-icon-link{background-color:#555;}
ul.snsbs a.google-plus-btn-icon-link{background-color:#555;}
ul.snsbs a.hatena-btn-icon-link{background-color:#555;}
ul.snsbs a.pocket-btn-icon-link{background-color:#555;}
ul.snsbs a.line-btn-icon-link{background-color:#555;}
ul.snsbs a.feedly-btn-icon-link{background-color:#555;}

EvernoteやPush7、それからコメントのボタンに関する記述を削除しています。

おわり

Simplicityテーマは本当に良いテーマだけど、デザインが人と被りやすいという点だけはどうしてもネックですね。私は過去にいつくも有料テーマを買って浮気してきましたが、結局Simplicityに戻ってきています。今まで買ったどのテーマよりもSimplicityの方が高機能です。

普通、有料のものの方が機能性が高くて、でも他に好きなデザインがあって…となりそうなものですが、日本市場におけるWordPressテーマに関してはテーマ作者わいひらさんのお陰で不思議な現象が起きていますw

有料テーマを買う理由はデザインの良さだけ。しかもその良いデザインだって、自分が良いと思うものは人も良いと思うことが多いので、半年や1年後には巷に溢れた普通のブログデザインになってしまいます。ありふれたデザインで、機能面で無料のSimplicityに劣っていたら……つまんないですよね。だから結局Simplicityでいいじゃんってなってしまいます。

テーマ購入に計10万円ぐらいは使って、それでも結局無料のテーマに戻らせるんですから、Simplicityってのはすごいものです。

シェアする

RSS/Feed

この記事と同じカテゴリーの記事一覧はこちら→ Simplicityカスタマイズ, ブログの話


トップへ戻る