【はてなブログ】読者ボタンを大きくカスタマイズする方法

どうも、ブログ運営者のポチ（@sunrise_033）です。

そんな疑問にお答えします。

この記事では、はてなブログの「読書ボタン」を大きくして目立たせるカスタマイズ方法を解説していきます。

読者ボタンは「はてなブログ」で運営している人にとって読者登録するための重要なものですよね。

目立たせることで読者にもアピールできるのでさっそく活用していきたいところです。

完成した読者ボタンは、

こんな感じになります。

サイドバーや記事内に貼り付ける手順も合わせて見てきたいと思います。

[jin_icon_checkcircle color=”#66cdaa” size=”18px”]この記事の信用性

【はてなブログ】読者ボタンとは？

はてなブログの読者登録とは、

という機能です。読者数が多いほど、はてなユーザーからのアクセスがみこめるようになります。

読者ボタンの設定方法

はてなブログでは、サイドバーにデフォルトの読者ボタンの設置方法がいくつかあり、

などがあります。そろぞれのサイトによってどこに貼っていくか検討しましょう。

サイドバーのプロフィールの下に表示させる

管理画面から「デザイン」→「カスタマイズ」→「サイドバー」からプロフィールの「編集」→「読者ボタンを表示する」にチェックをつけます。

こうすると、プロフィール画像に表示させることができます。

コンな感じに画像の下にボタンがでます。

記事内に表示させる

記事内に表示させる場合は、管理画面から「設定」→「詳細設定」→「読者ボタン」のコードをコピペします。

記事作成画面の「HTML編集」でテキストに貼りつけます。

このように記事内どこでも貼り付けることができます。

また、記事毎に貼り付けるのがめんどくさい場合は、

「デザイン」→「カスタマイズ」→「記事」にある「記事上下のカスタマイズ」のテキスト内に貼り付けておけば、

こんな感じで、記事内に自動で読者ボタンを表示することができます。

サイドバーに単体で表示させる

上記の方法でコピペした読者登録ボタンのコードは記事内以外もサイドバーなどに貼り付けることができます。

管理画面から「デザイン」→「カスタマイズ」→サイドバーから「モジュール追加」でHTMLを選択します。

テキスト内に読者ボタンのコードを貼り付けます。

こんな感じでプロフィール下以外の場所に表示できます。

【簡単3ステップ】読者ボタンを大きくする方法

せっかく、読者登録を表示したのに、デフォルトのボタンでは小さくて物足りないという人もいると思います。

なのでボタンを大きくする方法をご紹介します。参考にしたサイトはコチラです。

www.noname-note.com

完成するとこのようになります。

大きめで、目立つようになっています。

下に手順をまとめてみました。

それぞれ見ていきます。

 はてなIDを確認する

はじめに「はてなID」が必要になるので、確認しておきましょう。

「はてなID」はサイドバーのプロフィール画面で確認することができます。

これは次のHTMLコードを書き換える時につかいます。

HTMLコードを貼り付ける

HTMLコードを貼り付けます。貼り付ける場所はどこでもできますが例を挙げると、「記事内」や「サイドバー」に貼り付けることができます。

貼り付けるHTMLコード↓

<div class=“subscribe-button”><a href=“https://blog.hatena.ne.jp/sanrisesansan/www.sunrise033.com/
subscribe”>読者になる</a></div>

「sanrisesansan」部分にはてなIDを、「www.sunrise033.com」部分にサイトURLをそれぞれ書き換えます。

CSSコードを貼り付ける

「デザイン」→「カスタマイズ」→一番下にある「デザインCSS」にコードを貼り付けます。

参考にしたサイトに記述していますが、こちらにも載せていきます。

.subscribe-button {
margin: 1em 0;
}
.subscribe-button a {
display: inline-block;
margin: 0 auto;
width: 100%;
max-width: 300px;
line-height: 38px;
text-decoration: none;
text-align: center;
color: #fff;
background-color: #eb4c5e; /* ここでボタンの色 */
box-shadow: 0 4px #da253a; /* ここでボタンの影の部分の色 */
border-radius: 4px;
transition: all .3s;
}
.subscribe-button a:hover {
transform: translateY(4px);
box-shadow: 0 0 #999;
}

これを貼り付けたら、完成です。

読者ボタンは記事の中に必要なの？

これは賛否両論あると思いますので、個人的な視線から述べます。

結論は読者ボタンは記事内にあっても良いんじゃないかと思います。

理由としては、

で、記事内に読者ボタンがあると読者からしたら押しやすいし、見つけやすいです。

とくにスマホから閲覧する場合は、プロフィールなどのサイドバーまで下にスクロールしていく必要があるので、めんどくさいですよね。

まとめ

今回は、はてなブログで読者ボタンを大きくする方法とそれぞれの設置方法を解説していきました。

いろんなこところに読者ボタンをつけて、大きく目立たせれば、見つけやすくなるので、登録もされやすくなるかもしれませんね。

ぜひ、活用してみてください。

NEXT→記事に貼り付けた「YouTube動画」のサムネイル調節方法

最後まで読んでいただき、ありがとうございます。

 

↓「ブログ村ランキング」参加中！