こんにちは,Hiroです。今回は
ブログ記事が携帯でどのように表示されるか確認する方法
について解説します。
この記事はこんな悩みを解決します。
iPadでの表示画面も確認したい
この記事を書いているのはこんな人

・院卒化学系エンジニア1年目
・中堅国立大学大学院2021年3月卒業
・2021年4月現在2ヶ月毎日投稿
では,早速行ってみましょう!
携帯表示を確認する方法とは
結論、
- プレビュー画面でF12キーを押す
- 上の方に表示されたdevice toolbarボタンを押す
だけです。
プレビュー画面でF12キーを押す
まずプレビュー画面を表示します。
表示するには編集画面右上にある「プレビュー」ボタンを押します。
そうしたらプレビュー画像が表示されたはずです。
ただこのプレビューはPC上での表示です。
そこで携帯での表示に切り替えるには
F12キーを押します。
キーボードの右上の方にあるはずです。
もしF12キーを押して下の画像ような画面にならなければfnキーが作動している可能性が高いです。
このような時はfnキー(ファンクションキー)を押しながらF12キーを押してください。
上の方に表示されたdevice toolbarボタンを押す
上の画像に示した画面が出たら最後に1つボタンを押すだけです。
少しわかりにくいですが右上に小さくタブレット端末のようなボタンがあるはずです。
このボタンを押しましょう。
そうするとこのような携帯サイズの表示画面を確認することができます。
iPhoneの種類ごとやiPadの表示画面を確認
今回紹介した方法を用いると
- iPhone 5
- iPhone 6,7,8
- iPhone 6,7,7 plus
- iPhone X
- iPad
等の様々なデバイスでの表示も確認することができます。
これも簡単で
上で示した携帯サイズプレビューの真ん中の上の方にある「Responsive」というボタンを押すだけです。
このボタンを押すとデバイス一覧が表示されるので、確認したいデバイスをクリックしましょう。
携帯表示を確認する重要性
携帯から読んでいる人は何%?
皆さんのブログは何%ぐらいが携帯から読まれていますか?
僕の場合は約75%が携帯から読まれています。
どれぐらいか知りたい人は
- Google アナリティクスにログイン
- ホーム
- 右下の方の「最もよく使われているデバイスは?」
を確認してみてください。
携帯表示の確認は超重要
僕と同じように多くのブログが携帯から読まれているはずです。
一方で、ブログ記事の編集はPCから行っていると思います。
なので
PCで編集している時は気付かなかったけど、携帯で見ると行間が狭すぎて読みにくい
ということが起こります。
僕は最初の方は携帯画面を意識せずに書いていたので、自分の記事を携帯から読んでみた時

うわっ読みにくっ
って思いました。
まだまだ読みにくい部分はありますが、最近は携帯表示を意識しながら読みやすい記事を書くように気を付けています。
特に気を付けていることは
ことです。
文字だけにならないように
- 枠線で囲う
- 吹き出しキャラを使う
- 写真を入れる
- ボックスタブを使う
等の工夫をするようにしています。
検索流入が増えてきたときに、携帯で読みにくいと直帰率が上昇しそうなので早めから手を打っておきましょう!
まとめ
携帯画面の表示を確認する方法
- プレビュー画面ボタンを押す
- F12キーを押す
- device toolbarボタンを押す
別デバイスでの画面表示を確認する方法
- Responsiveボタンを押す
- 確認したいデバイスを選択
以上となります!
質問やコメントがあればぜひ↓からよろしくお願いします!
その他のオススメ記事はこちら
1分で完了wordpress 予約投稿の方法_プラグイン不要
コメント