はてなブログ開発ブログ

はてなブログからの公式のお知らせを発信します。

編集中の記事を別のウィンドウでプレビューできるようにしました。大きな画面で仕上がりを確認でき、プレビューしながらの修正もしやすくなっています

はてなブログでは、記事編集画面の「プレビュー」タブに、新しいウィンドウでプレビューを表示する機能を追加しました。

記事がどのように公開されるのかを確認する際に、これまでは「プレビュー」タブの中で表示していました。今回の機能追加により、大きな画面で実際の公開状態に近い仕上がりを確認できるようになります。

プレビューウィンドウは「見たまま」「はてな記法」「Markdown」すべての編集モードに対応しています。

別のウィンドウでプレビューを確認・操作する方法

プレビューウィンドウを表示する

記事を編集している際に、編集画面で「プレビュー」タブの プレビューを新しいウィンドウで表示します ボタンを押すと、新しいウィンドウでプレビューを表示します。

プレビューを開始する様子
プレビューを開始する様子

プレビューウィンドウを更新する

プレビューウィンドウを表示中に「編集」タブで記事を修正したときには、再度「プレビュー」タブで 別ウィンドウのプレビューを更新 ボタンを押すと、プレビューウィンドウの内容を最新の編集状態に更新できます。

プレビューを更新する様子
プレビューを更新する様子

プレビューを開始すると プレビューを新しいウィンドウで表示します ボタンは 別ウィンドウのプレビューを更新 ボタンに変わります。

プレビューウィンドウを終了する

プレビューを確認したら、「プレビュー」タブに表示されている「プレビューウィンドウを閉じる」ボタンを押すと、別ウィンドウでのプレビューを終了します。

プレビューを終わる様子
プレビューを終わる様子

はてなブログのプレビューに関して

はてなブログでは「プレビュー」タブ内でのプレビューのほか、はてな記法とMarkdownの各モードで、記法をリアルタイムにチェックできる「リアルタイムプレビュー」を公開していました。

今回は、リアルタイムではありませんが、すべての編集モードで利用でき、大きなウィンドウで表示を確認できます。さらに、編集画面とプレビューが別ウィンドウになったことによって、プレビューを確認して編集画面で記事を修正し、またプレビューを更新して確認するといった作業がしやすくなっています。

どうぞご利用ください。