私はなんとなく、はてなブログデフォルトのスマホ表示のレイアウトが好きで、PC版と同じデザインは適用せずに、スマホからの表示はそのままデフォルトのスマホ表示で運用しています。
で、そのスマホ表示なんですが、そういえば読者登録ボタンがページ内に表示されていないんですよね(^_^;)
じゃあ自分で付けるかということで、現在80記事超あり（まだこれくらいでよかった^^;）けっこう手間はかかりましたが、1つ1つの記事末尾に手動で読者登録ボタンを設置しました^^;
一応、私と同じように無料版のはてなでスマホ表示を使っている人でも、この方法で（手間はかかりますよ^^;）記事下に読者登録ボタンを設置することができるので、今回はその手順を紹介します。
さいしょに
いま、このブログのスマホ表示の記事下はこんな感じになっています。
ボタンを設置したといっても、単に毎回記事を書く時に記事の末尾に読者登録ボタンとツイッターのフォローボタンのコードをベタ貼りしてるだけなんですが…とりあえず、こうすることでスマホ表示でも読者登録ボタンが押しやすくなるかな〜と思って、設置してみることにしました。
ちなみに、スマホ表示だとページ上にも、元から「読者になる」ボタンが表示されてはいるんですが…
このボタンからの登録だと読者登録のページに遷移してしまうので、ユーザビリティを損ねるのではないかという考えもあり、別途記事下に読者登録ボタンを設置することにしました。
ただ、今回紹介する読者登録ボタンのコード自体はどのようなレイアウトで表示していても有効ですが、1つ1つの記事に更新をかけるという、今回紹介するこの方法はスマホ表示をPC表示と同じデザインで使っている人や、PROにしてスマホ表示もカスタマイズできる人はわざわざする必要ありません（設定→デザイン→記事下のHTMLを弄れば1つ1つの記事に編集をかける必要がなく、一括で記事下に表示させることができるため）
あくまでも、私と同じように無料版のはてなを使っていてPCからはPC表示、スマホからはスマホ表示と使い分けていて、スマホ表示でも読者登録ボタンを設置したいという場合に使える運用案になります(^_^;)
設置方法
まず最初に読者登録ボタンを表示するために以下のようなコードを取得する必要があります。
<iframe src="https://blog.hatena.ne.jp/d3dayo/d3dayo.hateblo.jp/subscribe/iframe" allowtransparency="true" frameborder="0" scrolling="no" width="150" height="28"></iframe>
↑のコードはサンプルでこのブログの読者登録ボタンを表示しているので、そのままコピペで使うことはできません（使ってもらってもいいですが、多分このブログの読者が増えちゃうと思います(´ε｀ )）
ご自身のブログ用の読者登録ボタンのコードは以下の場所から簡単に取得することができます。
はてなブログのダッシュボード→設定→詳細設定
「読者になるボタン」の欄にコードが記述されているので、このコードをコピーして保管しておきます。
あとは記事を書く時にエディターの中で表示したい箇所にコードを貼り付ければボタンが表示されるようになります。（記事下以外でも記事の中から好きなところに表示することができます）
設置手順は以上です。
私は毎回記事を書くたびに、記事の末尾へ自己紹介記事へのリンクとこういったボタンのコードを手動で挿入しています。
ちなみに、その際は入力の工数を端折るために以下の記事で紹介しているクリップボードアプリを活用しています。
今回の手順は単独の作業そのものはとても簡単なのですが、けっこう記事を書きためてから、後々になってこの運用へと切り替えようとすると、1つ1つの記事へ更新をかけなければいけないので、非常に手間がかかります(^_^;)
しかし冒頭でもふれた通り、PC版の表示やPROにしてスマホ版の表示を使っている場合には、記事下のHTMLをカスタマイズすることができるので、そこに今回のコードを記述すれば各記事への編集の手間はかけずに、一括でボタンが記事下に表示されるようになります。
おまけ
読者登録ボタンと一緒にツイッターのフォローボタンも記事末尾に現在表示していますが、せっかくなのでツイッターフォローボタンの設置方法も紹介します。
基本的に設置する手順自体は同じですが、コードの取得方法が違うのでその部分を紹介します。
フォローボタンのコード取得は以下のリンクから可能です。
ページにアクセスしたら、ボタンの種類から「フォローする」ボタンを選択して、ユーザー名の部分にご自身の「ツイッターユーザー名」を入力します。
そうすると右側の欄に自分のアカウント用のフォローボタンのコードが表示されるので、このコードをコピーして保管します。
あとは読者登録ボタンと同様に、記事のエディターの中でコードを貼り付ければ、貼り付けた箇所にボタンが表示されるようになります。
おわりに
広告を貼らないからPROにもしないと思っていましたが、こういったカスタマイズの手間を考えるとPROでやれることの幅には、たまに魅力を感じてしまいます(^_^;)
でも、いまさらPROにしたらしたで、このような手間をかけて苦し紛れに設置したものを1つ1つ撤去する作業が生じたりもするので…非常に悩ましいところです（笑）
それにしても、せっかく記事下に手間ひまかけてボタンを設置したので、ほんの少しでも押してもらえたら嬉しいですね！（これで効果がなかったらちょっと悲しい(・・;)）
でででーさん
d3dayo.hateblo.jp