はてなブログの"読者になる"のカスタム【ブログカスタムVol.7】

最近ブログの読者になってくれる方が増えてきてとても感謝しています！

その読者になっていただくための、”読者になるボタン”が猛烈にダサくて、小さくて、押しづらいのでカスタムしていこうと思います！

この記事は大変古い記事になっています。下記記事をご覧ください。

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

2016年3月3日

まずは現状
なにこれ面倒臭い
リンク先URL
CSSで装飾を
で、完成系がこれです。
まとめ

まずは現状

これです。
すごい小さいし、猛烈にダサいし押しづらいですよね（2回目）。
このボタンを大きく、カッコよく、押しやすくしていきまーす。

なにこれ面倒臭い

コードを見てみると中々面倒なことになっているではないか。
そっか、読者数を表示するために＜iframe＞を使っているのか。こいつはやっかいだぜ。

ならばもう読者数は諦めよう（一分で決断）。
リンクだけコピーしてボタン自体を自作しちゃいます！

リンク先URL

各自、はてなブログの【設定】の下の方にある【読者になるボタン】のコーナーに行きましょう！
そこにゴニョゴニョ長い英語が書いてありますよね？

http://blog.hatena.ne.jp/はてなID/トップページURL/subscribe

これを使います！自分の設定からコピーすると早いですよ。

HTMLを書く

<a class="hate_btn" href="さっきのURL">読者になる</a>

これでHTMLは良し。
「読者になる」は好きな言葉に変えてオッケーですよ！

CSSで装飾を

さて、自らハードルを上げた大きく、カッコよく、押しやすいボタンにしていきましょう。（どうしよう、ダサいって言われたら）

ボタン作りで重要なのは直感で読者が何のボタンか分かることが重要です。

Facebookなら ブルー
Twitterならブルー（同じじゃねえか）
ミクシィならオレンジ

って具合にみんなすぐに分かりますよね？

じゃあ“はてな”の色は？

ブルーかよ。。。

なし、この説明なし。好きな色にします（みんな青好きすぎだろ）。

超長いです。

/***読者ボタン****/
.hatena_btn {
font-size: 110%;
    display: block;
width: 200px;
height: 54px;
text-align: center;
text-decoration: none;
    outline: none;
background-color: #555;
border: 2px solid #555;
color: #fff ;
line-height: 50px;
margin-bottom: 40px;
margin-left: auto;
margin-right:auto;
}
.hate_btn:hover {
background-color: #fff;/*押した後の背景色*/
border-color: #7694DA;/*押した後の枠線の色*/
color: #7694DA;/*押した後の文字色*/
}