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

2017年6月12日2020年1月21日

記事内に広告を含みます

当サイトではアフィリエイトプログラムを利用して商品を紹介しています。

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);
}
}

以上です。