ブロックの追加、移動、サイズ変更
ドラッグまたはクリックでページにブロックを追加し、12列のグリッド上で移動、サイズ変更、複製、削除する方法を説明します。
ブロックは、見出し、テキスト、ボタン、画像、商品グリッドなど、ページを構成する部品です。ブロックパネルから追加して好きな場所にドロップし、端をドラッグしてサイズを変えます。
ブロックの配置のしくみ
ページの各セクションは、12列のグリッドになっています。ブロックは、このグリッドの1列以上、1行以上を占めます。ブロックをドロップしたりサイズを変えたりすると、グリッドに吸着するため、要素がきれいにそろい、スマートフォンでもページがきれいに並び替わります。ピクセル単位で正確な位置を指定する必要はありません。
ブロックはセクションの中に置かれます。ブロックを追加するには、ページにセクションが少なくとも1つ必要です。
ブロックを追加する
ブロックの追加方法は2つあります。
ページにドラッグする
- 左のブロックパネルで、使いたいブロックを探します。グループは基本、メディア、レイアウト、ストア、マーケティング、メニューとフォームです。
- ブロックを押したままにして、ページへドラッグします。
- ポインターをセクションの上に移動します。薄い色の列が表示され、青いボックスで、ブロックが置かれる位置と大きさがはっきり示されます。
- マウスのボタンを離します。ブロックがボックスの位置に表示されて選択状態になり、右側に設定が開きます。
メモ:ブロックは空いている場所にドロップしてください。ほかのブロックがすでに使っている場所にドロップすると、2つのブロックが重なります。その場合はCtrl + Zキーで元に戻すか、新しいブロックを別の場所へドラッグしてください。
クリックする
ブロックパネルのブロックをクリックすると、選択中のセクションの一番下に追加されます。何も選択していない場合は、ページの最後のセクションに入ります。ページを上から順に作るには、これが最も手早い方法です。
ブロックを選択する
ページ上のブロックをクリックします。ブロックに青い枠線と2つの青いサイズ変更ハンドルが表示され、横に3つのボタン（複製、回転、削除）がある小さなツールバーが現れます。右側の設定パネルが、そのブロックの設定に切り替わります。
ブロックを移動する
- ブロックを押したままドラッグします。ブロックの小さなコピーがポインターについてきます。
- 青いボックスで、置かれる位置を確認します。
- マウスのボタンを離します。
ブロックは、別のセクションや、コンテナーやグリッドの中へもドラッグできます。ブロックを別のセクションに移動できるのはデスクトップ表示のときだけです。すべての画面サイズでブロックが変わるためです。
ブロックのサイズを変更する
- ブロックをクリックして選択します。
- 右端のハンドルをドラッグすると、列の数（幅）が変わります。下端のハンドルをドラッグすると、行の数（高さ）が変わります。
- マウスのボタンを離します。
数値でサイズと位置を設定する
正確に指定したいときは、ドラッグの代わりに設定パネルを使います。
- ブロックを選択します。
- 設定パネルでサイズと位置をクリックして開きます。
- マイナスとプラスのボタンで、開始する列、列の数、開始する行、行の数を変更します。
同じグループには、次の追加機能もあります。
- 幅いっぱいに広げるは、ブロックを、それを含む領域のすべての列にわたって広げます。
- このブロックを非表示にするは、ブロックを非表示にします。タブレットとモバイルの表示では、このスイッチはその画面サイズでのみブロックを非表示にします。スマートフォンとタブレットで見やすいサイトにするを参照してください。
- すべての画面で同じは、デスクトップ、タブレット、スマートフォンで、ブロックのレイアウトを1つに統一します。
- 微調整には、回転、横へずらす、下へずらすのスライダーがあります。これらは、グリッド上の位置を変えずにブロックを見た目だけ傾けたりずらしたりするため、周囲の要素は動きません。スライダーの横にある小さなxで、値が0に戻ります。ブロックのツールバーの回転ボタンをブロックの周りでドラッグして回転させることもできます。まっすぐな位置に吸着し、Shiftキーを押しながらドラッグすると15度ずつ吸着します。
ヒント:選択したブロックはキーボードでも移動できます。Ctrl + 矢印キーで1グリッドマスずつ移動し、Ctrl + Shift + 矢印キーで幅または高さが1マスずつ増えます。すべてのショートカットはエディタの概要を参照してください。
ブロックを複製または削除する
- 複製するには、ブロックを選択してツールバーの複製をクリックするか、Ctrl + Dキーを押します。コピーは元のブロックのすぐ下に表示されます。
- 削除するには、ブロックを選択してツールバーの削除をクリックするか、Deleteキーを押します。設定パネルの管理を開き、そこで複製または削除をクリックすることもできます。
ブロックを削除するときに、確認は表示されません。誤って削除した場合は、上部のバーの元に戻すをクリックしてください。