はてはカスタマイズ

【はてなブログ】読者ボタンのカスタマイズ方法、大きく目立たせよう

はてなブログの「読者ボタン」を大きく目立たせたいなぁ、記事内に表示させることができるのだろうか?

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

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

完成した読者ボタンは、

f:id:sanrisesansan:20200814212519j:plain

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

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

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

登録することで更新記事をチェックできる

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

読者ボタンの設定方法

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

・サイドバーのプロフィールの下に表示させる
・記事内に表示させる
・サイドバーに単体で表示させる

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

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

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

f:id:sanrisesansan:20200814212606j:plain

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

f:id:sanrisesansan:20200814212703j:plain

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

記事内に表示させる

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

f:id:sanrisesansan:20200814212848j:plain

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

f:id:sanrisesansan:20200814213144j:plain

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

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

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

f:id:sanrisesansan:20200814212939j:plain

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

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

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

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

f:id:sanrisesansan:20200814213216j:plain

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

f:id:sanrisesansan:20200814213348j:plain

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

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

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

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

www.noname-note.com

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

f:id:sanrisesansan:20200814212519j:plain

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

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

手順
・はてなIDを確認する
・HTMLコードを貼り付ける
・CSSコードを貼り付ける

それぞれ見ていきます。

 はてなIDを確認する

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

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

f:id:sanrisesansan:20200814213440j:plain

これは次の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」にコードを貼り付けます。

f:id:sanrisesansan:20200814213729j:plain

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

.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;
}

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

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

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

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

理由としては、

・読者が押しやすい
・ボタンが見つけやすい

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

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

ポチ
ポチ
読者ボタンが記事の初めや終わりにあれば読者ファーストになれます。

まとめ

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

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

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

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

 

「はてなブログカスタマイズまとめ」記事はこちら

 

ポチ
ポチ
この記事が良いと思ったら、ポチっ!してくれると嬉しいです!

↓「ブログ村ランキング」参加中!
PVアクセスランキング にほんブログ村

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です