記事をリアルタイムでプレビューしながら編集できるプラグイン「Inline Preview」が便利過ぎる！

WordPressで記事を書いている途中で、何度もプレビューをクリックしていませんか？

うめパパ

私は、何度もクリックしちゃいます...

っと言うのも、本ブログを始めて数日が経過したのですが、記事のレイアウトを調整するのに慣れていないこともあり何度もプレビューしちゃっています。

プレビューをする度に、キャッシュが残っていたりして上手く反映されないなど時々あり、ブラウザのシークレットモードで記事を作成したりしていました。

また、リロードするもワンクッション時間がかかる他、毎回ページ上部まで戻ってしまうので編集した箇所までスクロールして確認するなど、１記事作成するのにすごく時間がかかり、何度も確認すること自体がめんどくさい！ってなっていました。

ブログ全体の雰囲気も含めて確認しながら記事の編集ができたら便利ですよね。

そこで、リアルタイムにプレビューが確認できる方法がないのかと調べていると、WordPressのプラグインでありました！

今回は「Inline Preview」についてレビューします！

うめパパ

設定はとても簡単です！超絶オススメですので、ぜひ導入してみてください！

「Inline Preview」について

Inline Previewは、投稿エディターのすぐ隣に、画面を分割してリアルタイムでプレビューを確認することができるプラグインです。

プラグインを有効化すると、左側は記事を編集する領域、右側がプレビュー画面にすることができます。

また、記事編集画面とプレビュー画面の境界線を左右にスライドすることができ、レスポンシブに対応したサイトであればパソコンやスマートフォンの表示に自動的に切り替わります。

デバイスを変えて確認したり、Chromeのデペロッパーツールで確認する手間も省けるため、地味ながらもすごく便利な機能です！

インストールと設定の手順

step
1インストールと有効化

• step.1

  WordPressプラグインディレクトリーで検索

  WordPressダッシュボードから「プラグイン」メニューの「新規追加」から、プラグイン追加画面右上の検索ボックスに「Inline Preview」と入力して検索します。

  




• step.2

  プラグインをインストール

  検索結果より「Inline Preview」を探して、「今すぐインストール」をクリックしてインストールしてください。




• step.3

  プラグインの有効化

  インストール完了後、「有効化」をクリックします。

step
2設定

• step.1

  詳細設定

  設定は不要です。プラグインを有効化するだけで機能します。

専用メニューと使用方法の確認

補足

これまで通りによるプレビュー画面で確認をしたい場合は、「Inline Preview」を利用していると投稿編集画面の「プレビュー」ボタンから確認することができません。

うめパパ

でも大丈夫！タイトル編集項目下部のパーマリンクをクリックすると、これまで通りのプレビューが確認できますよ♪

全画面でプレビューを確認する方法

パーマリンクをクリックすると、これまで通りの全画面でプレビューが確認できます。

うめパパ

編集した内容を確認する場合は、更新ボタンをクリックするのを忘れずに！

まとめ

今回はリアルタイムで投稿編集画面よりプレビューが確認できる「Inline Preview」についてご紹介しました！

似たようなプラグインはいくつか存在するのですが、「Inline Preview」はリアルタイムにプレビューが表示できるだけでなく、プレビューの表示領域が変更でき、レスポンシブデザインに対応したサイトに順応して表示が自動的に切り替えられることが最大の利点です。

ショートコードにも対応しているので、サイト全体の雰囲気を掴みながら記事を編集することができるのは嬉しいですよね！

何度もプレビューを確認しながら、記事を編集しがちな方はぜひ導入してみてください。