Simplicity の SNS ボタン見た目改造してみた

SNS Image

当ブログで採用してるテーマ Simplicity

Simplicity は SNSボタンも3種類から選べて
特に Simplicity オリジナルのものは、
API を使用して高速に表示できる。

見た目もかっこいい。

が・・・

やっぱり、自分オリジナルにしたくなったｗ

記事上のSNSボタンの見た目を改造したよ

オリジナルの PHP ファイルとスタイルシートとにらめっこしながら、
ちょこちょこ修正・・・

で、最終的に出来上がったものが ↓ こんな感じ。

Simplicity オリジナル
Simplicity オリジナルのSNSボタン

当ブログ オリジナル
当ブログオリジナルのSNSボタン

カウント数が増えた時の表示
桁数が増えた場合

変更の概要

  1. 各SNSへのリンク先を一つにまとめた
  2. SNS名を表示するようにした
  3. カウント数をボタン内に表示するようにした

SNS名とカウント数の font-family は、
フリーのWebフォント Source Sans Pro を採用。
Source Sans Pro にした理由は、フォントの横幅が狭いので、
ボタンそのものの横幅も狭くできるから (・∀・)

Google さんのサイトから直接フォントを読み込んでもよいのだが、
なるべく自サイトだけで解決したかったので、
フォントファイルを自サーバーに設置して読み込むようにした。

Source Sans Pro は横幅が狭いが、
それでも、Facebook だけは、文字数が多くて
なんとなく間延びしてしまう。

なので、Facebook だけ

letter-spacing: -1px;

という、普段なら絶対使わないような指定をしたｗ

それとは逆にカウント数は、
桁数が増えた時に見やすいように（増えないけど・・・）

letter-spacing: 1px;

と、それぞれ微調整した。

とりあえず、ボタン5個なら、
全シェア数が 99999 （9億9999）まで画面内に収まるｗ

モバイルのSNSボタンも見た目改造

ついでに、モバイルアイコンも見た目を改造した。

Simplicity オリジナル
Simplicity オリジナルのモバイルSNSアイコン

当ブログ オリジナル
当ブログ オリジナルのモバイルSNSアイコン

PCのSNSボタンの見た目に合わせる感じに修正した。

こっちは、スタイルシートだけの変更なので簡単。
ものの数分で出来上がり。

とりあえず、満足 ヽ(´ー｀)ノ

WordPress

Posted by るな