クラシック エディターを使用した際に、ブロックが確実に正しい順序でモバイル端末に表示されるようにします。

クラシック エディターでは、Squarespaceのレスポンシブ デザインにより、モバイル端末上でブロックが自動的に垂直に積み重ねられます。 これにより、サイトが読みやすくなり、訪問者がコンテンツを閲覧する際に画面をつまんで拡大したりスクロールしたりする必要がなくなります。

ブロックが思い通りに積み重ならない場合は、このガイドと動画のシナリオを使用してブロックを動かすことができます。 どのデバイスでも見栄えの良い理想的なデザインに辿り着くまでレイアウトを改良していくには、サイトをプレビューして様々なデザインを試すのが最善の方法です。

このガイドでは、すべてのバージョン7.0サイトとバージョン7.1サイトの特定のエリアで利用可能なクラシック エディターで追加されたブロックの、モバイルでの動作について説明します。創造エディターを使用している場合は、コンピューターとモバイルのレイアウトを個別に調整します。 サイトの各エリアで使用しているエディターの種類が分からない場合は、「創造エディター、Squarespaceの最新のコンテンツ編集エクスペリエンスである」をご覧ください。

動画を見る

モバイル ビューでの列のレイアウト

ブロックが垂直に積み重なりページの幅全体を占めている (両端にブロックがない) 場合は、モバイル端末でも垂直に積み重なり、コンピューター上でのページ レイアウトが維持されます。

他のブロックの左側または右側にブロックを追加すると、列が作成されます。 ページに列がある場合、モバイル端末上では最初の列の下に2列目、3列目、および追加の列が配置されます。つまり、モバイルでは水平方向から垂直方向に列の配置が調整されます。

以下に例をあげます。

• 3つの画像ブロックを横一列に並べると、モバイルでは左から右の順番にスタック表示されます。
• 3つの画像ブロックが一列に並んでおり、それぞれの画像ブロックの下に各画像を説明するテキスト ブロックがある場合、モバイル ビューでは各画像ブロックの下に関連するテキスト ブロックが配置され、その後に次の画像が表示されます。この動作については、上の動画を参照してください。

次の例外に注意してください。

• スペース調整ブロックは、すべてのバージョン7.1サイトとほとんどのバージョン7.0サイトでは、モバイル上で自動的に非表示になります。

• テキスト ブロック内にフロートしているブロック (テキストで囲まれた画像など) は、モバイル ビューではテキスト ブロックの上に表示されます。 モバイル ビューでブロックがテキストの上に誤って表示される場合は、テキスト内でフロートしないようにブロックを移動します。

より複雑なレイアウトのモバイル ビュー

一部のエリアの列サイズが他のエリアと異なるレイアウトでも、モバイルでのブロックの表示順序を制御できます。

ブロックを追加すると、ブロックの順序を示すガイドラインが表示されます。 ガイドラインが隣のブロックの長さと一致する場合、すべての画面でこの2つのブロックをグループ化する必要があると、Squarespaceは理解します。

ブロックが別のブロックに積み重なった状態にしておくには、ガイドライン (水平線) がもう1つのブロックの長さと一致したときにブロックをドラッグ&ドロップします。

この動作については、上の動画を参照してください。

その他のヘルプ

• サイトがモバイルでどのように表示されるかをプレビューするには、端末別プレビューを使用します。 サイトの見え方はデバイスによって微妙に異なるため、ご自身のモバイル端末で試しにサイトを表示してみる方法もおすすめです。
• モバイルでサイトがどのように表示されるかをさらに詳しく把握するには、Squarespaceアプリでサイトを編集してください。