レスポンシブモードの使用方法

執筆者:

カテゴリ:

レスポンシブモードの使い方

バージョン4.0以降、編集中にデスクトップ、タブレット、モバイル端末(スマートフォン)の表示を切り替えることができるようになりました。これを「レスポンシブモード」と呼びます。レスポンシブモードでは、サイトが小さめのサイズに変更され、画面が小さいデバイスでどのように表示されるかをシミュレートできます。

制限された編集機能

タブレットまたはモバイル端末のビューでサイトを表示している間は、編集機能が制限されます。この状態で行える操作は以下のみとなります。

  • テキストの編集
  • テキスト書式設定ツールバーを使用したテキストスタイルの書式設定
  • 要素や行の一部のマージンの調整 *
  • タブレットまたはモバイル端末で行を非表示にする

* PBSは要素や行に一部のレスポンシブスタイルを適用するため、一部のマージンは調整できません。

以下は行うことができない操作です。

  • 要素の追加、削除、ドラッグ操作
  • 要素のプロパティの表示
  • 画像、アイコン、行、その他サイズ変更可能な要素のサイズ変更

特定の画面サイズ向けのマージン調整

タブレットまたはモバイル端末のビューでサイトを表示している場合、調整したマージンは、現在のビューおよびそれより小さいビューにのみ適用されます。これにより、完全なデスクトップ版とは別に、デザインを微調整して小さい画面で見栄えを良くすることができます。

わかりやすくするために例を挙げます。

  1. タブレットモードでサイトを表示し、見出しのマージンを調整した場合、その調整はタブレット画面にのみ適用されます。これはモバイル端末の画面にも適用されます。デスクトップモードに戻すと、元のマージンが復元されます。
  2. ここでモバイル端末モードに移動し、同じマージンをさらに調整すると、その調整はモバイル端末の画面にのみ適用されます。その後、デスクトップ、タブレット、モバイル端末でそれぞれ異なるマージンが設定されます。

これはマージンの調整にのみ適用され、テキストの変更やテキストスタイルの変更はすべての画面サイズに適用されます。

タブレットまたはモバイル端末サイズでコンテンツを非表示にする

タブレットまたはモバイル端末のビューで表示している場合、行にカーソルを合わせると新しい「目」のツールバーボタンが表示されます。これをクリックすると、現在の画面サイズで行の表示/非表示を切り替えることができます。

非表示になった行は編集中に少し半透明になり、編集完了時に非表示になることが示されます。

この機能は行でのみ利用可能ですのでご注意ください。