思考は現実化する

自分の潜在意識を書き換えるために、自分が学んだ事を整理しまとめています。

デザインテーマ「Brooklyn」で読者登録ボタンをカスタマイズする方法〈はてなブログ カスタマイズ忘備録(5)〉

 

f:id:b204638:20170507092903j:plain

 

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

 カスタマイズ環境 

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

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

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

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

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

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

shiromatakumi.hatenablog.com

 

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

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

(1)コードを修正する

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

私の場合、次のようなコードになります。

※このコードをそのままコピペすると、私の読者登録になってしまいます。 

<!-- レッドの読者登録ボタン -->
<div class="reader-button color">
<a href="http://blog.hatena.ne.jp/b204638/www.thoughts-make-things.com/subscribe">読者になる</a>
</div>

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

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

(2)コードを貼り付ける(記事下)

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

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

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

(3)コードを貼り付ける(サイドバー)

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

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

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

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

(4)動作確認

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

(5)はてなブログ公式 (デフォルト)の読者登録ボタンをオフにする

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

(1)ダッシュボードの「デザイン」>「カスタマイズ」>「サイドバー」>「プロフィール」の「編集」をクリック

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

 


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

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

f:id:b204638:20170507111145p:plain
f:id:b204638:20170507111150p:plain

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

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