木ニ竹ヲ接グ

思いの丈を適当に書き殴る。

iPhone版Safariのリーダー表示について

倉永です。

本当はバトンの回答をしようと思ったのですが、どうしても前から気になっていたことがあったので^^;

まず、こちらの記事Safariの新機能「リーダー」の表示条件』をご覧ください(外部サイト)。
※このサイトはツイッターで教えていただきました。ありがとうございます。





前々から気になっていたのですが、ようやく分かりました。
divボックスで囲まれた範囲をテキストとして拾ってきてリーダーで表示してくれるようです。

ということですが。
具体的に指定タグがあるのかな……と思って自サイトと小説家になろうのサイトのソースを見比べてみたのですが、共通するソースがなかった……。

なので、元記事を見て出した結論。

divタグ使ってwidthで幅を指定していれば、リーダーが自動認識してくれるようです。
#どうやらcssで指定してあってもSafari側が認識して表示してくれるようです。

↑の記事によると、iPad向けでwidth=300、iPhoneだとwidth=280でリーダー認識してくれるようなので、300以上を指定していれば問題ない、ってことのようですね。

ただ、PCなどのブラウザでアクセスした際に300だと、まるでケータイサイトを見ているかのようになるのでもっと幅を持たせた方がよいと思いますです。

ということは。
メニューなどもdivで囲むとしても、リーダーで表示させたくないならwidth=279以下を指定すればよいってことか。
なるほど。

ということで、iPhoneSafariでアクセスされることを考えたらdivタグ使ってテキストを囲むというのはユーザビリティなのかな……と思うのですが、どうなんでしょうか。

ちなみに、他のブラウザを使用したことがないのでSafari以外がどうなのかは分かりません。
すみません。

以下、iPhoneからアクセスした際のSSをはっつけてみる(加工は一切してない。撮りっぱなしでリサイズしてないから大きくてすまぬ)。

木に竹を接ぐ』にiPhoneでアクセスしたらこんな感じ。
URLの横に『リーダー』が表示されている。
下の広告が大変うざったい。
しかもスクロールするごとに付いてくるから正直、嫌気が差す。



リーダー表示すると、サイト名や上にあるメニューすべてをすっ飛ばして本文から表示になる。
下の広告表示がなくなり、かなりスッキリするが、下地が白になり、文字色も黒。読みやすいけどちょっと淋しいw



『月をナイフに』の1話iPhoneでアクセス。
こちらも広告が表示されている。



リーダーで表示。
なんかルビ表示が変なんだけど(直してもきちんと意図通りに表示してくれない……)、それ以外はテキストだけ抽出してくれて大変読みやすくすっきり。



※追記※

メニューは別にdivで囲まなくてもよいことに改めてソースを読んで気がついた。
リーダーに表示させたいものをdivで囲み、width=300以上で幅を指定すればいいってことですね!←結論