blog

【作業効率UP】WordPressのブログ記事をスマホ表示でプレビューする方法

【作業効率UP】WordPressのブログ記事をスマホ表示でプレビューする方法 Chromeのデベロッパーツール
WordPressで記事を書いているときに、パソコンのプレビュー画面じゃなくてスマホの表示でプレビュー見られないかな?

パソコンでプレビューを見たときはいい感じだったけど、スマホで見たら圧迫間が強くて、下書きの段階からスマホ画面で確認したい。

 

こんな悩みに答えます。

 

本記事の結論

 

「WordPressはパソコンの画面しかプレビューできないのかな?」「スマホで確認する場合は公開するしかないの?」と悩んでいませんか?

 

僕も書いた記事をスマホで見る方法がわからずに一度公開してチェックしていました……

 

ですが、できれば公開前にスマホの画面でチェックしたいですよね。

 

そこで今回は、WordPressの記事を書いている最中に「スマホ表示」でプレビューできる方法を紹介します。

 

 

今や、利用者の約7割はスマホでアクセスします。

 

自分のブログをスマホで見たときに、見やすいかどうかを確認をすることは、とても重要。

 

この記事を読めば、WordPressで記事を書きながら「スマホ画面」でプレビュー確認ができ、執筆の作業効率がグンとUPしますので、ぜひ試してみてくださいね。

 

スマホの画面でプレビューを表示させる方法は「Google Chrome」を使う

【作業効率UP】WordPressのブログ記事をスマホ表示でプレビューする方法

 

WordPressの記事や、他のサイトやブログを「スマホ」表示で見るのは簡単で、クロームの『デベロッパーツール』を使います。

 

デベロッパーツールってなに?

 

デベロッパーツールは、サイトのHTMLなどの情報を確認できるツールだよ。

 

デベロッパーツールに画面のサイズを変更できる機能があり、さまざまなスマホのサイズに切り替えができるので紹介します。

 

デベロッパー機能を使ってスマホの画面サイズで見る方法

【作業効率UP】WordPressのブログ記事をスマホ表示でプレビューする方法

 

それでは先ほどの動画のようにスマホビューで見る方法を紹介します。

 

GoogleクロームでWordPressを立ち上げてください。

 

WordPressの記事画面でデベロッパーツールを開く

 

【作業効率UP】WordPressのブログ記事をスマホ表示でプレビューする方法 Chromeのデベロッパーツール

 

WordPressの『変更をプレビュー』をクリック。


【作業効率UP】WordPressのブログ記事をスマホ表示でプレビューする方法 Chromeのデベロッパーツール

 

プレビューが開いたら、画面右上の三点リーダーのメニューを開き、『その他のツール』をクリック。


【作業効率UP】WordPressのブログ記事をスマホ表示でプレビューする方法 Chromeのデベロッパーツール

 

その他ツールの中の『デベロッパー ツール』をクリック。

 

macの場合『Command⌘+Option⌥+I』のショートカットキーでデベロッパーツールを開けます

また『Command⌘+Option⌥+I』をもう一度押せば、元の画面に戻ります。

 

ショートカットキーが便利だから使ってみてね。

【作業効率UP】WordPressのブログ記事をスマホ表示でプレビューする方法 Chromeのデベロッパーツール

 

画面の右半分にソースコードが表示されるので、赤い矢印の先をクリック。


【作業効率UP】WordPressのブログ記事をスマホ表示でプレビューする方法 Chromeのデベロッパーツール

 

左側の画面が切り替り、スマホ表示の画面で表示されます。

 

おおー凄い簡単にできるんだね!

 

デベロッパーツールを使えば、記事を執筆中に『スマホ』プレビューで確認できます

 

スマホの表示サイズを変更する

 

デベロッパーツールは、スマホの機種に合わせて画面のサイズを変更可能です。

 

【作業効率UP】WordPressのブログ記事をスマホ表示でプレビューする方法 Chromeのデベロッパーツール

 

画面上部にある『Rseponsive』をクリック。


【作業効率UP】WordPressのブログ記事をスマホ表示でプレビューする方法 Chromeのデベロッパーツール

 

メニューが表示されるので、好きな画面サイズを選ぶことできます。

 

iPhone6/7/8のサイズの場合

【作業効率UP】WordPressのブログ記事をスマホ表示でプレビューする方法 Chromeのデベロッパーツール

 

375×667となり、パソコンの画面でiPhone6のサイズを表示できます。

 

iPad Proのサイズの場合

【作業効率UP】WordPressのブログ記事をスマホ表示でプレビューする方法 Chromeのデベロッパーツール

 

1024×1366となり、iPad Proの画面サイズで表示されました。

 

画面のサイズは『Rseponsive』の右型の画面から自由にサイズ変更できます。

 

他のサイトもスマホ表示で閲覧可能

 

自分のWordPressの記事だけでなく、他の人のサイトやブログもスマホサイズで閲覧できます。

 

パソコンでオシャレなサイトを見つけ「スマホではどのように見えるのかな?」と思ったときも、デベロッパーツールで確認できるので試してみてください。

 

スマホ表示を意識しよう

【作業効率UP】WordPressのブログ記事をスマホ表示でプレビューする方法 Chromeのデベロッパーツール

 

今回はGoogleのクロームを使い、パソコンでスマホの画面サイズの記事を見る方法をお伝えしました。

 

今やブログを見てくれる方の7割近くはスマホです

 

パソコンで問題がなくても、スマホで見たときに『画像が小さくて見えない』など、スマホで確認しないとわからないことも多々あります。

 

あらためて自分のブログがスマホでどのように表示されているかチェックし、見やすい記事を目指してブログの更新を頑張ってみてください。

 

-blog
-,

© 2021 やきろぐ