【Screenfly】デバイス別表示画面を確認する簡単な手順を公開

2017-09-14

こんにちわ、タミコです。
私はメインでブログを書くのはPCなんですが閲覧はスマホが多いのです。
最近お気にいり登録しているブログが増え巡回コースも増えたのですが
そのせいかやたら気になることがあるのでメモしておきますね。

スポンサーリンク

スマホ表示画面を固定してほしい

なぜかスマホの表示画面が横にずれてしまうブログが結構あります。
恐らくスマホの表示画面のサイズ以上のサイズ指定がその記事にあるからだと。

画像とかではなくおそらくページ要素そのものだと思うんですが
その横ずれするブログのCSSまでは確認しないので理由は分かりません。
ただ見るのを辞めるだけです。

qiita.com

bito-tax.com

www.firstsync.net
詳しい対処法はこの辺りをどうぞご覧なすって。本題は以下です。

デバイス別表示の確認方法

私はスマホはiPhone7そしてiPad、ノートPCを持っています。
私が持っているすべての端末でのこのブログの表示に不備はないはずですが
所有していない端末ではどうなのか気になりますよね。
その時は以下のサイトを使って確認します。

Screenflyで表示を確認する

quirktools.com
ダウンロード・登録不要です。簡単な使い方を以下に書いておきます。

まずアクセスした先にて確認したいブログのURLをいれてGoを押します。

そうするとこういう画面がでてきます。これはメニューバー。
実際の表示確認画面はこの下にでてきます。

右から二番目に目のアイコンがあるのでこれをクリックしてブルー表示にしておいてね!

なんとなく分かると思うのですが、左からPC、タブレット、モバイル、テレビ。
この中で表示を確認したいものをクリックすると

このような端末選択画面になるので選択してクリック。

今回はgalaxy s3-7というのを選択しました。
ヘッダーに横スクロールバーがついている以外は大丈夫そうですね。
しかしこのスクロールバー消した方がいいかなとも思っています。

というのもこのブログはアナリティクスでみると
7/1~8/11までのモバイルユーザーのうち約7割がiPhoneかiPadユーザーなんですよね。
そのうち横スクロールバーがでていないのは私が使っているiPhone7と同じピクセル数のiPhone6。
それ以外のiPhone3~5利用者に横スクロールが出ている状態なのです。
(そしてこのiPhone3~5の利用者がかなり多い)

ブログが読めないわけじゃないので少数派ならいいかなと思っていましたが
これだけ多いとやはり気になるので何かしらの調整はするつもりです。

全てに対応するのはもちろん不可能

全ての端末・デバイスに対応するのは不可能ですよね。ええ、わかっています。
でも自分が使っている端末で大丈夫だからといってその他も大丈夫とは限りません。
せめてアクセスのメインデバイスくらいは最適化をしたほうがいいかも。

特に上で書いた横ずれは早急に対処した方が良いです。
すんごい読みにくくて私はいつも読むのをあきらめます(‘ω’)

www.ok89.info
モバイル表示速度も大事ですよ(‘ω’)

はてなブロガーさんにぜひお願いしたいこと

えっとですね、ぜひ読者登録ボタンを分かるところに設置してほしいなーなんて。

というのもですね。
わーこのブログおもしろい!読者登録したい!と思ってもですね
読者ボタンのかけらもないブログがかなり多いのです(‘ω’)

ヘッダーにもなければ記事内にもないしサイドバーにもない。
そもそもスマホだとサイドバーそのものを非表示にしているブログ多いですよね?
PCでは見えていますがスマホで見るとアレ消えてますよ。

特にProにしてヘッダーを消した人・サイドバーを非表示にした人は注意!

いや、もちろん読者登録は重視していない方もいらっしゃるのは承知。
その反面読者が増えると励みになる人もいるはず。
なのでそういう人は読者登録ボタンを見えるところに設置した方がいいです。
(私は記事下とサイドバーに設置しています)

ちなみに読者登録ボタンは、ブログ管理画面の左バーにある
設定→詳細設定の下部に読者になるボタンのところにコードがあるので
これを設置したい場所にコピペすればOKです(‘ω’)

今日は短いですがここまで。皆様よい休日を!では!

スポンサーリンク