コピペ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でも質問してくださいねー!

おしまい。

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

18 件のコメント

  • すいませーん!早速修正しました!とても大事なことなのにうっかりしておりました!
    ありがとうございます!

  • すごく可愛いですね!わたしも使わせていただきました。
    すみません、質問なのですが。PCの方は問題なく出来たのですけどスマホがうまく出来なくて横に並ばずに縦になってしまうんです。さらに反応しません。何度やっても出来ずに途方に暮れています・・・。
    何か考えられることありますか?

  • はなこさん、はじめまして!
    動作を確認したいので、一度コピペした状態にしてくれると助かります。
    以前はなこさんが使っているテーマでもテストして問題はなかったので、実物を見てみないと分からないのです…。
    すみません。

  • こんにちは。コメントありがとうございます。
    スマホの記事下にコピペした状態にしました。じょーじさんのブログを自分のスマホから見てみたら、シェアボタンが同じく縦表示で反応しませんでした・・・。ということは私のスマホがおかしいだけなような気がします(>_<)

  • 古いandroidスマホだとCSSが崩れてしまうことがあります。それが原因なのかな…。
    お役に立てず申し訳ないです。

  • ご無沙汰しております。
    ジョージさんにお願いがあるのですが、ジョージさんのブログのグローバルメニューを拝見しております。
    そこでジョージさんのブログのグローバルメニューについて、上から下に色がつくアニメーション表示やトグル型メニューに関する記事を公開してもらえませんか?
    ぜひ使いたいと思いますのでお願いいたします。

  • milksizegeneさん、最近忙しくて中々記事を更新できないので、少し待って下さいー!
    メニューの記事も書きますね!

  • 使わせていただきました。
    すばらしいプログラムを公開してくださり、ありがとうございます。

  • 非常に古い記事にコメント失礼いたします。
    この記事を参考にして、フォローボタンを作成できたのですが、フォローボタンの中の色が白でなく、モスグリーンのような色になってしまいます。
    colorの所を変更しても直りません。
    何か対処法はないでしょうか。
    よろしくお願いいたします。

  • ppp2500 へ返信する コメントをキャンセル

    メールアドレスが公開されることはありません。