ブロックにブロックを内包!入れ子構造の自由配置ブロック

「文章」「画像」といったページ内容の最小単位「ブロック」を入れ子構造で内包できる自由配置ブロックをリリースしました。
ブロック内に複数のブロックを自由に配置できるので、レイアウトの可能性が飛躍的にアップしました。
ここでは、自由配置ブロックの特徴と使い方を説明します。

自由配置ブロックとは?

まめわざのコンテンツは「文章」「画像」といった種類別のブロックで構成され、各ブロックは縦列・並列など様々な配置が可能です。

今回リリースした自由配置ブロックは、ブロック内に複数のブロックを配置できる入れ子構造です。
内包されたブロックは位置・サイズを自在に設定でき、重ねて配置することも可能です。
領域にはマス目があり、位置・サイズを合わせるのも簡単です。

内包されたブロックは通常のブロックと同様に編集・装飾が可能です。
また、自由配置ブロック内外との移動・複製の自由度が高く、手軽に利用できます。

利用例

のし風の「空白・区切り」の上に「画像」3枚

「画像」2枚の上に透過の「見出し」

Fruits

領域いっぱいの「画像」の上に枠線付きの「文章」

吾輩は猫である

透過の「空白・区切り」を3つ重ねて縦書き「文字」

吾輩は猫である
名前はまだない

画面サイズと配置

配置されたブロックの位置・サイズは、PC⇔スマホのように画面サイズ・表示域が変わった場合も、同じ割合で変動し維持されます。
一方、表示域の変動は文字サイズには影響がないため、文章の専有域は文章量に応じて変動します。
そのため、文章は意図しない配置になる場合があるので注意が必要です。
特に長文は読みづらくなる可能性が高く、自由配置ブロックとの相性が良くありません。

自由配置ブロックの使い方

新ブロックを追加した際に表示される「自由配置」で追加できます。

領域内に配置するブロックの位置やサイズを揃えやすいようにマス目が設定されます。
下部にある選択欄でマスの分割数を選べます。
マスは通常はブロックの移動・追加・サイズ変更時などに表示されますが「常時表示」をチェックして常に表示することもできます。

自由配置ブロック全体の高さは、同じく下部にある「全高」のボタンか、その上にあるバーで調整できます。

下部にある各種ブロック名を押し、領域内の追加したい場所を押すとブロックを追加できます。

ただし、一部のブロックは自由配置ブロック内に配置できません(下部にブロック名が表示されません)。

領域内に配置したブロックは、通常のブロックと同じようにメニューから編集・装飾・削除ができます。
「移動」ボタンを押しながらドラッグして領域内の任意の場所に移動できます。
ブロックは重ねることも可能なため、「最前面へ」「再背面へ」ボタンで重ね順を変更できます。

ブロックが領域からはみ出したり、重なって隠れている場合は、ブロックを押すと全体が表示されメニューが押しやすくなります。

上下左右についている枠により、ブロックのサイズを調整できます。

高さはブロックの内容によって自動で設定されますが、サイズ調整によって指定もできます。メニューの「高さ自動」を押せば高さはリセットされて自動に戻ります。

ブロック複製・移動

領域内のブロックは、メニューの「複製」を押してから領域内を押すと、押した場所にブロックを複製できます。
このとき、編集中の別の自由配置ブロックや、領域外の「+」、他ページの「+」にも複製が可能です。

領域外のブロックの「移動」「複製」を押してから、編集中の自由配置ブロック内を押すと、領域外から領域内にブロックを移動・複製できます。

また自由配置ブロック丸ごとの移動・複製も可能です。内包するブロックも全て複製されます。また、他ページへの複製にも対応しています。

2019/12/3