雪ん子’s report

スマホの使い方(初級編)と日々のことをお伝えします。

雪ん子’s report

スマホだけでブログに挑戦!

【お願い】読者登録ボタンを付けよう




こんばんは。雪ん子です。

あなたは、はてなブログを読むのはPCで?スマートフォンで?
 
スマートフォン派の方は、読者になりたい時に困る場合がありませんか?
 
今回は「読者になる」ボタンがない時の対処法と、ボタンの設置方法について書いてみたいと思います。


f:id:snow0303:20171023201121j:plain
  

初期状態なら「読者になる」ボタンはここにある

 
スマホ版は、デザインを何もいじらなければ「読者になる」ボタンが2つ用意されています。
※自分のサイトの現状を確認する場合は、ログアウトしてから見にいくとわかりやすいです。
 
ヘッダーと記事の下の方

f:id:snow0303:20171022161536j:plain
f:id:snow0303:20171022161545j:plain
 
でも、デザインをいじっている方がほとんどですよね。
 
レスポンシブデザインを使っている方はPC版のサイドバーのプロフィール欄が表示されて、そこにボタンが設置されていることがほとんどなのでほぼ大丈夫です。
 
ただ、スマホ版をカスタマイズしている場合、上で紹介した場所にボタンが表示されている方はほとんどいません。
 
なので、頑張って自作のボタンを探してみるのですが、残念ながら設置されていない場合も。
 
困りますねー(>_<)
 

それでも読者になりたい

 

PC版に切り替える

 
まずは、スマホ版からPC版に切り替える。
Chromeなら右上の三点リーダをタップして、「PC版サイトをみる」にチェックを入れる。

f:id:snow0303:20171022213800j:plainf:id:snow0303:20171022213817j:plain
 
PC版に切り替わったら、画面上の左側
f:id:snow0303:20171022215641j:plain
 
もしくはプロフィールを見に行く
f:id:snow0303:20171022214251j:plain
f:id:snow0303:20171022214257j:plain
 
大体どちらかでなんとかなるはず。
 
しかし、それでもボタンが無い場合も。
 

「読者になる」ボタンの繋がる先

 
自分のサイトで試してみます。
 
「読者になる」を押してみると……

f:id:snow0303:20171022161545j:plainf:id:snow0303:20171022220802j:plain
 
URLはこれでした。
http://blog.hatena.ne.jp/snow0303/www.snow0303.com/subscribe
 
他の方の「読者になる」ページも拝見させていただきましたが、同じ構造でした。
 
http://blog.hatena.ne.jp/snow0303/www.snow0303.com/subscribe」
 
赤文字には、はてなのID
青文字には、ブログのドメイン※が入っています。
 
これを手打ちすれば良いってことですね。
 
※ブログのドメイン
 
現在のこのページのURLで説明すると、
 
http://www.snow0303.com/entry/2017/10/23/【お願い】読者登録ボタンを付けよう
 
の「http://」と最初の「/」の間の部分。
 
よって、
 
www.snow0303.com
 
となるのですが、該当ブログの記事ページではなくトップページ(ホームページ、メインページ)に行った方が分かりやすいです。
 
トップページのURLから「http://」を省いた部分がドメインです。
 
http://snow156.hatenablog.com
→snow156.hatenablog.com
 
http://www.snow0303.com
→www.snow0303.com
 
ひろしサン (id:ex02xx)の記事を拝見したところ、
 
http://blog.hatena.ne.jp/hatenasupport/ドメイン/subscribe
 
でも、大丈夫なようです。
 
こちらの方がドメインだけで良いので楽ですね。IDがわからなくも大丈夫だし。
Everyday is like Sunday
  
とは言え、やっぱり一手間かかってしまう。
 
 



 

「読者になる」ボタンを設置しよう

 

一番簡単

 
はてなサンが用意してくれているので、コピペするのが一番簡単。
 
ダッシュボード→設定

f:id:snow0303:20171023080812j:plainf:id:snow0303:20171023080853j:plain
 
詳細設定→読者になるボタンの赤枠内をコピー
f:id:snow0303:20171023081023j:plainf:id:snow0303:20171023081027j:plain
 
本文内に張り付けるとこんな感じ。
 

 
 
読者さんが少ないのは気にしない。気にしない。
 

自作したい

 
カスタマイズでお世話になっている方々の「読者なる」ボタンのカスタマイズ記事をご紹介。
 

Twitterなどのボタンも一緒に

 
ゆきひーサン (id:ftmaccho)
Yukihy Life
 

私の

  
私が使っているボタンはこちらの記事で紹介しています。
フォローボタンをカスタマイズ
 
このボタンを作る際に参考にさせていただいたサイトがこちら。
 
じょーじサン (id:george-gogo) の記事
http://georges.hatenablog.jp/entry/blog-custom15急がば 急いでまわれ!

こちらのサイトは消してしまったようです(泣)
 

スマホ版のCSSを書く際の注意

 
<style type="text/css">と</style>の間にコードを入れてください。
 
例えば

<style type="text/css">
見出し用のコード
</style>
で入っている方は
<style type="text/css">
見出し用のコード
今回のフォローボタンのコード
</style>
にすればOKです。

詳しくは→こちら
 
   
ここでは紹介しきれないほどたくさんの方がカスタマイズ方法を紹介してくださっていますので、
「はてなブログ 読者になるボタン カスタマイズ」
で検索してみましょう。
 
 
なるべく多くの方が設置してくれることを願っております。