読者です 読者をやめる 読者になる 読者になる

気ままに殴り書き

日々感じたことを、気ままに書き記す予定でしたが。。。

はてなブログ、「読者になる」ボタンを簡単に変更する方法

はてなブログ はてなブログ-カスタマイズ

f:id:kminebg1110:20160227110528j:plain

先日の以下の記事のとおり、私は「はてなブログ」スマホサイトのプロフィールの位置を最下段に変更しています。

これに伴い、「読者になる」ボタンを後付けで追加していますが、デフォルトでは異様に小さく思います。このため、私のバナーの選択が中途半端なためデザインはイマイチですが、「読者になる」ボタンを大きなバナーの載せています。

今回はこの「読者になる」バナー変更のレポートです。

 

▼デフォルト(下)と変更後(上)を比較できるよう、「読者になる」バナーを並べてみました(読者数が少ないのは無視してくださいね)。比べてみるとデフォルトボタンの小ささが際立ちます。

f:id:kminebg1110:20160227093020j:plain

 

スポンサーリンク

 

 

デフォルトの「読者になる」ボタンを設置する方法

知らなかったのは私のみ?かもしれませんが、はてなブログ・デフォルトの「読者になる」ボタンを好みの位置の設置する方法のおさらいです。

はてなブログの「ダッシュボード・設定・詳細設定」に、以下の「読者になるボタン」の項目がありますが、枠内のHTMLコードを記事下などのボタンを設置したい箇所に貼り付けて完了です。

f:id:kminebg1110:20160227094213j:plain

 

▼貼り付けて表示した結果が以下の下のもの。当然ですがデフォルトのままです。

f:id:kminebg1110:20160227093020j:plain

 

「読者になる」ボタン・バナーを変更する方法

上記のデフォルトボタンの追加もすぐできるものですが、ボタン・バナーの変更も、バナーさえ決まってしまえば短時間で変更できます。

バナーの作成・文字入れ

まずはバナー・素材の選択ですが、私は以下のサイト(フリー素材です)からダウンロードしました。

WEBデザイナーが作った超シンプル素材集 | WEB素材 ボタン 背景画像 矢印アイコン

 

素材が決まったら文字入れですが、以下の「バナー工房」の利用が手っ取り早く、かつフォント・フォント色なども複数から選択できます。

バナー選択・文字入れが完了したら、通常のブログへの写真・画像投稿と同様に、はてなブログのフォトライフにバナーをアップロードします。さらに、アップロードした画像のURLをコピーしておきましょう。

 

HTMLコードの編集・貼付

先ほど(以下)の「読者になるボタン」のHTMLの一部をコピーします。

f:id:kminebg1110:20160227094213j:plain

その一部とは以下の赤文字部分http~subscribeです。xxxの部分はご自身のURLになっていますが、このhttp~subscribeをコピーします。

 <iframe src="http://blog.hatena.ne.jp/xxx/subscribe/iframe" allowtransparency="true" frameborder="0" scrolling="no" width="150" height="28"></iframe>

 そして、以下のとおり上記赤色部分を上に、フォトライフにアップロードした画像・バナーのURLに紫の部分に貼り付けます。貼り付け後のHTMLコードを「読者になるボタン」を表示したい位置に貼り付けて完了です。

※読者数の表示はありません。

 <a href="上記でコピーした赤文字の部分を貼り付け">
<img src="フォトライフにアップロードした画像のURLを貼り付け">
</a>

ちなみに私の場合には、以下のコードになっています。このまま貼付けると、仮に読者ボタンを押した場合、私のブログの読者になってしまいますので留意くださいませ。

<a href="http://blog.hatena.ne.jp/kminebg1110/kenkendiary.hatenablog.com/subscribe">
<img src="http://f.st-hatena.com/images/fotolife/k/kminebg1110/20160220/20160220093616.gif?1455929354">
</a> 

 

まとめ

いかがでしょうか。読者数の表示までは至っていませんが、デフォルトの読者登録ボタンは個性がないので、このようにボタン・バナーを変更してみるのもよさそうです。私のバナーは緊急対応で作成のためデザインがイマイチですが、当記事冒頭のアイキャッチ画像がそのまま使用できそうです。