Blogger Labo：【Vaster2】CSSだけでSNSボタンのデザインを変える方法

Vaster2にはデフォルトでスタイリッシュなSNSボタンが搭載されている。

しかし、ブログをいじり始めるととデザインを自分なりにカスタマイズしてみたくなるもの。

そこで、CSSを変更してカスタマイズしたSNSボタンのデザインサンプルをここに残しておくことにする。

なお、本来のコードは「トーマスイッチ」さん のブログ記事にて公開されている。

本記事の趣旨は、上記記事のコードを書き換えてSNSボタンのデザインを変更するというもの。


SNSボタンのサンプル



以下のCSSを記載することで、上のようなSNSボタンに変更することができる。

なお、ボタンの上をカーソルが通過する時に一瞬拡大する仕様になっている。

SNSボタンのコード


サンプルのようなデザインにするには、CSSの「.sns li {}～.pocket a:hover {}」までを以下のコードに書き換える。

※本来のコードは「トーマスイッチ」さん のブログ記事を参照

.sns li {
   float:left;
   width:80px;　/* ボタンの横幅（レスポンシブ対応にしたい場合は%で指定） */
   height:80px;
   margin:20px 3px;
   list-style:none !important;
}
.sns li span,.sns .fa{
   font-size:30px !important;
}
.sns li a {
   font-size:12px;
   position:relative;
   display:block;
   padding:8px;
   transition:0.3s;
   text-align:center;
   text-decoration: none;
}
/* ツイッター */

 .twitter a {
   color:#fff;
   background:#00acee;
   display: inline-block;
}
.twitter a:hover {
   -webkit-animation: zoom .3s;
   animation: zoom .3s;
}
@-webkit-keyframes zoom {
  50% {
   -webkit-transform: scale(1.1);
  }
}
@keyframes zoom {
  50% {
   transform: scale(1.1);
  }
}

 /* Facebook */

 .facebook a {
   color:#fff;
   background:#3b5998;
   display: inline-block;
}
 .facebook a:hover {
   -webkit-animation: zoom .3s;
   animation: zoom .3s;
}

 /* グーグル */

 .google1 a {
   color:#fff;
   background:#db4a39;
   display: inline-block;
}
.google1 a:hover {
   -webkit-animation: zoom .3s;
   animation: zoom .3s;
}

 /* はてぶ */

 .hatebu a {
   color:#fff;
   background:#5d8ac1;
   display: inline-block;
}
.hatebu a:hover {
   -webkit-animation: zoom .3s;
   animation: zoom .3s;
}

 /* feedly  */

 .feedly a{
   color:#fff;
   background:#87c040;
   display: inline-block;
}
.feedly a:hover{
   -webkit-animation: zoom .3s;
   animation: zoom .3s;
}

 /* Pocket */

 .pocket a {
   color:#fff;
   background:#f03e51;
   display: inline-block;
}
.pocket a:hover {
   -webkit-animation: zoom .3s;
   animation: zoom .3s;
}