未常識を生きる

コールセンターで働きつつ田舎で暮らす派遣社員のブログ

ブログ

ブログ記事の見た目を確認【F12でスマホ用画面を表示】

投稿日:

あなたはブログ記事を作成をする際に記事が「スマホ画面」で正しく表示されるか確認されていますか?

 

僕は基本的に記事作成はPCで行います。

 

そして記事投稿前に作成した記事をプレビューしてチェックするのですがその時に「PC画面」だけでなく「スマホ画面」での表示状態を確認するようにしています。

 

この記事では簡単にPCからスマホ表示画面をチェックする方法をお話しします。

 

ブログ記事の見た目を確認【F12でスマホ用画面を表示】

どうしてわざわざ”スマホ画面”を確認する必要があるの???
それは圧倒的に”スマホ”利用者が増えているからです!!

これからブログを始めるのであればスマホユーザーが見やすい記事なのかを意識する必要があります。

 

Googleのスマホに関する調査でこのような結果が出ています。

  • スマホで情報収集した事がある・・・81%
  • その後にスマホやPCで購入した・・・36%

8割もの方々がスマホで情報を収集した後に約4割が購入したとの調査結果が出ているのです。

 

現代はほとんどの方がスマホを利用していますよね。

 

この事を考えるとブログはスマホで見やすい構成にしないと読者も見に来てくれない可能性があるのです。

 

PCでスマホ画面を確認する方法

この方法は簡単にスマホ画面を確認できるのでとても重宝します。

 

先に方法を説明させて頂きますとキーボードにある”F12”を押すだけで確認できます。

 

順番に説明していきますね。

 

F12をクリックする

この画面はワードプレスの記事作成時の画面ですね。

 

早速”F12”をクリックしてみましょう。

 

 

画面の右側にコードの羅列のような画面が表示されます。

 

そのコードの上にある赤枠のアイコンをクリックしてください。

 

そうすると左側の画面表示が狭まりスマホ画面の設定が出来るようになります。

後は表示させる機種の選択もできるので上の画像の赤枠をクリックしましょう。

ここでは”IPhone6”のボタンを押してみましょう。

 

簡単にスマホ画面表示に切り替える事が可能です。

 

こんなに簡単にスマホ表示を確認する事ができたんだ。。
今度から実施してみようっと・・

表示させる機種を増やしたい

この画面を見れば分かるようにスマホの種類は初期の状態は少ないですね。

 

自身が利用しているスマホもない可能性は高いです。

 

ですがIPhoneやアンドロイドの最新機種を画面に追加させる事も出来るんです。

 

上記画像の”赤枠”の一番下にある”Edit”をクリックしましょう。

 

すると画面右側に沢山スマホが表示されます。

 

この中に対応機種があればクリックすれば自動的に先ほどの機種選択画面に追加されます。

 

この中にもない場合は”赤枠”をクリックしましょう。

①一番上の赤枠の中に自分が設定した機種名を入れます。

②真ん中の赤枠内に設定したいスマホの”ピクセル数(縦横の幅)”を入力します。(ピクセル数は”スマホ名 ピクセル”でググれば出てきます。)

③一番下の赤枠を押せば登録終了とです。

このように機種を追加する事が可能です。(機種名を入力するで作成したためこのような名前になってます)

 

IPhoneやアンドロイドの最新機種は利用される方も多いので登録しておいて損はないでしょうね!!

まとめ

結論!!
「F12を活用してスマホ画面を確認しつつ記事作成を行いましょう!!」

いかがでしたか??

 

思ったより簡単にスマホ画面が確認できる事をお分かり頂けたのではないでしょうか?

 

 

結局僕達のブログに訪問していただけるのはPCからの訪問者だけではないという事です。

 

 

どちらかと言うと現代はスマホを利用して情報検索する方々の方が多いのです。

 

なのでブログがスマホでどのように表示されるか考えながら記事を作成するようにしましょう。

 

是非ブログ作成時に活用して見て下さい。

 

最後まで目を通して頂きありがとうございました。







-ブログ

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


関連記事

初心者も簡単にできる記事の書き方【コツは5W1H1R】

あなたはブログの記事を『どのように記事を書いていいか分からない。。』と悩まれる事はありませんか?   僕はブログを始めたばかりの頃はそのように悩んでいました。     し …

【Gutenberg対応】ワードプレス記事内で吹き出しを利用する方法

ブログ記事数も先日50記事に到達した事をあなたにお伝えさせていただきましたね。 【折り返し地点】毎日更新50記事時のPV数・アクセス数や収益は? ブログ開始から1ヶ月と半月ちょっとで50記事達成できた …

ブログでのアフィリエイトは自分をブランディングして売り込む事【個性が必要】

あなたはブログ運営を行う上で自分自身を正しくブランディングできておりますか?ブログでアフィリエイトを行うのであればただアフィリエイトリンクを貼っていけばいいという訳ではありません。この記事では「ブログ …

【経過報告】毎日更新で30記事達成!アクセス数や収益変化は?

あなたは毎日更新をし続けていれば「いつくらいから収益やアクセス数が増えるのかな?」なんて思われる事はありませんか?先日公開した記事で記事数が30記事となりました。期間はちょうど一ヶ月となります。この記 …

【解決】80記事目にてブログがバグってワードプレスにログインできなかった件

あなたはこの記事を読まれているという事は『ブログがバグってしまいとても慌てている状況』なのではないでしょうか?     僕は先日80記事毎日せっせと作り上げたブログがバグってしまい …


ブログランキング・にほんブログ村へ


あさひ

高卒→工場勤務→病んだ為退職→働くのが怖くて長い間ニート→未経験からコールセンターへ転職→一度挫折したブログに再度挑戦中

コールセンターで働く傍らブログを運営しております。
将来的にはブログで収益を発生させて借金300万円の人生から脱出する事が目標です

  • コールセンターについて
  • ブログの情報
  • ペットについて
  • ゲームの事

このブログでは僕が日常的に関わる事をピックアップしていきたいと思います。