賢威のソーシャルボタンの間にできる幅を調整する方法

Pocket

social_icon-e1370871481627
賢威にはソーシャルボタンがデフォルトで設定されていますが、気になることが一つだけあるんですよね。

それはソーシャルボタンの幅がバラバラということです。


デフォルトでは4つのボタンがあるのですが間隔が一定じゃないので格好悪く見えるんですよね。

ec68b1de1dc4c3ea9a4d8a0a9cb34e65

僕はそれが初めから気になっていたので、ソーシャルボタンを削除し、wp social bookmarking lightというプラグインを導入することでこの問題を解決していました。


しかしのちのち調べたところ、プラグインを導入せずとも、この間隔を綺麗に正すことができるんですね。


ソーシャルボタンの幅を調整する


まずは「外観」⇒「テーマ編集」⇒「design.css」と進みましょう。

その「design.css」の最下部に以下のコードを記述します。


.sb-gplus {
width: 60px;
margin-left: 5px;
}



f9c6e22666297a9083ed804822187bb8
                  

そうすると以下のように幅が縮まりました。

5c92246bd2eb840088e3123ba8993cc3
しかし、ツイッターボタンがまだ離れていますね・・・。


その場合、さらに以下のコードを追加します。

.sb-tweet {
margin: 0;
width: 83px;
}


                  
そうするとこんな感じで、綺麗に間隔が整ったと思います。

f772340c3711fb84913f40adf44b6493

なお、数値の値を変えることにより、幅を変えるなどできるので、自由に調整してみてください。

コメントを残す

サブコンテンツ