Vaster2カスタマイズ!SNSボタンのサイズを変更する方法

カスタマイズ
スポンサーリンク

今や、どのブログを見ても当たり前のように設置してあるSNSボタン。
Bloggerのテンプレート「Vaster2」も最初からTwitterやFacebook等のSNSボタンがついています。が、チョット気になる点が……。

SNSボタンがデカい!

読者の方にボタンを押してもらう為には大きい方がイイかも知れませんが、個人的にはもう少し小さくして見た目をスッキリ・コンパクトにしたいと思いました。

そこで今回は、SNSボタンのサイズを変更する方法をご紹介します。

スポンサーリンク

SNSボタンのサイズ変更前

パソコン版の表示画面

2行×3列」で表示されています。
パソコンの画面上ではさほど大きいとは感じませんが、シンプルに「1列」に変更していきます。

 

モバイル版の表示画面

3行×2列」で表示されています。
iPhoneで見ると、画面の半分以上が占領されている為、かなり大きく感じます。
これを小さくして、「2行×3列」に変更していきます。

 

スポンサーリンク

SNSボタンのサイズ+余白の変更方法

SNSボタンのサイズ変更方法

1. Blogger管理画面「テーマ」 → 「HTMLの編集」をクリック

2. 「Ctrl + F」で検索バーを表示 → ” SNSボタンのカスタマイズ ” と入力して「Enter」キー

3. 以下の通り、コードを変更(全6ヶ所) → 「テーマを保存」をクリック
.sns{
margin:10px auto; ⇒ ” 0px ” に変更

.sns li {
float:left;
width:30%; ⇒ ” 15% ” に変更
height:54px;
margin:20px 3px; ⇒ ” 5px ” に変更

.sns li span,.sns .fa{
font-size:30px !important; ⇒ ” 20px ” に変更

.sns li a {
font-size:18px; ⇒ ” 12px ” に変更

@media only screen and (max-width: 780px) {
.sns li{
width:47%; ⇒ ” 30% ” に変更

記事シェアタイトルとSNSボタンの余白調整方法

記事シェアタイトルとSNSボタンの間の余白が広いので、お好みで調整して下さい。

.share-title{
padding: .5em .75em;
margin-bottom: 30px; ⇒ ” 10px ” に変更

おしまい!お疲れさまでした。

CSSコード変更後の画面

 

スポンサーリンク

SNSボタンのサイズ変更前と変更後の比較

パソコン版の表示画面

「1列」に変更したことで、全体的にスッキリしました。

 

モバイル版の表示画面

「2行×3列」に変更したことで、画面の半分から約3分の1になりました。

 

スポンサーリンク

さいごに

SNSボタンのサイズを小さくすることによって、全体的なバランスが良くなり、スッキリしたと思いませんか?

Vaster2を使用している方で、私と同じように「SNSボタンが大きい!」と感じている方のお役に立てましたら嬉しいです。

最後まで読んでいただき、ありがとうございましたm(_ _)m
それではまた~!

カスタマイズ記事をまとめました☆
>>>Blogger/Vaster2のカスタマイズ記事をまとめて一挙大公開!

Blogger/Vaster2のカスタマイズ記事をまとめて一挙大公開!

 

コメント