メインコンテンツにスキップ

【Editor 5.0】ライブプレビュー

ライブプレビューは、エディタでの編集内容をブラウザでリアルタイムに確認できる機能です。ライブプレビューURLの発行や削除手順、レスポンシブデザインの動作確認方法について解説します。

今日アップデートされました

ライブプレビューとは

ライブプレビューは、エディタでの編集内容をブラウザでリアルタイムに確認できる機能です。ライブプレビューのURLを社内メンバーなどと共有することで、リアルタイムの編集状況を伝えることができます。

ライブプレビューを表示する方法

  1. 画面右上の矢印ボタンをクリックします。

  2. ライブプレビューをまだ利用したことがない場合は、[スタート]をクリックします。


    ランダムなライブプレビューURLが自動で発行されます。
    (例:preview.Studio.site/live/{ランダムな文字列}/)

  3. パネル上のURLをクリックすると、ライブプレビューが表示されます。

ライブプレビューの表示について

注意: カスタムコードで加えた編集内容は、ライブプレビューには反映されません。

ライブプレビューでは、プレビュー画面であることを示す通知が画面右下に表示されます。

ライブプレビューでレスポンシブデザインを確認する方法

レスポンシブデザインをライブプレビューで確認する際は、ライブプレビューを表示しているブラウザのウィンドウ幅を調整してください。

エディタ上のブレイクポイント設定とライブプレビューの表示は対応していません。

例:タブレット用のレスポンシブデザインを確認したい

  • OK:PCでライブプレビューを開き、ウィンドウ幅を840px以内にする

  • OK:タブレット上のブラウザでライブプレビューを開く

  • NG:エディタのブレイクポイント設定を「タブレット」にした上で、ライブプレビューを開く

ラライブプレビューを共有する方法

  • URLを共有する

    [URLをコピー]をクリックすると、ライブプレビューURLをコピーできます。

  • QRコードを活用する

    表示されたQRコードを読み込むと、読み込んだデバイス上でライブプレビュー表示が可能です。スマホやタブレット上で確認する際に便利です。

ライブプレビューのURLを削除する方法

URLを削除すると、発行済みURLは利用できなくなります。再度URLを発行すると、新たなライブプレビューURLが生成されます。

  1. 画面右上の[ライブプレビュー]をクリックします。

  2. [ライブプレビューURLを削除]をクリックします。

Editro 5.0 サンプル テスト テスト表示

こちらの回答で解決しましたか?