WordPressを導入したウェブサイトを更新する際、記事の投稿画面が実際に公開されるデザインとは異なることに戸惑うことはありませんか。
「書いている画面では違和感がなかったのに、公開してみたら見出しが大きすぎた」「画像の位置が思っていたのと違う」といった経験、WordPressで記事を書いている士業さんなら一度はあるのではないでしょうか。
公開してから直す、また公開して確認する。これを繰り返していると、記事1本にかかる時間がどんどん膨らんでいきます。
そこで今回は、仕上がりを確認しながら記事を書くための方法について、お使いのエディタ別に整理してご紹介します。
かつてはInline Previewという専用のプラグインがありました
このページでは以前、Inline Previewというプラグインをご紹介していました。編集画面の右半分に実際の表示がリアルタイムで表示されるという、まさにこの悩みを一発で解決してくれるものでした。
ただ、このプラグインは現在、使うことができません。
公式ディレクトリには今も掲載されていますが、最終更新は10年以上前。動作確認が取れているWordPressのバージョンも、当時のまま止まっています。インストールしても、現在のWordPressでは期待どおりに動きません。
便利だっただけに残念なのですが、ここには教訓もあります。プラグインで解決した問題は、そのプラグインの寿命が尽きた時点で、また振り出しに戻ってしまうということです。
以下でご紹介する方法は、プラグインを追加せずに済むものを中心にしています。
お使いのエディタはブロック？クラシック？
WordPressには現在、記事を書く画面が2種類あります。
- ブロックエディタ……見出し、段落、画像などを「ブロック」という単位で積み上げていく方式
- クラシックエディタ……Wordのように、1つの入力欄に文章を書いていく方式
どちらが正しいという話ではありません。士業事務所さんの場合、業務案内のように長い文章を一気に書き下ろすことが多いため、あえてクラシックエディタを選んでいる事務所さんも少なくありません。書き慣れた道具で書くほうが記事が増えるのであれば、それは合理的な選択です。
クラシックエディタを使うには、Classic Editorという公式プラグインを導入します。「サポートが終わるのでは」と心配される方もいますが、このプラグインはWordPressチーム自身が保守していて、現在も800万サイト以上で使われ、最新のWordPressでの動作確認も継続して行われています。
※プラグインページの記載には以前の表記が残っていますが、実際には更新が続いている状態です。とはいえ将来にわたって保証されているわけではないため、これから新しくWordPressを覚える方は、ブロックエディタから始めるのもありです。
以下、それぞれのエディタでの方法をご紹介します。ご自身が使っているほうをお読みください。
ブロックエディタをお使いの場合
まず確認：編集画面にサイトのデザインが反映されていますか
ブロックエディタには、テーマのデザインを編集画面に読み込ませる仕組みが備わっています。
これが設定されていれば、見出しの大きさ、本文の文字サイズ、行間、引用や箇条書きの見え方などが、書いている最中から公開後とほぼ同じ状態で表示されます。プレビューを開く回数が、これだけでかなり減ります。
ご自身のサイトで設定されているかどうかは、記事を書いてみればすぐ分かります。編集画面の見出しが、公開後のサイトと同じ書体・同じ大きさで表示されていれば設定済みです。明らかに違う見え方であれば、未設定の可能性が高いです。
これはテーマ側の設定なので、士業さんご自身で作業する必要はありません。ホームページを制作した会社に「編集画面にサイトのデザインを反映させることはできますか」と尋ねてみてください。多くの場合、対応が可能です。
プレビューで表示幅を切り替える
編集画面の上部にある「プレビュー」ボタンを押すと、デスクトップ・タブレット・モバイルの3つの表示幅を切り替えられます。
これは画面の幅を変えているだけなので完全な再現ではありませんが、スマートフォンで見たときに表が見切れていないか、画像が大きすぎないかといった、大きな崩れを見つける用途には十分です。
士業事務所さんのサイトは、業務によっては（特に対象が個人となる業務では）スマートフォンからの閲覧が大半を占めます。公開前に一度、モバイル表示に切り替えて眺めておくことをおすすめします。
新しいタブでプレビューする
同じ「プレビュー」ボタンの中に「新しいタブでプレビュー」があります。ヘッダーやサイドバーも含めた、サイト全体の中での見え方を確認したいときはこちらで確認してください。
一度下書き保存してから開きます。保存前の内容は反映されません。
クラシックエディタをお使いの場合
「ビジュアル」タブで書く
編集欄の右上に「ビジュアル」と「テキスト」の切り替えタブがあります。「テキスト」はHTMLがそのまま表示される画面なので、仕上がりを確認しながら書きたい場合は「ビジュアル」を使ってください。
見出しや太字、箇条書きが、ある程度整った形で表示されます。
こちらも、編集画面にCSSを反映できます
クラシックエディタにも、編集画面にサイトのデザインを反映させる仕組みがあります。設定されていれば、ビジュアルタブで書いている文章が、公開後に近い見え方になります。
こちらも制作会社側で対応する部分です。ブロックエディタの項と同じく、記事編集画面のデザインと公開ページのデザインが大きく異なる場合は、一度確認してみてください。
プレビューは別タブで開く
「プレビュー」ボタンを押すと、別のタブで公開後の状態が表示されます。編集画面はそのまま残っていますので、タブを行き来しながら確認していく形になります。
ここで、次の項の方法が効いてきます。
結局、この方法が一番確実かもしれません
エディタの種類にかかわらず、そしてプラグインを1つも増やさずに、旧記事で紹介した方法とほぼ同じことができます。
- 記事を下書き保存する
- プレビューを開き、そのタブを別ウィンドウとして切り離す（タブをつかんで画面の外へドラッグ）
- 編集画面とプレビュー画面を、左右に並べる
- 編集したら、エディタ側の「プレビュー」ボタンをもう一度押す
画面を並べる操作は、Windowsならウィンドウをつかんで画面の左端・右端に寄せると自動で半分ずつに、Macなら緑のボタンを長押しすると左右に配置できます。
4つめがポイントです。2回目以降にプレビューボタンを押しても、新しいタブは増えません。すでに開いているプレビュー画面が、そのまま最新の内容に切り替わります。WordPressが、プレビューの表示先を毎回同じウィンドウに指定しているためです。
プレビュー画面のほうで更新ボタン（F5キー）を押す必要はありませんし、むしろおすすめできません。理由は次の項のとおりです。
プレビューが古いままのときは
「保存したのに、プレビューが前のままだ」という状態になることがあります。原因はだいたい次の3つです。
- そもそも保存されていない……自動保存は一定間隔で行われるものなので、書き足した直後の内容はまだ入っていないことがあります
- ブラウザが古い表示を覚えている……Ctrl+Shift+R（Macは Command+Shift+R）で、強制的に読み込み直せますが、知らないと面倒です
- サイトの高速化の仕組みが影響している……表示を速くするためのプラグインやサーバー側の設定が、古い状態のページを表示し続けてしまうことがあります
上の手順で触れた、エディタ側のプレビューボタンを押す形にしておけば、1つめと2つめはほぼ起こりません。
3つめだけは自力での解決が難しいので、保存しても、ボタンを押し直しても、強制的に読み込み直してもプレビューが変わらないという場合は、制作会社または保守を依頼している会社に連絡してください。高速化の設定を少し調整すれば解消できるかもしれません。
この方法は「リアルタイムで自動更新される」わけではありませんので、保存してボタンを押す、というひと手間は必要です。
しかしその代わり、
- どちらのエディタでも同じように使える
- プラグインを増やさないので、サイトが重くならず、セキュリティ上のリスクも増えない
- WordPressが更新されても壊れない
という利点があります。記事を書く作業は、この先何年も続けていくものです。であれば、数年で使えなくなる方法より、地味でも壊れない方法を身につけておくほうが、結局は早いかもしれません。
なお、画面の小さいノートパソコンで左右に並べると、どちらも窮屈になります。記事の更新作業が多い事務所さんは、外付けのモニターを1台導入するだけで、この作業の快適さが変わります。
制作会社に一度確認してみてください
今回ご紹介した中で、士業さんご自身では対応できないのが「編集画面にサイトのデザインを反映させる」という部分です。
ホームページの保守を依頼している制作会社があれば、一度尋ねてみてください。「編集画面と公開画面の見え方が違って書きにくい」と伝えれば、話が通じるはずです。
