blogger

Blogger カスタマイズ備忘録4 もっと小さくてスマートなSNSボタンにしたい

私が使用しているテンプレート

トーマスさんが公開されている Vaster2　レスポンシブ対応済みのblogger日本語テンプレートを使っています。 素晴らしいです。
完全にカスタマイズにハマってしまっています。
弄り方がわかってくるとデザインを変更することが楽しくなって、肝心の記事がアップできていません。同じようなことをどなたか書かれていましたね。

SNSボタンのデザインを変更してみる。

初期のSNSボタンは下のようなデザインですが、もう少しシンプルでも良いのかなと思っていました。

まず、小さくしましょう。

変更場所は3箇所
CSSの設定で以下のところを変更（赤字の部分）すると上のようになりました。

/*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; */
margin: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;
}

もっと小さくしてみます

各SNSの名前を<br/>以下削除すると上のようになりました。

<!--SNSボタン編集-->
　　:
    <i class='fa fa-twitter'/><br/>Twitter

ここまで小さくなりました
さらに、周りの枠を消します

各SNSの border 部分をコメントアウトすると上のようになりました。

/*　ツイッター　*/
 .twitter a {
color:#00acee;
background:#fff;
/* border:2px solid #00acee */
}

これで、アイコンだけになってしまいました。

この図形は Font Awaysam というWebアイコンフォントを使っているんですね。
最初の方で

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

と、リンクされていますね。
つまり、他のアイコンも簡単に使えるということになります

一例　　　　


こちらの記事に使い方が詳しく書かれています。
Font Awesomeの使い方：Webアイコンフォントを使おう

今回はここまで。
スタイルシートがわかっている方なら簡単なことなんでしょうが、
初心者の私は、ここまでたどり着くのにも一苦労です。

いい勉強になりました。