クラシック エディターを使用してモバイルでブロックを積み重ねる方法

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

最終更新日 2024年8月08日

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

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

この機能へのアクセス

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

動画を見る

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

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

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

以下に例をあげます⁠。

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

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

  • スペ⁠ース調整ブロ⁠ックは⁠、すべてのバ⁠ージ⁠ョン7⁠.1サイトとほとんどのバ⁠ージ⁠ョン7⁠.0サイトでは⁠、モバイル上で自動的に非表示になります⁠。
  • テキスト ブロ⁠ック内にフロ⁠ートしているブロ⁠ック (⁠テキストで囲まれた画像など⁠) は⁠、モバイル ビ⁠ュ⁠ーではテキスト ブロ⁠ックの上に表示されます⁠。モバイル ビ⁠ュ⁠ーでブロ⁠ックがテキストの上に誤⁠って表示される場合は⁠、テキスト内でフロ⁠ートしないようにブロ⁠ックを移動します⁠。

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

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

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

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

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

move_text_block_under_image_block.png

move_text_block_under_image_block.png

その他のヘルプ

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

  • 高度なカスタマイズについて⁠、コミ⁠ュニテ⁠ィからサポ⁠ートを受けられます⁠。

  • Squarespace Expertを雇う

  • 経験豊富なデザイナ⁠ーや開発者から力を借りて⁠、オンラインで目を引くサイトを構築しまし⁠ょう⁠。

クラシック エディターを使用してモバイルでブロックを積み重ねる方法