WordPressでスマホ表示でのプレビューを見ながら記事を編集する方法

当ページのリンクには広告が含まれている場合があります。

ブログの記事執筆で気にしたいのが記事の読みやすさです。

画像や文字装飾、また箇条書きや枠囲みを使うなど、記事が読みやすくなるような工夫をしている人は多いのではないかと思います。

ですが記事の執筆はPCから主に行うため、スマホで見た場合にどのように見えるのかの確認はつい怠ってしまいがちです。

最近ではWordPressのエディタ画面もアップデートされ、執筆画面をモバイルレイアウトにできるようになりましたが、スマホ画面のプレビューという点では正確性に欠けるもので、使いづらさは否めません。

そこで本記事では、WordPressのプレビューをほぼ実機と同等のスマホ表示にする方法を解説します。

スマホでどのように表示されるのか、コンテンツ領域以外の表示も含めて、実際に確認しながら執筆を進められるので、ぜひ参考にしてください。

目次

WordPressのエディタ画面はモバイルサイズに変更可能

前提として、現在のWordPressでは、エディタ画面をモバイルサイズ(スマホサイズ)に変更可能です。

画面右上のプレビューを「デスクトップ」から「モバイル」に変更することで、エディタ画面をスマホサイズへと変更できます。

見た目もスマホでの表示に近づくため、ざっくりとしたレイアウトの把握は可能です。

しかしこの表示はブログ全体の表示をするものではないため、やや正確性に欠けるものです。

スマホ表示のレイアウトを本気でこだわりたい場合は、別の方法を考える必要があります。

WordPressのプレビューをスマホ表示にする方法

WordPressのプレビューをスマホ表示にするためには、Chromeブラウザの「デベロッパーツール」を使用します。

Chromeブラウザのデベロッパーツールとは

デベロッパーツールとは主に開発者向けに用意された検証ツールです。

デベロッパーツールをオンにすることで、そのページのCSSやHTMLなどの構造を視覚的に確認することができます。

今回利用するのはその中の画面サイズの変更機能です。

この機能によって、Chromeで表示される記事ページを、スマホサイズに切り替えられます。

デベロッパーツールでプレビューを見るメリットとは

デベロッパーツール上でプレビューをスマホ表示にできるので、スマホ全体の表示を確認しながら、記事を下書き状態のままで編集を続けられます。

前述のエディタ画面のモバイルサイズ化では、スマホ全体での見た目が分からないため、実機で見た場合の印象を追求できないのが難点でした。

しかしデベロッパーツールでは、プレビューのスマホ表示化を行うため、まるでスマホ実機で表示させたかのようにレイアウトを確認できます。

しかも下書きの段階で確認できるため、記事修正が容易でリビジョンが上がらないのも利点のひとつです。

リビジョンとは記事の版数のことです。WordPressでは記事内容を履歴から復元できるように、更新や下書き保存をするごとにサーバー内にその時点での記事内容が保存されていきます。データとして容量を圧迫し、表示速度にも影響するため、定期的な削除などこまめな管理が必要です。

WordPressのプレビューをスマホ表示にする手順

以下ではプレビューをスマホ表示にする手順を解説します。

STEP
Chromeブラウザでプレビューを表示する

ChromeでWordPressにログインし、記事を編集します。

WordPressのエディタ画面

「新しいタブでプレビュー」をクリックすると、別タブにPC版のプレビューが表示されます。

WordPressの「新しいタブでプレビュー」をクリック
STEP
Chromeのデベロッパーツールを起動

Chromeのメニューをクリックします。

「その他のツール」>「デベロッパーツール」 を選択します。

Chromeのメニュー>その他のツール>デベロッパーツールを選択

このように画面に各種コンソールが表示されます。

Chromeのコンソール
STEP
画面表示をスマホサイズに変更

画面中央の上部に「Responsive」と表示されているプルダウンがあります。

クリックするとデバイス名が表示されます。

Chromeからレスポンシブ表示を選ぶ

直近のiPhone/iPadシリーズやPixelシリーズが選べるので、任意の機種を選択します。

ここではiPhone12 Proを選択してみます。

次のように表示が切り替わります。

Chromeのレスポンシブ表示が変化

画面サイズを変えたければ、プルダウンからデバイスを選び直すことができます。

STEP
完了

この方法が優れているのは、プレビューを表示したまま記事更新ができて、プレビューしなおすとスマホ表示の設定はそのままに内容だけが置き換わることです。

WordPressのエディタ画面で「新しいタブでプレビュー」を押すと、プレビューの状態を維持したままブログの内容だけが更新されます。

更新しても画面がPC表示に戻ることはないため、PC版のプレビューを見るのと同じ間隔でサクサク編集できます。

記事を編集する上でチェックしておきたいポイント

ここからはやや蛇足かもしれませんが、スマホプレビューでチェックしておきたいポイントについてです。

記事中に一画面が文字だけの箇所を作らない

よく言われることですが、基本的に読者は文章を読みません。

読んでもせいぜい流し読みで程度、見出しや装飾された文字など、目に飛び込んできたものを視覚的に理解しているだけです。

一番マズいのが文章がぎっちり詰まっている状態で、読みづらいのですぐに離脱されてしまいます。

1画面に文字だけのページ

これを避けるために、文字装飾や画像、表や箇条書きなどを差し込んでいきます。

とくにスマホ表示の場合、一文が長いと圧迫感も強いです。

長くても2行に収まる文章を目標にして、ギリギリで3行。

文章が3つ続いたら何かを挿入するくらいの感覚で編集していくとよいかと思います。

テーブル(表)の表示崩れをチェックする

PCしか意識せずに記事を書いていると起こりがちなのが、スマホ表示した際のテーブルの表示崩れです。

「テーブル」とはいわゆる「表」のことです。

PCは横幅が広いため、列の数が多くてもある程度は画面に収まりますが、スマホは横幅が狭いため、列を増やすと簡単にレイアウトが崩れます。

またテーブルの設定によっては画面外に伸びてぐらぐらと記事全体が横にスライドしてしまいます。

下記の例はテーブルの表示がいまいちな例です。

見づらく読者の体験としてもストレス以外の何者でもないため、改善が必要です。

テーブルが横に長くなるようなら、WordPressテーマの機能を利用して横スクロール対応を取るか、そもそも横に伸びないテーブル構成にするかのいずれかを検討しましょう。

横スクロール機能では、記事全体が固定されてテーブルだけ横スライドするため、PCのレイアウトとの間で齟齬がおきません。

しかしスマホは縦のスワイプ動作を繰り返すため、唐突に横スワイプが入ること自体が望ましくないという考え方もあります。

テーブルの内容によって限界はありますが、テーブルの縦横を入れ替えるなどして、縦移動の動きを阻害しないレイアウトを目指すのもおすすめです。

まとめ

今回紹介した内容は細かい小ネタ的なものですが、試してみると執筆の効率がそこそこ上がるはずです。

もはやスマホがインターネットの中心にあると言っても過言ではないため、記事レイアウトも極論を言えばスマホ表示だけを考えて進めてもよいくらいだと思います。

(この記事は全然その辺りを考えて作ってないのでツッコミどころではあるのですが)

本記事を参考にしていただけると幸いです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次