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

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

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

まずは完成形

マウスを乗せるか、タップしてみてくださーい！どう？横にビヨーンで伸びたり縮んだり！かわいいですね。キュートですね。

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

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

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）

1. デザイン
2. カスタマイズ
3. サイドバー
4. モジュールを追加
5. HTML

記事下に貼る（PC）

1. デザイン
2. カスタマイズ
3. 記事
4. 記事下

記事下に貼る（スマホ）

1. デザイン
2. スマートフォン（スマホのマーク）
3. 記事
4. 記事下

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{
 line-height:2.5;
 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";/*Twitterアイコン*/
 display: inline-block;
 font-family: blogicon;
}
.btn3-icon:before{
 content: "\f04e";/*Feedlyアイコン*/
 display: inline-block;
 font-family: blogicon;
}
.btn4-icon:before{
 content: "\f036";/*Facebookアイコン*/
 display: inline-block;
 font-family: blogicon;
}
.follow-btn a {
 width:100%;
 height:100%;
 font-size: 13px;
 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

1. デザイン
2. カスタマイズ
3. カスタムCSS

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

1. デザイン
2. スマートフォン
3. ヘッダー
4. タイトル下

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

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

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

上手くアイコンが反映されない方

各ボタンのアイコンの箇所が数字の羅列になってしまうことがあるようです。正確な理由は分かりませんが、一応対処法です。

おそらく『\（バックスラッシュ）』が上手くコピーできていないのが原因だと思います。僕も何度も自分のコードのコピペを繰り返してみたら、この現象がたまに発生しました。何でかは分からないんだけど…。

とにかく『\』を使用している個所は緑色でコメントをしました。

このバグが出ている方は、自分のカスタムCSSに手打ちで『\』を追加してみてください。

windowsのキーボードでは、ひらがなの『ろ』の部分、Macでは『option+￥』で入力できます。これで解決できると思いますが、それでも上手く表示ができない方はご連絡ください。

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

サイズをコンパクトに

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

/*********フォローボタン**********/
.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{
 line-height:2.5;
 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 {
 width:100%;
 height:100%;
 font-size: 13px;
 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;
}

こんな感じになります（スマホからこの記事を見ていると余り違いがないかも）。

これもいいねー。自分の使うボタンの数でCSSの一番上の横幅の設定をいじってみてください。ボタン1つあたり100pxくらいが丁度いいんじゃないかな。3つしかボタンを使わない方は300pxてな感じで。

さらにチョット下にある縦の幅で縦もお好きに調整してみてください！でも余り縦幅を小さくすると文字が入らなくなるので注意！

色の変更

CSSの途中で色が変更できるところにコメントを付けていますので、ご自分で好きな色に変更してください！

HTMLカラーコード

ちょっと解説（飛ばしてよし）

基本的には凄く簡単な仕組みです。マウスホバー時のwidthを可変させているだけ。でもtransitionを使ってビヨーンとなっている風に見せているんです。各ボタンにはwidthをかけないで親要素でボックス幅を決めているので、ホバーされたボタン以外は小さくなるってところがミソですな。

まとめ

どうでしょう、シンプルだけど他にあまりないデザインで、素敵な感じのボタンを目指したのですが。まいっか、僕は気に入りました！

もし動作が安定していなかったり、分からないことがあればコメントでもTwitterでも質問してくださいねー！

おしまい。

▼もしも勉強するならこの本がマジでおすすめ。学校で使ってました。

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

created by Rinker

¥2,640 (2025/11/04 05:45:29時点 Amazon調べ-詳細)

• Kindle
• Amazon
• 楽天市場
• Yahooショッピング