【はてなブログ】目立つ「読者登録」ボタン設置・簡単コピペカスタマイズ方法

はてなブログと言えば「読者になる」ボタン。本日はコピペのみで簡単に読者になるボタンをカスタマイズしましょう。

初期状態ではちょっと物足りないって感じているあなたにおすすめ！！いろいろなパターンを作ってみたのであなたのサイトに合わせて選んでください。

「 読者になるボタン」を簡単にカスタマイズする手順

はてなブログの「読者になる」ボタンは初期設定のままではなんだか寂しい気がします。

いろいろカスタマイズした結果、この基本に落ち着く人もいますが、せっかくなら「読者になる」ボタンをもう少し目立つようにしたいと思います。

コピー&ペーストで簡単に設定できるようにまとめていますのでよかったら変更してください。

手順１:コードを貼る場所

最初に「読者になる」ボタンをどこに設置したいのか決めてください。設置したい場所に以下のコードをコピーして貼り付けます。

たとえば、記事下の記事が終わった直後に設置したいのであれば、デザイン→カスタマイズ→記事下（１番上）に以下のコードを貼り付けてください。

＊注意＊IDはあなたのブログIDを入力、ブログURLはhttp://を除いたブログのURLを入力してから貼付けるようにしましょう。

手順2:CSSの設定

デザイン→カスタマイズ→デザインCSSの設定にコードを貼り付けます。これから紹介する読者登録ボタンの中から好きなタイプを選んで、CSSに貼り付けてください。

パターン1:カーソルを合わせると枠が変化

カーソルを合わせると↓↓↓

コードは以下になります。

枠の色は黒に設定しています。好みで変更可能です。わからない方はコメント欄より質問ください。

パターン2:カーソル合わせると色が変化

最初は背景が白です。カーソルを合わせると↓↓↓

このように背景色が変わります。とりあえずは白→黒ですが好みで設定可能です。

CSSコードは以下になります。デザインCSSに貼り付けてください。

 

パターン3:オシャレに動きのある変化

これは僕のお気に入りデザインです。

カーソルを合わせると↓↓

上から背景が降ってくるように変化します。

説明が難しいですが、木になる方は百聞は一見に如かず！試してください笑

CSSコードはこちらです。

枠やフォントサイズも大きめに設定しています。理由は特にありません。ただの遊び心です。（すいません）

文字や枠の大きさ変更方法

font size 20pxの数字の値を変更すると文字の大きさを設定できます。

width（横幅）、height(高さ)の数字の値を自由に変更して好みの大きさに設定できます。

おわりに

今回は「読者になる」ボタンを３パターン紹介しました。あなたの好みやサイトに合わせて選んでください。

おお！ちょっと参考になったよ！！！なっていただけましたでしょうか？もしそうであれば少しでも多くの人に届きますようにシェアしていただけると助かります。

ありがとうございました。