はてなブログの「読者になる」ボタンは、ポップアップ式(ダイアログ表示)とテローン式の2つの方法があった

f:id:marubaff:20170828012046j:plain

読者になる@双子育児おやじのまるばです。

読者になるボタン

 はてなブログの読者になるボタン。

 

 

 ブログによって、「ポップアップ」する場合と「テローン」となる場合があるのでどうなっているのか調べました。

テローン式

 これは読者になるボタンを押すと、その下にテローンと以下のように表示される方法です。

f:id:marubaff:20170828012214j:plain

 

 僕も最初はこの方式でした。

メリット

 読者になった後、ツイッターやFacebookでシェアできる。

f:id:marubaff:20170828012229j:plain

デメリット

クリックが3回必要

1.読者になるボタンをクリック

2.読者になるにチェック

3.OKをクリック

テローン式の設定方法

管理画面→デザイン→スパナマーク→サイドバー→プロフィール

f:id:marubaff:20170828012341j:plain

 

読者になるボタンを表示するにチェックマーク

f:id:marubaff:20170828012411j:plain

ポップアップ式(ダイアログ表示)

 もう一つがポップアップ式。

f:id:marubaff:20170828012439j:plain

 

 僕はこれに変更しました。

メリット

 クリック2回でOK

デメリット

  読者になった後、ツイッターなどで紹介できない。

ポップアップ方式の設定方法 

 管理画面→設定→詳細設定

f:id:marubaff:20170828012457j:plain

 

 下にスクロールして、読者になるボタンのHTMLコードをコピー。

f:id:marubaff:20170828012521j:plain

 プロフィール欄に掲載する場合は、管理画面→デザイン→スパナマーク→サイドバー→プロフィール欄にペースト。読者になるボタンのチェックを外す。(2個表示されてしまうため。)

f:id:marubaff:20170828012702j:plain

 ちなみに、ポップアップ式については以下のようにブログ本文にもコピー&ペースト可能です。

 

読者になるボタンをカスタマイズ

 以下の方の説明が分かりやすかった。

  この方の記事を参考に作ったのが以下のボタン。

 

読者をやめるボタン

 はてなブログの場合、読者が読者になるボタンを押すと読者をやめることができる。(ややこしい)

 

 複雑なので、いさぎよく読者をやめるボタンも作ってみた。コードは読者になると同じ。ただし色は「押したくなさそうな」色にした。サイズも、読者になるボタンより一回り小さくした。

 

 

 ちなみに、読者じゃない人が読者をやめるボタンを押すと読者になると言う哲学のような問題が生じる。

 

読者をやめるコード

 以下のコードを表示したいところにコピペ。なおこのコードをそのままコピペすると僕のブログの読者をやめるボタンになるので注意。

 

 

marubaffを自分のはてなIDに変更する

www.futagopapa.comを自分のブログのURLに変更する

 

 デザインCSSに以下のコードをコピペ。

 

 

background-color: #664200;の部分で色を変更。なるべく押したくないウンコ系の色に。

width: 200px;の部分が2箇所ありサイズを変更できる。

 

 なお読者をやめるボタンのアイディアは、クラタイクツさんのブログからパクった。 

 

読者をやめるボタンはスカッとする