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

ブログの記事執筆で常に気にしなければならないのが記事の読みやすさ。

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

ですがPCから記事を書いていることもあってか、スマホでの記事のレイアウト確認はつい怠ってしまいがちです。

というのも、WordPressのプレビューはPC表示しかできないんですよね。

しかし最近ではブログへのアクセスの半数以上はスマホから。

スマホでどのように見えるのかを意識しながら記事を書くことは必要です。

そこでこの記事では、WordPressのプレビューをスマホ表示にしつつ記事編集する方法についてご紹介します。

方法は簡単ですが、知っていると知ってないとでは作業の捗り方がまったく違います。

とくにブログを始めたばかりの方はぜひ参考にしてください。

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

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

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

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

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

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

Chrome内で記事ページの表示をスマホサイズに切り替えることができます。

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

デベロッパーツール上でプレビューをスマホ表示にできるので、記事を下書き状態のまま編集を続けることができます。

記事のリビジョンも上がらず、何より作業が楽なのでおすすめです。

一旦記事を公開して、スマホで表示を確認した後で修正を入れるという方法もできますが、正直ちょっと面倒ですよね。

記事を更新するたびにスマホも再読込しないと状態確認できないので、手数も多くなりがちです。

なお「リビジョン」とは記事の版数のことで、要は過去分の自動バックアップのこと。

WordPressは修正ごとに前の記事をすべてサーバー上に残しているので、リビジョンが増えすぎると容量を圧迫してしまいます。

WP-Optimizeなどのプラグインで削除はできますが、無駄に増やさないに越したことはありません。

» プラグイン「WP-Optimize」でWordPressを高速化！データベースを最適化する設定と使い方を説明

リビジョンは記事更新のタイミングとオートセーブでどんどん増えていくので、こまめに削除してあげましょう。

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

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

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

「変更をプレビュー」をクリックします。

別タブにPC版のプレビューが表示されます。

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

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

このように画面の表示が変わります。

デベロッパーツールはその名のとおり、主に開発者やデザイナー用の画面なので、HTMLなどページ構造を表示するウインドウが表示されます。

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

こちらを変更します。

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

直近のiPhone/iPadシリーズやPixelシリーズが選べます。

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

このように切り替わります。

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

またWordPressの「投稿の編集」画面で「変更をプレビュー」を押すと、プレビューの状態を維持したままブログの内容だけが更新されます。

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

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

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

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

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

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

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

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

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

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

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

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

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

PCは横幅が広いので列が増えても画面に収まりますが、あまり増やしすぎるとスマホで崩れます。

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

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

スクロールがストレスになってしまうとこれも離脱される原因になってしまいます。

このような事態を避けるため、テーブルが横に長くなるようなら、横スクロール対応を取るのがおすすめです。

記事全体が固定されてテーブルだけが横スライドします。

このスクロール機能はWordPressテーマによっては最初から機能として用意されていますし、CSSカスタマイズとして公開しているサイトさんもあります。

ぜひ導入してみましょう。

まとめ

この記事でご紹介している方法は、細かいTIPS的な内容ではありますが、知っていると知らないのでは作業の効率が全然変わります。

またスマホがインターネットの主役になりつつある中、極論を言えば記事レイアウトは最初からスマホ表示で進めてもいいくらいです。

ぜひ読者にとって読みやすい記事作りに集中していただければと思います。