【ブログ】2個ボタン押すだけ_携帯表示を確認する方法とは

ブログ_携帯画面_確認方法

こんにちは,Hiroです。今回は

ブログ記事が携帯でどのように表示されるか確認する方法

について解説します。

この記事はこんな悩みを解決します。

携帯でどのように表示されるか確認したい
iPadでの表示画面も確認したい

この記事を書いているのはこんな人

Hiro
Hiro

・院卒化学系エンジニア1年目

・中堅国立大学大学院2021年3月卒業

・2021年4月現在2ヶ月毎日投稿

では,早速行ってみましょう!

目次

携帯表示を確認する方法とは

結論、

  1. プレビュー画面でF12キーを押す
  2. 上の方に表示された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%が携帯から読まれています。

どれぐらいか知りたい人は

  1. Google アナリティクスにログイン
  2. ホーム
  3. 右下の方の「最もよく使われているデバイスは?」

を確認してみてください。

携帯表示の確認は超重要

僕と同じように多くのブログが携帯から読まれているはずです。

一方で、ブログ記事の編集はPCから行っていると思います。

なので

PCで編集している時は気付かなかったけど、携帯で見ると行間が狭すぎて読みにくい

ということが起こります。

僕は最初の方は携帯画面を意識せずに書いていたので、自分の記事を携帯から読んでみた時

カズヤ

うわっ読みにくっ

って思いました。

まだまだ読みにくい部分はありますが、最近は携帯表示を意識しながら読みやすい記事を書くように気を付けています。

特に気を付けていること

携帯画面に文字だけしかない場面を生じないようにする

ことです。

文字だけにならないように

  • 枠線で囲う
  • 吹き出しキャラを使う
  • 写真を入れる
  • ボックスタブを使う

等の工夫をするようにしています。

検索流入が増えてきたときに、携帯で読みにくいと直帰率が上昇しそうなので早めから手を打っておきましょう!

まとめ

携帯画面の表示を確認する方法

  1. プレビュー画面ボタンを押す
  2. F12キーを押す
  3. device toolbarボタンを押す

別デバイスでの画面表示を確認する方法

  1. Responsiveボタンを押す
  2. 確認したいデバイスを選択

以上となります!

質問やコメントがあればぜひ↓からよろしくお願いします!

その他のオススメ記事はこちら
1分で完了wordpress 予約投稿の方法_プラグイン不要

Googleアドセンス|有益性の低いコンテンツで不合格後、即日再申請で合格した話

初心者ブログの1ヶ月目運営報告|PV数、収益は?_素人が毎日投稿した結果を公開

よかったらシェアしてね!

コメント

コメントする

CAPTCHA


目次
閉じる