11/12ブログ運営2022年11月12日ブログの記事執筆で気にしたいのが記事の読みやすさです。画像や文字装飾、また箇条書きや枠囲みを使うなど、記事が読みやすくなるような工夫をしている人は多いのではないかと思います。記事の執筆はPCから主に行うため、スマホで見た場合にどのように見えるのかの確認はつい怠ってしまいがちです。最近ではWordPressのエディタ画面もアップデートされ、執筆画面をモバイルレイアウトにできるようになりましたが、スマホ画面のプレビューという点では正確性に欠けるもので、使いづらさは否めません。そこで本記事では、WordPressのプレビューをほぼ実機と同等のスマホ表示にする方法を解説します。スマホでどのように表示されるのか、コンテンツ領域以外の表示も含めて、実際に確認しながら執筆を進められるので、ぜひ参考にしてください。前提として、現在のWordPressでは、エディタ画面をモバイルサイズ(スマホサイズ)に変更可能です。画面右上のプレビューを「デスクトップ」から「モバイル」に変更することで、エディタ画面をスマホサイズへと変更できます。見た目もスマホでの表示に近づくため、ざっくりとしたレイアウトの把握は可能です。この表示はブログ全体の表示をするものではないため、やや正確性に欠けるものです。スマホ表示のレイアウトを本気でこだわりたい場合は、別の方法を考える必要があります。目次へ戻るWordPressのプレビューをスマホ表示にする方法WordPressのプレビューをスマホ表示にするためには、Chromeブラウザの「デベロッパーツール」を使用します。Chromeブラウザのデベロッパーツールとはデベロッパーツールとは主に開発者向けに用意された検証ツールです。デベロッパーツールをオンにすることで、そのページのCSSやHTMLなどの構造を視覚的に確認することができます。今回利用するのはその中の画面サイズの変更機能です。この機能によって、Chromeで表示される記事ページを、スマホサイズに切り替えられます。デベロッパーツールでプレビューを見るメリットとはデベロッパーツール上でプレビューをスマホ表示にできるので、スマホ全体の表示を確認しながら、記事を下書き状態のままで編集を続けられます。前述のエディタ画面のモバイルサイズ化では、スマホ全体での見た目が分からないため、実機で見た場合の印象を追求できないのが難点でした。デベロッパーツールでは、プレビューのスマホ表示化を行うため、まるでスマホ実機で表示させたかのようにレイアウトを確認できます。下書きの段階で確認できるため、記事修正が容易でリビジョンが上がらないのも利点のひとつです。リビジョンとは記事の版数のことです。WordPressでは記事内容を履歴から復元できるように、更新や下書き保存をするごとにサーバー内にその時点での記事内容が保存されていきます。データとして容量を圧迫し、表示速度にも影響するため、定期的な削除などこまめな管理が必要です。以下ではプレビューをスマホ表示にする手順を解説します。STEPChromeブラウザでプレビューを表示するChromeでWordPressにログインし、記事を編集します。「新しいタブでプレビュー」をクリックすると、別タブにPC版のプレビューが表示されます。STEPChromeのデベロッパーツールを起動Chromeのメニューをクリックします。このように画面に各種コンソールが表示されます。画面中央の上部に「Responsive」と表示されているプルダウンがあります。クリックするとデバイス名が表示されます。直近のiPhone/iPadシリーズやPixelシリーズが選べるので、任意の機種を選択します。Proを選択してみます。次のように表示が切り替わります。画面サイズを変えたければ、プルダウンからデバイスを選び直すことができます。STEP完了この方法が優れているのは、プレビューを表示したまま記事更新ができて、プレビューしなおすとスマホ表示の設定はそのままに内容だけが置き換わることです。WordPressのエディタ画面で「新しいタブでプレビュー」を押すと、プレビューの状態を維持したままブログの内容だけが更新されます。更新しても画面がPC表示に戻ることはないため、PC版のプレビューを見るのと同じ間隔でサクサク編集できます。目次へ戻る記事を編集する上でチェックしておきたいポイントここからはやや蛇足かもしれませんが、スマホプレビューでチェックしておきたいポイントについてです。記事中に一画面が文字だけの箇所を作らないよく言われることですが、基本的に読者は文章を読みません。読んでもせいぜい流し読みで程度、見出しや装飾された文字など、目に飛び込んできたものを視覚的に理解しているだけです。マズいのが文章がぎっちり詰まっている状態で、読みづらいのですぐに離脱されてしまいます。これを避けるために、文字装飾や画像、表や箇条書きなどを差し込んでいきます。スマホ表示の場合、一文が長いと圧迫感も強いです。長くても2行に収まる文章を目標にして、ギリギリで3行。文章が3つ続いたら何かを挿入するくらいの感覚で編集していくとよいかと思います。テーブル(表)の表示崩れをチェックするPCしか意識せずに記事を書いていると起こりがちなのが、スマホ表示した際のテーブルの表示崩れです。「テーブル」とはいわゆる「表」のことです。PCは横幅が広いため、列の数が多くてもある程度は画面に収まりますが、スマホは横幅が狭いため、列を増やすと簡単にレイアウトが崩れます。テーブルの設定によっては画面外に伸びてぐらぐらと記事全体が横にスライドしてしまいます。下記の例はテーブルの表示がいまいちな例です。見づらく読者の体験としてもストレス以外の何者でもないため、改善が必要です。テーブルが横に長くなるようなら、WordPressテーマの機能を利用して横スクロール対応を取るか、そもそも横に伸びないテーブル構成にするかのいずれかを検討しましょう。横スクロール機能では、記事全体が固定されてテーブルだけ横スライドするため、PCのレイアウトとの間で齟齬がおきません。スマホは縦のスワイプ動作を繰り返すため、唐突に横スワイプが入ること自体が望ましくないという考え方もあります。テーブルの内容によって限界はありますが、テーブルの縦横を入れ替えるなどして、縦移動の動きを阻害しないレイアウトを目指すのもおすすめです。目次へ戻るまとめ今回紹介した内容は細かい小ネタ的なものですが、試してみると執筆の効率がそこそこ上がるはずです。スマホがインターネットの中心にあると言っても過言ではないため、記事レイアウトも極論を言えばスマホ表示だけを考えて進めてもよいくらいだと思います。(この記事は全然その辺りを考えて作ってないのでツッコミどころではあるのですが)本記事を参考にしていただけると幸いです。