初心者Vaster2カスタマイズ「スマホのSNSボタンを小さく」

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



初心者Vaster2カスタマイズ「スマホのSNSボタンを小さく」

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

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

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

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

©さんがつ日記「スマホのSNSボタンを小さく」1


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

©さんがつ日記「スマホのSNSボタンを小さく」2

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

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

SNSボタンのHTML

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

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

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


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


.sns{
margin:4px auto;
width:120%;
}
.sns li {
width:13%;
margin:0 0 0 3px;
}
.sns li a {
font-size:0px;
padding:15px 0 15px 0;
border-radius:3px;
}


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


変更箇所について

「.sns{ 」

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

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


©さんがつ日記「スマホのSNSボタンを小さく」3


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

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

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

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

「.sns li { 」

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

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

「.sns li a { 」

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


LINEを追加

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

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

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


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

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

.sns li span,.sns .fa{
font-size:14px !important;
}

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

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


最後に・・・

元々の設定から色々試行錯誤しながらの数字の設定ですので「表示のズレ」が起きたり、「表示が小さい」などが起きたりするかもしれませんので、ご了承願いたいと思います・・・。

また途中にありました「左右の余白の設定」は、サイトの閲覧のしやすさが「ぐっと上がります」ので、是非設定したい項目です。


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

@media only screen and (max-width: 780px) {
.sns li{
width:47%;
}

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

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


0 件のコメント :