Vaster2でスマホのＳＮＳボタンを小さくしたい

初心者Vaster2カスタマイズです。今回は「スマホのＳＮＳボタンを小さく」という事で書いてみたいと思います。

「Vaster2」スマホ閲覧時のＳＮＳボタン

ＳＮＳボタンを小さくしたい

SNSボタンのカスタマイズは他のサービスを利用するという方法がありますが・・・

【Vaster2】SNSボタンを簡単にカスタマイズする方法！|Blogger - Vaster2カスタムブログ

このVaster2には初めからSNSボタンが付いていますので、その部分の見た目を変えたいと思います。

まず変更後の配置が下記になります。



大きな変更箇所は、「サイズを小さくし、１列にした」事、「文字を無くした」事です。

変更前は？

比べると存在感は薄くなりますが、小さくする分スクロール数が少なくなります。
ですのでスマホでは利便性が良くなるのでは？と思っての導入です。

今回もHTMLを変更しますので、事前にバックアップは取って下さい。

ＳＮＳボタンのＨＴＭＬ

こちらも参考のサイト様があります。

【Vaster2】SNSボタンのカスタマイズ|Blogger Labo

こちらのサイト様では、ＳＮＳボタンのＣＳＳ部分の内容を詳しく解説してありますので、それを活かしてスマートフォンの表示について変更してみました。


レスポンシブデザインに追加変更という事で、「@media screen and (max-width: 768px){・・・」の一番最後にでも書き込んで下さい。



上記が私の設定しているものです。

変更箇所

「.sns{　」

こちらでＳＮＳの部分で上下の余白を狭くしました。
また、「width:120%;」で表示のサイズ幅を大きくしています。

この「width:120%;」が100％の時は、何故か右に空白が出来ました・・・。




仕組みは分らないのですが、120％にすることで、見た目が収まったのでＯＫとします・・・。

この120％の数字についてですが、

スマホでみたときの左右の余白を変更する [Blogger / Vaster2]|あかりlog

上のあかりさんのブログを参考に「width:95%;」に変更をしていますので、その加減で120％になった可能性があります・・・。

「.sns li {　」

こちらではの部分の中で「width:13%;」の％は全体の巾を100％として１つのボタンの幅を何％で表示するか？という事ですので、100÷6ボタン＝16％で正しく表記されるハズなのですが、何故か上手くいきませんでした・・・。

ですので、表示が綺麗に収まった数字という事で13％の数字になっています。
これも上と同じで、表示幅を95％にした加減があるかもしれません・・・。

「.sns li a {　」

こちらの部分で、ボタン内の文字の非表示にしたかったのですが、やり方が分からず、「サイズを変更」という事で「font-size:0px;」にしています。

ＬＩＮＥを追加

標準の設定では、ＬＩＮＥが有りませんので、必要な場合は追加という事になります。
変更のやり方は、下記のサイト様に詳しく書いてあります。

Blogger用Vaster2を簡単にカスタマイズしてみる|休日の空間

アイコンを増やすと巾の数字を変更しないといけませんので、上のサイト様と同じように頻度の低そうなＳＮＳと交代という形にしています。


また、私はスマホのＳＮＳボタンアイコンの文字を非表示にしていますので、「＠」の部分を「LINE」へ変えています。

もし「LINE」の様にアイコンを文字に替え、文字数が増えて枠に入らない場合は、


こちらがアイコン部分のサイズになりますので、同じように追加して下さい。
数字を替えて小さくして収まるように設定をして下さい。（18pxが基本の設定です。）

私は特に設定をしていませんが、お使いの設定で加えると表示が崩れるという方がいらっしゃいましたら、試してみて下さい。

最後に

元々の設定から色々試行錯誤しながらの数字の設定ですので「表示のズレ」が起きたり、「表示が小さい」などが起きたりするかもしれませんので、ご了承願いたいと思います・・・。
また途中にありました「左右の余白の設定」は、サイトの閲覧のしやすさが「ぐっと上がります」ので、是非設定したい項目です。

また、SNSボタンのCSSの最後に


という部分があります。
ここを残していても問題はありませんが、内容の重複が気になる方は削除して下さい。

という訳で、初心者Vaster2カスタマイズ「スマホのＳＮＳボタンを小さく」を紹介してみました。
参考になれば幸いです。