Bloggerテーマ「Vaster2」のSNSシェアボタンをカスタマイズする

スポンサーリンク

Bloggerで人気のテーマである「Vaster2」のSNSシェアボタンをカスタマイズしました。

PC表示だと以下のように。

スマホ表示だと以下のように。

コピペ一発でOKです。

まずは「テーマ」→「HTMLの編集」を開きます。

/*SNSボタンのカスタマイズ*/を探します。

ここから

/* 記事ページのリンク
———————————————– */

までの間の全てのCSSを削除し、代わりに以下のCSSを貼り付けます。

.post-outer .sns ul {
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 1em 0;
}
.sns ul li {
    float: left;
    display: inline-block;
    text-align: center;
    width: calc(100% / 6);
    padding: 0;
}
.sns ul li a {
    color: #ffffff;
    display: block;
    padding: 8px 0;
}
.sns ul li a:hover {
	opacity: 0.8;
}
.twitter {
    background-color: #1da1f2;
}
.facebook {
    background-color: #3b5998;
}
.google1 {
    background-color: #dd4b39;
}
.hatebu {
    background-color: #00a4de;
}
.hatebu i {
    font-family: sans-serif;
    font-weight: bold;
}
.pocket {
    background-color: #ee4256;
}
.feedly {
    background-color: #6cc655;
}
@media screen and (max-width:480px) {
	.sns ul li {
		width: calc(100% / 3);
}
}

以上です。