【はてなブログ】読者登録ボタンの設置方法をくわしく解説！
はてなブログには読者登録するためのボタンを表示する機能があります。この読者登録ボタンの機能を活用すると、ブログの読者を簡単に増やすことができます。ここでは、はてなブログにある読者になるボタンの設定方法を紹介していきます。
目次
はてなブログの読者とは
ここ数日色んな方のはてなブログ読んでたらとっても元気が出てきたよ。すごいペースで読者になるボタンを押しまくってる。オタクのブログも最高だし、OLさんのブログも楽しい。
— りみ (@agmzw1127) September 14, 2019
はてなブログには気に入ったブログの読者になり、そのブログに新しい記事が投稿されたら通知してもらったり、気になるブログにアクセスしやすくなったりする機能があります。
ブログの画面内に表示されている「読者になる」ボタンをタップするだけで、簡単に読者になれるのですが、読者になるボタンを設置する場合はその詳細設定手順を知っておく必要があります。
はてなブログ読者登録の仕組み
はてなブログの読者登録の仕組みは、TwitterやInstagramなどのSNSのフォローと同じです。気に入ったブログの読者になることで記事の更新をもれなくチェックできます。
メリット
はてなブログの読者登録ボタンを活用すると、さまざまなメリットがあります。ここでは、はてなブログの読者登録ボタンを活用するとどのようなメリットがあるのか紹介していきます。
読者登録するメリット
はてなブログで読者登録するメリットは、気になるブログの新しい記事を欠かさず読めることです。ブログをやっていて記事を描くのが上手な人は、「この話の続きは次回の更新で」など結末まで書かないことがあります。
そういった場合、楽しみにしていても忙しくしていると忘れてしまうものですが、読者登録していると忘れずにチェックできるのです。また更新したか確認するために何度もブログにアクセスしなくていいというメリットもあります。
読者登録されるメリット
はてなブログの読者になあるボタンのメリットは、読者を増やしやすくなることです。はてなブログは人気ブログサービスなので、その中から読者を多く勝ち取るのは至難の業ですが、読者登録を使うとそれが達成しやすいのです。
【はてなブログ】読者登録ボタンの初期設定方法
はてなブログの読者になるボタンを初期設定する手順はPC版とスマホ版で違います。ここからはPC版はてなブログと、スマホ版はてなブログで読者になるボタンの初期設定方法を紹介していきます。
初期設定手順～PC～
PC版はてなブログの場合は何も設定をしない状態でも、プロフィールの項目に読者になるボタンが表示されています。さらに増やしたい場合は追加設定をする必要がありますが、ひとつでいい場合は初期設定のままにしましょう。
初期設定手順～スマホ～
スマホ版はてなブログの場合も、読者になるボタンの初期設定をしなくても画面上にあるヘッダに表示されます。
もし読者になるボタンの設定を変更したいなら、あなたのブログの画面を開いて一番下までスクロールし、「ダッシュボート」アイコンをタップしましょう。
【初心者向け】「はてなブログ」の目次デザインのカスタマイズ方法！【はてなブログ】読者になるボタンを増やすメリット
はてなブログの読者になるボタンは初期設定をしなくても、すでに設置されています。しかし増やすこともできるのです。初期設定の段階よりも、多く読者になるボタンを設置するとメリットがあります。
メリット
はてなブログの読者になるボタンを多く設置するメリットは、どのようなものなのでしょうか？ここからは、はてなブログの読者登録ボタンを追加設置するメリットを紹介します。
はてなブログ読者に分かりやすい
読者登録ボタンを多く設置するメリットは、ブログのどこに追加ボタンがあるのかが分かりやすくなります。あなたのブログを読んで面白いと思った人が読者登録ボタンを見つけやすくなり、タップしやすくなります。
はてなブログ読者の数を増やす
はてなブログにちょこっと読者つき始めちゃったんだけどすごーいプレッシャー🤗笑
— よう🍓16thAnniversary♡ (@compass_news51) September 23, 2019
読者登録ボタンを多く設置するメリットは見つけやすくタップしやすくなるため、あなたのはてなブログの読者数を増やすことができることです。
はてなブログ読者になるボタンを増やす実例
はてなブログの読者になるボタンは、設置できる場所が決まっています。どこにでも好きに設置できるわけではないので、事前に追加設置できるところを知っておきましょう。
記事の上下
はてなブログの読者になるボタンは、各記事の上下に設置することができます。記事のタイトルに聞かれて読者登録したり、記事を読み終わってすぐに読者登録したりできるのです。
タイトルの下
記事のタイトル下にも読者登録ボタンを設置できます。記事の内容を表すタイトルを見ただけで「役に立ちそう」とか「面白そう」と思って、読者になる人は多いのです。
ヘッダ/フッタ
はてなブログの画面上部であるヘッダと、下部であるフッダにも読者になるボタンを設置できます。画面をスクロールしても、常に読者になるボタンが表示されるになるので、タップしてもらいやすいです。
【はてなブログ】で読者数を増やす方法をくわしく解説！【はてなブログ】読者になるボタンの設置方法
はてなブログの読者になるボタンは設置方法が簡単です。ここからは、はてなブログの読者になるボタンを設置する方法を説明していきます。
読者になるボタンを増やす方法
まずはてなブログにログインして、あなたのログイントップ画面を表示します。画面右上にあるアカウントアイコンをクリックしましょう。
ダッシュボード→設定→詳細設定に進む
アカウントに関するメニューが表示されるので「ダッシュボード」を選択します。ダッシュボードから読者になるボタンを追加していきます。
はてなブログのダッシュボード画面になったら、画面左端のメニュー一覧から「設定」の項目を選びましょう。
ダッシュボードの設定画面に切り替わるのを待って、「詳細設定」タブをクリックしてください。
読者になるボタンのソースコードを入手
ダッシュボード画面から詳細設定を開きます。詳細設定画面を一番下までスクロールしたら、「読者になるボタン」項目のソースコードをコピーしましょう。
所定の箇所に貼り付ける
ソースコードがコピーできたら、ダッシュボードのメニュー一覧から「デザイン」をクリックします。
ダッシュボードのデザイン画面が表示されたら「ヘッダ」か「記事」そして「フッダ」の中から読者になるボタンを設置したい場所を選びます。開いた項目からソースコードを入力する項目を選び、先ほどコピーしたソースコードを貼り付けます。
あとは詳細設定の変更を保存するアイコンをクリックしたら、読者になるボタンを設置できたか確認しましょう。ソースコードが分からなくても、自分の詳細画面からいつでもコピーできます。
はてなブログ読者になるページへ飛ぶリンクを貼る方法
はてなブログ読者になるページへ飛ぶリンクを貼る方法は、下記のソースコードを読者になるボタンのソースコードと同じ手順で張り付けるだけです。
<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content > h3');
$target.eq(0).before($('.insentence-adsense'));
}, false);
// ]]></script>
<div class="insentence-adsense">
読者になるボタンを設置をソースコードをペーストする
</p>
</div>
【はてなブログ】読者になるボタンをカスタマイズする方法
詳細設定から読者になるボタンをカスタマイズすることもできます。カスタマイズするためには、特殊なソースコードを先ほどと同じ手順で貼り付けるだけです。
はてなブログ読者になるボタンをカスタマイズするメリット
はてなブログの読者になるボタンをカスタマイズするメリットは個性を出せることと、ブログの雰囲気にあったデザインのボタンを表示できることです。また実用的なメリットもあります。
読者の目を引く
他のはてなブログと違う読者になるボタンを表示することで、読者の目を引くことができます。目立つのでついついタップしてしまう人も増えます。
読者の数を増やす
おもしろいデザインの読者になるボタンを設置したり、かわいいデザインの読者になるボタンを設置したりすると、それだけで読者を増やす効果が期待できます。
デザイン例
カスタマイズされた読者になるボタンにはピンクや水色などカラフルなものが多く、「読者になる」という書体も変わっているものもあります。またボタンではなく画像を表示している人もいます。
ソースコード例
読者になるボタンのカスタマイズは、一般的な読者になるボタンを追加する手順と同じです。しかし入力するソースコードが違うので気を付けましょう。カスタマイズする場合のソースコードは以下のようなものです。
<!-- 読者登録ボタンデザインCSSコード-->
<style>
/* reader button */
.reader-button {
width: 300px;
height: 46px;
margin-top: 0;
margin-bottom: 20px;
}
.reader-button-inner a {
position: relative;
display: table-cell;
width: 300px;
height: 46px;
border-radius: 4px;
background-color: #ca5b5c;
font-size: 20px;
font-weight: bold;
color: #fff;
text-align: center;
vertical-align: middle;
box-shadow: 0 2px 4px rgba(0,0,0,.4);
text-decoration: none;
transition: all .6s;
}
.reader-button-inner a:hover {
top: 3px;
box-shadow: none;
transition: all .6s;
}
</style>
<!-- 読者登録ボタンデザインCSSコード ここまで-->
このようなソースコードはSNSで公開したり、ブログで公開したりしている人がいるので検索してみましょう。
【初心者向け】はてなブログのおしゃれな設定方法を解説！最後に
いかがでしたか？はてなブログで読者になるボタンを設置する手順はとても簡単です。好きなデザインのソースコードを入手して、あなたのブログに個性を出しましょう！
