記事内に商品プロモーションが含まれる場合があります
Bloggerで人気のテーマである「Vaster2」のSNSシェアボタンをカスタマイズしました。
PC表示だと以下のように。
スマホ表示だと以下のように。
コピペ一発でOKです。
まずは「テーマ」→「HTMLの編集」を開きます。
/*SNSボタンのカスタマイズ*/を探します。
ここから
/* 記事ページのリンク
----------------------------------------------- */
までの間の全てのCSSを削除し、代わりに以下の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);
}
}以上です。