読者です 読者をやめる 読者になる 読者になる

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

はてなブログカスタム

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

最近ブログの読者になってくれる方が増えてきてとても感謝しています!
その読者になっていただくための、"読者になるボタン"が猛烈にダサくて、小さくて、押しづらいのでカスタムしていこうと思います!

はてなブログのカスタム記事のまとめはこちら

新しくボタンの記事を書きました!

まずは現状

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

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

なにこれ面倒臭い

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

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

リンク先URL

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

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

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;/*押した後の文字色*/ }

 で、完成系がこれです。

 

読者になる

 

 

ちょいとマウス乗せてみてください?(そして押すのも歓迎)

 

ブルーになるんかーーーい。

まとめ

もはや解説はいりませんね。説明が難しすぎます。すみません。
でもこのボタンをイイなと思ってくれる、この記事を見てくれたかたは、
ぜひ!好きな色に変えて使ってみてください!!(変えなくても良し)

カラーコードはこのサイトが便利ですぞ。

html-color-codes.info