スマートフォンとタブレットで見やすいサイトにする
タブレットとスマートフォンでのストアの見え方を確認し、小さな画面ではブロックを非表示にしたり、特定の画面サイズだけブロックの位置を調整したりできます。
買い物客の多くはスマートフォンでストアを訪れるため、ページはどのサイズでも使いやすくなければなりません。デザインは一度作るだけで、Payly がタブレットとスマートフォン向けにページを調整します。この記事では、自動で行われる調整の内容と、小さな画面でブロックの動作を変えたいときの方法を説明します。
レイアウトが調整される仕組み
ブロックは、固定のピクセル位置ではなく、12列のグリッドのセルに配置されます。そのため、小さな画面でも重なることはありません。ページは、次の2つの幅でレイアウトが切り替わります。
- タブレット（幅が1024ピクセル未満の画面）では、同じグリッドが使われます。タブレット向けに移動しない限り、ブロックは元の位置のままです。
- スマートフォン（幅が760ピクセル以下）では、すべてのブロックがそれぞれ1行を使い、全幅で表示されます。ブロックは、デスクトップで読む順序、つまり上から下、次に左から右の順に、上から下へ積み重なります。
ブロックによっては、さらに調整されます。ヘッダーのリンクはメニューボタンの中にまとめられ、グリッドは1列になり、ギャラリーとロゴの並びは2列で表示されます。その結果、特別な設定をしなくても、スマートフォンで問題なく使えるストアになります。
画面サイズを切り替える
- エディタの上部バーで、タブレットまたはモバイルをクリックします。ページの幅が狭くなり、そのサイズでの見え方が表示されます。
- 読みにくい部分がないか、ページ全体を確認します。通常どおりスクロールしたり、ブロックを選択したりできます。
- デスクトップをクリックすると、フルサイズのレイアウトに戻ります。
これらのボタンは、プレビューだけでなく、どのレイアウトを編集するかも選びます。タブレットまたはモバイルに切り替えると、変更がそのサイズにだけ適用されることを知らせるメッセージが表示されます。そこで行った変更は、デスクトップのレイアウトには影響しません。
小さな画面でブロックを非表示にする
大きな写真や、長い装飾的なブロックは、スマートフォンでは窮屈になることがあります。小さな画面では非表示にして、デスクトップでは表示したままにできます。
- 上部バーでモバイル（またはタブレット）をクリックします。
- ブロックを選択します。
- 設定パネルでサイズと位置を開きます。
- モバイルで非表示にする（またはタブレットで非表示にする）をオンにします。そのブロックはその表示から消え、公開されたページに空白は残りません。
タブレットで非表示にしたブロックは、モバイルを表示しているときにスイッチをオフに戻さない限り、スマートフォンでも非表示になります。ブロックをすべての画面で非表示にするには、デスクトップでこのブロックを非表示にするを使います。
特定のサイズだけブロックの配置を変える
- 上部バーでタブレットまたはモバイルを選びます。
- ブロックを選択し、サイズと位置を開きます。
- 開始する列、列の数、開始する行、行の数を変更するか、幅いっぱいに広げるをクリックします。ページ上でブロックをドラッグしたり、サイズを変えたりすることもできます。
サイズと位置の上部にあるバーには、編集中のレイアウトが表示されます。ブロックが大きいサイズのレイアウトに従っている間は継承中と表示され、ブロックに独自の設定ができるとリセットボタンが表示されます。リセットをクリックすると、ブロックはもう一度大きいサイズのレイアウトに従います。このレイアウトをすべての画面で使うをクリックすると、現在のレイアウトがすべてのサイズにコピーされます。
上部バーには、デスクトップのレイアウトと異なるブロックの数も表示されます（例：モバイルで 1 個のブロックが異なります）。この数をクリックすると、該当するブロックへ順に移動できます。
すべての画面でブロックを同じにする
サイズと位置ですべての画面で同じをオンにすると、ブロックはどこでも1つのレイアウトになります。タブレットやスマートフォン向けの設定があった場合は削除され、以降の編集はすべてのサイズに同時に適用されます。
補足：ブロックを別のセクションに移すと、すべての画面サイズで変更されてしまうため、Payly ではデスクトップでのみ許可されています。スマートフォンで別の位置に配置したい場合は、ブロックを両方のセクションに追加し、それぞれのサイズで不要なほうを非表示にしてください。
結果を確認する
プレビューを使うと、スマートフォンとタブレットの幅でページを順に確認できます。ストアを告知する前に、公開されたストアを実際のスマートフォンでも確認してください。公開前にサイトをプレビューするをご覧ください。