2017年02月12日

スマートフォンでブログを閲覧する際の表示モードの違い

スマートフォンでこのブログを見ると画面の下の方に広告が表示されます。

こんな感じ(画像をクリックで拡大)
スマートフォンで見た画面

このくらいならそんなに邪魔にはならないとは思いますが、パソコンで見る場合には広告が表示されないという違いがあります。

スマホのブラウザでもメニューの中にある「PC版サイトを見る」という項目を選択すると広告は表示されなくなります。
PC版で表示した画面

スマホで見た場合とほぼ同じ画面ですが、一行に表示される文字数に違いがあります。読みやすいと思う方をお使いください。

画面の向きを縦から横、横から縦と変えて回転させた時に文字が画面の外にはみ出てしまった場合には、ページを再読み込み(リロード)すると本文の高さが自動的に調整されて画面内に収まるようになります。
横向きにした画面

文字のサイズが小さすぎたりして読みづらい場合には、そのまま拡大させると文字が画面の外にはみ出てしまう場合もあります。ブラウザの設定(ユーザー補助機能など)でテキストの拡大と縮小ができると思いますのでお好みのサイズに調節してください。
テキストの拡大と縮小.jpg

画面の下に時々「ページをモバイル向け画面で表示」というようなお知らせが出る場合があります。
ページをモバイル向け画面で表示

その部分をタップするとモバイル向け表示リーダーモード)で表示されます。シンプルな横書き表示の画面になります。
リーダーモード

これは AndroidChrome の場合ですが、同様の機能は iPhoneSafariFirefoxリーダーモードの説明)等にもあります。とりあえずテキストが読めればいいという場合にはこれで十分だと思います。

通常はPC版が表示されていますがスマートフォン専用ページを消してPC版が表示されるように変更してみました、ブラウザの設定で JavaScriptCookie を両方とも無効(ブロック)にするとスマートフォン専用ページが表示されます。
スマートフォン専用ページ

一応縦書きになっています。広告は表示されず、Webフォントも使用されないのでこちらの方が読みやすいかもしれません。サイトごとに設定を保存できるブラウザもあるので、私のブログのサイトだけ JavaScriptCookie を無効にしてしまえば他のサイトで不自由することもありません。

こんな感じで様々なパターンの表示モードがあるので、最も読みやすいと感じる方法でお読みいただければと思います。


.

posted by アポロ at 21:27 | Comment(0) | TrackBack(0) | インターネット | このブログの読者になる | 更新情報をチェックする
2017年02月11日

スマートフォン専用ページを消してPC版が表示されるように変更してみました

縦書き

スマートフォンでこのブログ(Seesaa のブログ)を開くと自動的にスマートフォン専用のページが表示されるのですが、それを消してスマートフォンでもPC版のページが表示されるように変更してみました。(JavaScriptCookie が無効になっているとPC版は表示されません。)

ほとんどのスマートフォンでパソコンと同じように縦書きで表示されるようになったと思います。記事の部分を左右にスクロールさせて読んでみてください。

試験的にWebフォントも使用してみました。読み込みに時間はかかりますが、閲覧環境によっては味のある行書体で表示されると思います。

文字が小さくて読みづらい場合には画面を縦のままにして拡大すると読みやすくなると思います。レイアウトが崩れている場合にはページを拡大してから再読み込み(リロード)してください。

5インチ以上の大きめのサイズのスマホやタブレットPCの場合には画面を横にしても読みやすいと思います。

Android では表示確認をしているのですが、iPhoneiPad 等ではどのように表示されているかは未確認です。iPhoneiPad の所有者でこのブログをご覧になった方がおられましたらご報告いただければ幸いです。

今までのスマートフォン専用ページはほとんどカスタマイズしていなかったので普通のブログと同じようにシンプルな横書き表示になっていました。そこで、試しにPC版と同じように縦書きにしてみたところ、一応は縦書きにはできたのですが、ページ内に強制的に埋め込まれている広告が激しくレイアウト崩れを起こしてあちこちに飛び回りカオス状態になってしまいました。この広告は削除できないし、レイアウトを修正しようにも手間がかかりすぎてほとんど不可能でした。(ブラウザの設定で JavaScript を無効にすると広告は表示されません。)

仕方がないので縦書き表示はあきらめようかと思ったのですが、広告が表示されるのはスマートフォン専用ページだけなので、スマートフォンでも最初からPC版で表示させてしまえば広告も出なくて見やすくなるのではと考えたわけです。

スマートフォン専用ページを消すのは少し手間がかかるのですが、裏技的な方法でどうにかうまくいったようです。完全に広告を消すことはできませんでしたがレイアウト崩れもなく、閲覧には支障はないと思います。いかがでしょう?

Webフォントについては読み込みに時間がかかってしまう(データ通信量も増える)ので閲覧者に負担をかけてしまうことになるのですが、せっかく縦書きにしてもフォントが味気ないゴシック体ではいまいちです。縦書き時にはせめて明朝体くらいにはしたいものです。ところが、スマートフォンでは端末に内蔵されているフォントが少なくて、特に日本語フォントはゴシック体一択で明朝体すらない場合がほとんどだと思います。ブログでフォント指定しようと思ったらWebフォントを使うしかないわけです。これもなかなかに手間のかかる作業でしたが、どうにかうまくいったようです。

フリーで使えるフォントはあまり多くはなく、あってもライセンスがめんどくさかったりするのでフォント探しも苦労しましたが、とりあえず「衡山毛筆フォント行書」というものを使ってみました。細目でちょっと崩れすぎているので明朝体ほど読みやすくはないと思いますが、味があってよいと思います。何となく雰囲気だけでも味わってもらえれば十分かと……。現在は試験的に使用しているだけなので今後もこのままかどうかは未定です。どうしても読みづらい場合にはWebフォントを無効にできるブラウザを使ったり、SafariFirefoxリーダーモードを使ったりしてみてください。

JavaScriptCookie を両方とも無効にするとWebフォントも無効になり、広告なしのスマートフォン専用ページで閲覧することができます。設定が少し面倒ですが、この方が一番見やすいかもしれません。

解説記事も書いたのでこちらもお読みください。


.

posted by アポロ at 01:05 | Comment(0) | TrackBack(0) | お知らせ | このブログの読者になる | 更新情報をチェックする