はてなブログのスマートフォンで読者になるボタンが表示されない時の対処法
スポンサーリンク
下記のゆるりまあるくさんのサイトではてなブログのスマートフォン表示において、読者になるボタンが消えてしまうという話が出ておりました。
私もスマートフォンで読者になるボタンが表示されなくて困ったことがあったのでその時の対処法を記載します。
原因は2種類ありました。順に説明させていただきます。
1. はてなにログインした状態で自分のサイトを見ている
単純ですが以外と気づきませんでした。
昔からそうなのかはわかりませんが、2017年2月現在では自分のはてなIDでログインした状態で自分のサイトを見ると読者になるボタンは表示されないようです。
ログインした状態の画面はこちら。
ログインしてない状態の画面はこちら。
「読者になるボタン」と「はてなブログを始めよう」ボタンが表示されています。
というように、自分のはてなIDでログインした状態で自分のサイトを見ても表示されません。
以外と盲点なので注意が必要ですね。
いちいちログインしたりログアウトしたりするのは面倒なので、ログインした状態のブラウザとログアウトした状態のブラウザを使い分けると手間が省けるかと思います。
2. footer-action-wrapperを非表示にしている。
これは意図的にカスタマイズをしている人しか発生しません。
読者になるボタンはデフォルトで表示されいます。 （すでに読者の場合は「読者です」ボタンが表示されます）
これを意図的にカスタマイズし、cssでfooter-action-wrapperというclassを非表示にしていると表示されなくなります。
ログインしていない状態でもこのように表示されます。
ちょっと面倒なのが、footer-action-wrapperの要素の中に 「はてなブログを始めよう！」とか「記事を書く」のボタンと「読者になるボタン」が混在していることです。
「はてなブログを始めよう！」とか「記事を書く」のボタンをいらないと思って消してしまうと、読者になるボタンも合わせて消えてしまうのです。これも注意が必要ですね。
下記のようにfooter-action-wrapperをdisplay:noneにしてしまうとこの状態になります。
.footer-action-wrapper {
display: none;
}
※スマホ版のスタイルシートの編集をできるのははてなProのみ。
例えば、下記のサイトを見てコピペしてカスタマイズすると気づかぬうちに無くなってしまうことがあるようです。（というか私もやってみて気付きました）
ちなみに上記のサイトは標準の読者になるボタンが消えてしまう点については注意が必要ですが、スマホデザインのカスタマイズに非常に参考になります。
私もほぼ丸々利用させてもらっています。
以上、はてなブログのスマートフォン表示で、読者になるボタンが表示されない件の対処方法でした。
