スマホ画面の読者登録ボタンをカスタマイズする方法【はてなブログ カスタマイズ忘備録（６）】

今回は、はてなブログでスマホ画面の読者登録ボタンをカスタマイズする方法についてまとめてみます。

 カスタマイズ環境

上記は、私のカスタマイズ環境です。

今回のカスタマイズは「Brooklyn」をレスポンシブで使用しない際に「Brooklyn」の「読者登録ボタン」をスマホに反映する方法がわからなかったので、別のものをスマホに導入してみました。

そのため「Brooklyn」以外の環境でも導入できると思います。（でも、他の環境では未確認です。）

スマホ画面の読者登録ボタンをカスタマイズする

今回は、「Brooklyn」の作者シロマティさんの「はてなブログの読者登録ボタンの設置やカスタマイズ 」を参考に「読者登録ボタン」を導入させていただきました。

「Brooklyn」のボタンと同じように大きなボタンで、マウスオーバーしたりタップするとボタンを押したように凹むんです！

この「読者登録ボタン」はスマホ版という訳ではないのでPCでも使用することができますが、PCは「Brooklyn」のボタンデザインが気に入っているので、今回はスマホ画面の「読者登録ボタン」として使用することにしました。

ここからは、私が行った導入手順を順番に整理してみます。今回は「記事下」「フッタ」の２か所に「読者登録ボタン」を設置します。

（１）「読者登録ボタン」のコードを修正する

はじめに読者登録ボタンのコードを自分の読者登録ボタンのURLに修正します。

<!-- 読者登録ボタン -->
<div class="reader-button">
<div class="reader-button-inner">
<a href="http://blog.hatena.ne.jp/はてなID/ブログURL/subscribe">読者になる</a>
</div>
</div>
<!-- 読者登録ボタン ここまで-->

赤字の部分が修正箇所です。自分の「はてなID」と「URL」を記載します。ここを間違えてしまうと上手く機能しません。

あと「読者になる」のテキストは変更することもできます。自分らしい内容に変更すると読者登録率が上がったりするかも！？

（２）「読者登録ボタン」のコードを貼り付ける

修正した「レッドの読者登録ボタン」を以下に貼り付けます。

ダッシュボードの「デザイン」＞「スマートフォン」＞「記事」＞「記事下」

ダッシュボードの「デザイン」＞「スマートフォン」＞「フッタ」

 （３）「読者登録ボタンデザインCSSコード」を貼り付ける

次は「読者登録ボタン」のデザインを決めるCSSコードを記事下に貼り付けます。

〈貼り付けるコード〉

<!-- 読者登録ボタンデザイン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シェアボタンの下に設置してみました。

作者様の「はてなブログの読者登録ボタンの設置やカスタマイズ 」のページでは、ボタンの色を変更する方法も紹介されています。詳しくは作者様のページをご確認いただければと思います。