デザインテーマ「Brooklyn」で読者登録ボタンをカスタマイズする方法【はてなブログカスタマイズ忘備録（５）】

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

カスタマイズ環境

使用テーマ	Brooklyn
はてなブログ	はてなブログPro

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

今回は「Brooklyn」の作者様の読者登録ボタンを導入します。（他の環境でできるかどうかは試していないのでわかりませんが、たぶんボタンデザインがブログテーマをコードを参照しているので難しいような気がします。）

今回は、作者シロマティさんの以下のサイトを参考に「レッドの読者登録ボタン」を導入させていただきました。

白と黒を基調としたモノトーンのデザインに赤色のボタンはとてもよく目立ちます。さらにマウスオーバーすると色が変わるので、とても目を引く気がします。

ここからは、私が行った導入手順を順番に整理してみます。

今回は「記事下」と「サイドバー」の２か所に「レッドの読者登録ボタン」を設置してみました。

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

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

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

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

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

ダッシュボードの「デザイン」＞「カスタマイズ」＞「記事」＞「記事下」

これで読者登録ボタンが「記事下」に表示されるようになりました。

「読者登録ボタン」サイドバーにも表示するために、以下にコードを貼り付けました。

ダッシュボードの「デザイン」＞「カスタマイズ」＞「サイドバー」＞「＋モジュールを追加」＞「HTML」

ここに先程のコードを貼り付け「適用」ボタンをクリックします。

これで「サイドバー」に読者登録ボタンが表示されるようになりました。

設置した読者登録ボタンがちゃんと機能するか動作確認します。

新しい読者登録ボタンが機能するのを確認できたら、デフォルトの読者登録ボタンの表示をオフにします。（両方表示することもできますが、ページの表示速度が遅くなる原因になるようです。）

（１）ダッシュボードの「デザイン」＞「カスタマイズ」＞「サイドバー」＞「プロフィール」の「編集」をクリック

（２）「読者になるボタン」の「表示する」のチェックを外し「適用」ボタンをクリック

以上で、「Brooklyn」での読者登録ボタンのカスタマイズは完了です。

モノトーンデザインに映える赤色の読者登録ボタンを設置することができました。マウスオーバーすると色が変わって目を引きます！

しかし「Brooklyn」をレスポンシブで使用していない状態で、デフォルトの読者登録ボタンの表示をオフすると、スマホサイトで読者登録ボタンが表示されなくなってしまいます。

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