(cache) コピペOK！読者になるボタンやSNSフォローボタンのカスタムCSS

f:id:george-gogo:20160303153158p:plain

ブログ運営には欠かせない、はてな読者登録や各種SNSのフォローボタンを新しく作りました！今回のは自信作だぜ！

過去にも『読者になるボタン』のカスタム記事を書きましたが、今回はその他のフォローボタンもまとめて一新しました！複数のSNSをやっている方には、このボタンデザインはおススメ！

過去記事

georges.hatenablog.jp

まずは完成形

どう？横にビヨーンで伸びたり縮んだり！かわいいですね。キュートですね。

このデザインのおススメポイントは、画面サイズやサイドバーなどのサイズに自動でピッタリサイズになる点です。

というわけでさっそく使い方を説明していきます。

HTML

まずはHTMLに各自みんなのURLリンクを貼り付けていきましょう。

<div class="follow-btn">
<ul>
<!--読者ボタン-->
<li class="btn1">
<a href="http://blog.hatena.ne.jp/はてなID/はてなドメイン/subscribe"  target="_blank"><span class="btn1-icon"><br /></span>Hatena</a></li>
<!--Twitterボタン-->
<li class="btn2">
<a href="https://twitter.com/intent/follow?screen_name=ツイッターID" target="_blank"><span class="btn2-icon"><br /></span>Twitter</a></li>
<!--Feedlyボタン-->
<li class="btn3">
<a href="FeedlyのURL" target="_blank"><span class="btn3-icon"><br /></span>Feedly</a></li>
<!--Facebookボタン-->
<li class="btn4">
<a href="FacebookのURL" target="_blank"><span class="btn4-icon"><br /></span>Facebook</a></li>
</ul>
</div>

リンクの貼り方解説

赤色でコメントした部分についてです。

はてなIDは僕で言うと『george-gogo』です。自分のプロフィールで確認できます。

はてなドメインというのは、自分のブログのURLの『http://』を除いたものです。僕のブログはhttp://georges.hatenablog.jp/なので、georges.hatenablog.jpがドメインになります。

ツイッターIDは『@』を除いたものを貼って下さい。

FeedlyとFacebookは自分のページのURLをそのまま貼り付けてOKです。

いらないボタンは消してOK

「僕は読者ボタンとTwitterだけで充分だよー」などの人は、各ボタンのHTMLの『<li>から</li>』の範囲を削除しちゃって大丈夫です！ちょうど僕が青色でコメントを入れている間ですね。

HTMLコピペの場所

サイドバーに貼る（PC）

デザイン
カスタマイズ
サイドバー
モジュールを追加
HTML

記事下に貼る（PC）

デザイン
カスタマイズ
記事
記事下

記事下に貼る（スマホ）

デザイン
スマートフォン（スマホのマーク）
記事
記事下

CSS

もう後はCSSをコピペするだけ！終わったようなもんです。

/*********フォローボタン**********/
.follow-btn{
 width: 100%;
 margin: 5px 0px 5px 0px;
}
.follow-btn ul {
 list-style: none;
 display: -webkit-flex;
 display: flex;
 margin: 0;
 padding: 0;
}
.follow-btn li {
 height:100px;
 width: 100%;
 -webkit-transition: width 0.3s ease-out;
 transition: width 0.3s ease-out;
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center;
 align-items: center;
 -webkit-justify-content: center;
 justify-content: center;
}
.follow-btn li:hover {
 width: 200%;
}
.follow-btn li span{
 font-size:180%;
 font-weight: normal;
 font-style: normal;
 font-weight: normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
.btn1{
 background: #5F5E5E;/*読者ボタンの背景色*/
}
.btn2{
 background: #6FB6C3;/*Twitterの背景色*/
}
.btn3 {
 background: #82C36F;/*Feedlyの背景色*/
}
.btn4 {
 background: #6998b9;/*Facebookの背景色*/
}
.btn1-icon:before{
 content: "\f000";
 display: inline-block;
 font-family: blogicon;
}
.btn2-icon:before{
 content: "\f035";
 display: inline-block;
 font-family: blogicon;
}
.btn3-icon:before{
 content: "\f04e";
 display: inline-block;
 font-family: blogicon;
}
.btn4-icon:before{
 content: "\f036";
 display: inline-block;
 font-family: blogicon;
}
.follow-btn a {
 font-size: 80%;
 line-height: 1;
 font-weight: normal;
 text-decoration: none;
 text-align: center;
 color: #fff;
 -webkit-transition: all 0.3s ease-out;
 transition: all 0.3s ease-out;
}

はい！これをコピペして下さい！

PC

デザイン
カスタマイズ
カスタムCSS

スマホ（PROユーザー限定）

デザイン
スマートフォン
ヘッダー
タイトル下

もしこれが初めてのカスタムという人は、CSSを<style></style>で囲んで下さい！これをやらなきゃ、反映されないのでね。

<style>
ここにさっきのCSS全文をコピペ！
</style>

PCの方は囲まないで大丈夫です！

さらにカスタマイズしたい人

サイズをコンパクトに

まず僕のこの記事の下のボタンを見てください。横幅いっぱいで極太です。これをスマートにします。

/*********フォローボタン**********/
.follow-btn{
 width: 400px;/*横幅*/
 margin: 5px auto 5px auto;
}
.follow-btn ul {
 list-style: none;
 display: -webkit-flex;
 display: flex;
 margin: 0;
 padding: 0;
}
.follow-btn li {
 height:100px;
 width: 100%;
 -webkit-transition: width 0.3s ease-out;
 transition: width 0.3s ease-out;
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center;
 align-items: center;
 -webkit-justify-content: center;
 justify-content: center;
}
.follow-btn li:hover {
 width: 200%;
}
.follow-btn li span{
 font-size:180%;
 font-weight: normal;
 font-style: normal;
 font-weight: normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
.btn1{
 background: #5F5E5E;/*読者ボタンの背景色*/
}
.btn2{
 background: #6FB6C3;/*Twitterの背景色*/
}
.btn3 {
 background: #82C36F;/*Feedlyの背景色*/
}
.btn4 {
 background: #6998b9;/*Facebookの背景色*/
}
.btn1-icon:before{
 content: "\f000";
 display: inline-block;
 font-family: blogicon;
}
.btn2-icon:before{
 content: "\f035";
 display: inline-block;
 font-family: blogicon;
}
.btn3-icon:before{
 content: "\f04e";
 display: inline-block;
 font-family: blogicon;
}
.btn4-icon:before{
 content: "\f036";
 display: inline-block;
 font-family: blogicon;
}
.follow-btn a {
 font-size: 80%;
 line-height: 1;
 font-weight: normal;
 text-decoration: none;
 text-align: center;
 color: #fff;
 -webkit-transition: all 0.3s ease-out;
 transition: all 0.3s ease-out;
}