Vaster2カスタマイズ：SNSボタンのデザインを変えよう！

どうもこんにちは、soeパパ（@soepapa_hibilog ）です。
今回はBloggerの日本語テンプレート「Vaster2」のシェアボタンのカスタマイズです。

デフォルトの状態だと少し大きいと感じる方もいると思うので、コンパクトなデザインに変更する方法をご紹介します。
また、「Feedly」のボタンもあるのですが、自分で試してみてうまく動作してなかったのでアドレスを少し変更してます。
同じようにお困りの方がいらっしゃいましたら参考になるかもしれません。

カスタマイズ前には必ずテンプレートのバックアップをしてください。

CSSのカスタマイズ

まずは変更する前に元々のデザインを見てみましょう。
PCの表示とモバイルの表示の2パターンがあります。

PC表示のデフォルトの状態はこんな感じのデザイン。

モバイルの表示はこうなります。
モバイルファーストで押し間違いがないよう大きめに作ってあるのだと思います。
そのままでも機能十分なのですが個人的にはちょっと大きいかなーと。

前述したように少しコンパクトに変えてみましょう。
まずはCSSの部分を変更します。

『/*SNSボタンのカスタマイズ*/』で検索してみてください。

/*SNSボタンのカスタマイズ*/
.sns{
margin:10px auto;
text-align:center;
width:100%;
}
.sns ul {
list-style:none !important;
padding: initial !important;
}
.sns li {
float:left;
width:30%;
height:54px;
margin:20px 3px;
list-style:none !important;
}
.sns li span,.sns .fa{
font-size:30px !important;
}
.sns li a {
font-size:18px;
position:relative;
display:block;
padding:8px;
transition:0.3s;
font-weight: 700;
border-radius:6px;
text-align:center;
text-decoration: none;
}
/* ツイッター */
.twitter a {
color:#00acee;
background:#fff;
border:2px solid #00acee
}
.twitter a:hover {
background:#00acee;
color:#fff;
}
/* Facebook */
.facebook a {
background:#fff;
color:#3b5998;
border:2px solid #3b5998;
}
.facebook a:hover {
background:#3b5998;
color:#fff;
}
/* グーグル */
.google1 a {
background:#fff;
color:#db4a39;
border:2px solid #db4a39;
}
.google1 a:hover {
background:#db4a39;
color:#fff;
}
/* はてぶ */
.hatebu a {
background:#fff;
color:#5d8ac1;
border:2px solid #5d8ac1;
}
.hatebu a:hover {
background:#5d8ac1;
color:#fff;
}
/* feedly */
.feedly a{
background:#fff;
color:#87c040;
border:2px solid #87c040;
}
.feedly a:hover{
background:#87c040;
color:#fff;
}
/* Pocket */
.pocket a {
background:#fff;
color:#f03e51;
border:2px solid #f03e51;
}
.pocket a:hover {
background:#f03e51;
color:#fff;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
.share-title{
padding: .5em .75em;
margin-bottom: 30px;
background:$(entryh2.background);
color:$(entryh2.color);
}
@media only screen and (max-width: 780px) {
.sns li{
width:47%;
}}

これは元々のCSSの記述です。

差し替える部分は
『/*SNSボタンのカスタマイズ*/』から

『/* リンク』の真上の行までです。

/*SNSボタンのカスタマイズ*/
.sns a{
display:block;
height:25px;
padding-top:8px;
color:#ffffff;
text-decoration:none;
}
.sns a:hover{
text-decoration:none;
color:#ffffff;
}
.sns ul{
height:auto;
}
.sns li{
font-size:16px;
float:left;
text-align:center;
width:16.15%;
margin: 4px 0.25%;
border-radius:5px;
list-style:none;
}
/* ツイッター */
.twitter {
background:#55acee;
box-shadow:0 4px #2383cc;
}
.twitter :hover {
background:#83c3f3;
}
/* Facebook */
.facebook {
background:#4668b3;
box-shadow:0 4px #283b66;
}
.facebook :hover {
background:#4c70ba;
}
/* グーグル */
.google1 {
background:#dd4b39;
box-shadow:0 4px #c23321;
}
.google1 :hover{
background:#e47365;
}
/* はてぶ */
.hatebu {
background:#2c6ebd;
box-shadow:0 4px #225694;
}
.hatebu :hover {
background:#4888d4;
}
/* feedly */
.feedly {
background:#00C300;
box-shadow:0 4px #009d00;
}
.feedly :hover{
background:#2bd92b;
}
/* Pocket */
.pocket {
background:#f13d53;
box-shadow:0 4px #e6152f;
}
.pocket :hover {
background:#f26f7f;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
.share-title{
padding: .5em .75em;
margin-bottom: 30px;
background: #008ec2;
color: #fff;
}
@media only screen and (max-width: 1024px) {
.sns a{
height:30px;
padding-top:15px;
}
.sns li{
font-size:17px!important;
width:33%;
margin-left:0.15%;
margin-right:0.15%;
}}

上記に全部差し替えます。

次はSNSのボタンのコードを少しだけ改変します。

SNSボタンのコードのカスタマイズ

内容的にはロゴとSNS名が改行されているので<br>を消して「Feedly」のアドレスを少し変更しています。

『』で検索してください。

<b:if cond='data:blog.pageType == "item"'>
<h4 class='share-title'>この記事をシェアする</h4>
<div class='sns'>
<ul class='clearfix'>
<li class='twitter'><a expr:href='"http://twitter.com/share?text=" + data:post.title + "｜" + data:blog.title + " &url=" + data:post.canonicalUrl' onclick='javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;' target='_blank'><i class='fa fa-twitter'/><br/>Twitter</a></li>
<li class='facebook'><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.canonicalUrl + "&t=" + data:post.title + "｜" + data:blog.title' onclick='javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;' target='_blank'><i class='fa fa-facebook'/><br/>Facebook</a></li>
<li class='google1'><a expr:href='"https://plus.google.com/share?url=" + data:post.canonicalUrl' onclick='javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;' target='_blank'><i class='fa fa-google-plus'/><br/>Google+</a></li>
<li class='hatebu'><a expr:href='"http://b.hatena.ne.jp/add?mode=confirm&url=" + data:post.canonicalUrl + "&" + data:post.title + "｜" + data:blog.title' onclick='javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;' target='_blank'><i class='fa'>B!</i><br/>はてブ</a></li>
<li class='pocket'><a expr:href='"http://getpocket.com/edit?url=" + data:post.canonicalUrl' onclick='javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;' target='_blank'><i class='fa fa-get-pocket'/><br/>Pocket</a></li>
<li class='feedly'><a href='http://cloud.feedly.com/#subscription%2Ffeed%2FブログのURL' target='blank'><i class='fa fa-rss'/><br/>Feedly</a>
</li>
</ul>
</div>
</b:if>

『』から『』

<b:if cond='data:blog.pageType == "item"'>

<h4 class='share-title'>この記事をシェアする</h4>

<li class='twitter'><a expr:href='"http://twitter.com/share?text=" + data:post.title + "｜" + data:blog.title + " &url=" + data:post.canonicalUrl' onclick='javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;' target='_blank'><i class='fa fa-twitter'/> Twitter</a></li>

<li class='facebook'><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.canonicalUrl + "&t=" + data:post.title + "｜" + data:blog.title' onclick='javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;' target='_blank'><i class='fa fa-facebook'/> Facebook</a></li>

<li class='google1'><a expr:href='"https://plus.google.com/share?url=" + data:post.canonicalUrl' onclick='javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;' target='_blank'><i class='fa fa-google-plus'/> Google+</a></li>

<li class='pocket'><a expr:href='"http://getpocket.com/edit?url=" + data:post.canonicalUrl' onclick='javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=350,width=600');return false;' target='_blank'><i class='fa fa-get-pocket'/> Pocket</a></li>

<li class='feedly'><a href='https://feedly.com/i/subscription/feed/https://papanohibilog.blogspot.com/feeds/posts/default?alt=rss' target='blank'><i class='fa fa-rss'/> Feedly</a>

</li>

</ul>

</div>

</b:if>

上記に差し替えます。

赤字の「Feedly」のアドレスは当ブログ用になってますので、

https://feedly.com/i/subscription/feed/https://papanohibilog.blogspot.com/feeds/posts/default?alt=rss

青字の部分をご自分のブログのRSSフィードに差し替えてください。

自分のRSSフィードがよくわからない場合は、

ブログのアドレス/feeds/posts/default?alt=rss

ブログのアドレスの部分に自分のブログのURLを入れればOKです。

変更後のSNSボタンのデザイン

これでデザインは下のスクショのように変わるはずです。

PCで見た場合はこちら。
デフォルトでは2段表示だったのを横一列に変えてボタンの色も各イメージカラーに変更してみました。

モバイルでの表示はこんな感じ。

デフォルトでは3段だったのを2段に変更しました。

表示が崩れる場合

/*SNSボタンのカスタマイズ*/
.sns a{
display:block;
height:25px; /*ボタンの高さ*/
padding-top:8px;/*文字の上からの位置*/
color:#ffffff;
text-decoration:none;
}

赤字の部分はボタンの高さの設定になりますのでここを変更すればボタンと文字の位置関係が崩れた場合、数値を調整することができます。

@media only screen and (max-width: 1024px) {
.sns a{
height:30px;/*ボタンの高さ*/
padding-top:15px;/*文字の上からの位置*/
}
.sns li{
font-size:17px!important;
width:33%;
margin-left:0.15%;
margin-right:0.15%;
}}

モバイルの方の表示が崩れた場合はこの赤字の部分を調整してください。

青字の部分はモバイル表示の時のフォントの大きさ
width:32%;はボタンの横幅になります。
32%→44％に変更すると、横２の3段に変更可能です。

カスタマイズは以上になります。

ここまで記事を読んでいただき感謝！
参考になりましたでしょうか？
それではまた次回！

Vaster2カスタマイズ：SNSボタンのデザインを変えよう！

CSSのカスタマイズ

SNSボタンのコードのカスタマイズ

変更後のSNSボタンのデザイン

表示が崩れる場合

人気の記事

三菱霧ヶ峰、エアコンを自分で分解して掃除する方法！

1歳のお祝いは餅踏みをしよう！九州は背負い餅ではなく餅踏みです。

佐賀市の食べ放題のお店まとめ！おすすめ26選！！

Amazonのプライムビデオの購入がキャンセルできない時の対処法

三菱霧ヶ峰、エアコンを自分で分解して掃除する方法！

1歳のお祝いは餅踏みをしよう！九州は背負い餅ではなく餅踏みです。

佐賀市の食べ放題のお店まとめ！おすすめ26選！！

Amazonのプライムビデオの購入がキャンセルできない時の対処法

耳鏡の使い方とレビュー！こどもの耳かきがすごく楽になった！！