SAMPLE IMAGE この画像は差し替えてご利用ください

017 プレビュー

ホームページを編集している途中で、実際にどのように表示されるかを確認するときに使います。

017-1 プレビュー(テスト表示)

プレビューとは

プレビュー」とは、表示確認を行うことです。

編集中のホームページがパソコンの画面のほか、スマホの縦向き画面、横向き画面でどのような見た目で表示されるかを確認できます。

独自レイアウトスマホ表示プレビュー

独自レイアウトのスマートフォンでの表示のプレビューは、ここで示す方法はとれない。独自レイアウトのスマートフォンでの表示のプレビューは、029 スマホ表示のページを参照する。

➊ [プレビュー] をクリックする

1)編集ページ最下端右側にある[プレビュー]テキストリンクをクリックする

jdg01_18:「プレビュー」テキストリンク
jdg01_18:「プレビュー」テキストリンク

プレビュー]のテキストリンク

[プレビュー]のテキストリンクは、Jimdo にログインしているときに表示される。ログインしていないと、このリンクは表示されない。

2)あるいは、管理メニューの[プレビュー]ボタンをクリックする

jdg01_19:トップバーにある「プレビュー」アイコン
jdg01_19:トップバーにある「プレビュー」アイコン

3)プレビュー画面になり、編集中のページが、デスクトップ用のプレビュー画面で表示される。

jdg01_47:デスクトップ用のプレビュー画面
jdg01_47:デスクトップ用のプレビュー画面

レスポンシブデザインでないレイアウトは、デスクトップビューのみ

レスポンシブレイアウトに対応していないレイアウトは、デスクトップビューのみで、スマホの縦や横のビューは表示できない。

4)スマホ(縦向き)のプレビューへ切り替え表示する。

jdg01_48:スマホ(縦向き)プレビュー画面
jdg01_48:スマホ(縦向き)プレビュー画面

5)スマホ(横向き)プレビューへ切り替え表示する。

jdg01_49:スマホ(横向き)プレビュー画面
jdg01_49:スマホ(横向き)プレビュー画面

プレビュー画面上端に「← 編集画面に戻る」と、「閲覧」とが表示されます。「閲覧」をクリックすると、従来のように、黒い帯の無いページの表示を確認できます。

jdg01_51:プレビュー画面で[← 編集画面に戻る]と[閲覧](2019/11/19)
jdg01_51:プレビュー画面で[← 編集画面に戻る]と[閲覧](2019/11/19)

➋ 編集画面に戻る

1)「 編集画面に戻る」をクリックして、編集画面に戻る。

jdg01_20:「編集画面に戻る」
jdg01_20:「編集画面に戻る」

2)あるいは、ページ一番下にある[編集]をクリックする。

jdg01_20:編集に戻る
jdg01_20:編集に戻る

3)ホームページ編集画面が表示されます。

017-2 編集とプレビューを別タブで表示する

タブ表示ができるブラウザでホームページの編集を行う場合、編集画面とプレビューをそれぞれ別々のタブで表示しておくと便利です。

➊ 編集画面とプレビューを両方表示する

編集画面下部で「プレビュー」を右クリック()し、「新しいタブで開く」を選ぶ()と、プレビューを新しいタブで表示することができます。

jdg012_06:「プレビュー」ボタン
jdg012_06:「プレビュー」ボタン

➋ タブを切り替える

編集する時とプレビューする時はタブをクリックして表示を切替えます。

jdg012_07:タブを切り替えて表示する
jdg012_07:タブを切り替えて表示する

➌ プレビューでの再読み込み

ブラウザで編集内容が反映されていない時は「再読み込み」ボタンをクリックすると、編集を更新したプレビューが表示されます。

jdg012_08:再読み込みボタン
jdg012_08:再読み込みボタン

プレビュー画面で、「編集」や「ログアウト」を行わないように!

プレビュー画面を閉じるには、タブにある閉じる(✕)をクリックして閉じること。