サイズ調整機能を追加！ブロックの隙間が無くなりました

ブロックの幅や余白を設定できるサイズ調整機能を追加しました。
ブロック間の隙間がなくなるなどその他の変更点についても説明します。

まとめ：何ができるようになったのか

　スマホで余白を変えられる

「サイズ」ボタンを押し、持ち手を動かして余白（マージン）を調整できます。スマホ操作にも対応しました。

　横幅の異なるコンテンツを設置できる

グループ（ブロック群）ごとに横幅を変更可能になりました。
ページ内に異なる横幅のコンテンツを混在させられます。

　ブロックの隙間をなくせる

ブロックの間にあった除去できない隙間がなくなりました。

サイズ調整機能

ブロックの幅や余白（マージン）を調整するための「サイズ」ボタンを新設しました。
「サイズ」ボタンはブロックとグループ（ブロック群）の2種類があり、ブロックの「サイズ」でブロックの余白と並列幅、グループの「サイズ」で横幅と上下の余白が変更できます。
注意）スマホでは左右の余白・並列幅・横幅は設定できません。

それぞれの余白・幅の変更について、新旧の比較を中心に説明します。

ブロックの余白（マージン）

旧ブロックの四隅と角をドラッグすることで、ブロックの余白を調整可能でした。
ドラッグできる持ち手の部分が小さく、操作がやりづらい、誤操作を招く、スマホで操作できないなど難点がありました。
↓
新ボタンを押してから調整する仕様に変更し、持ち手を大きくして、スマホでも操作が可能になりました。

注意）スマホでは上下のみ対応

並列ブロックの並列幅

旧余白と同様に、並列ブロックの間に持ち手があり、ドラッグして幅を調整可能でした。
↓
新ボタンを押してから調整する仕様（余白と同時設定）に変更し、持ち手を大きくして、操作しやすくなりました。
ボタンからリセットも可能です。

注意）スマホでは並列にならないので未対応

グループの横幅

旧ページ内の各ブロックの横幅は、デザインで選択した100％・80％・1000pxなどの値に固定されていました。
↓
新グループ（ブロック群）ごとに横幅を設定可能になりました。ページ内に様々な横幅のコンテンツを混在できます。
操作方法はブロックのサイズ設定と同様です。

注意）スマホでは横幅は固定されるので未対応

グループの余白（マージン）

旧グループの上下の余白は固定されていました。
↓
新グループの上下の余白が設定可能になりました。
装飾を使わずにグループの間隔をサクッと調整できます。スマホでの設定も可能です。操作方法はブロックのサイズ設定と同様です。

ブロックの隙間

旧各ブロックの間には除去できない隙間がありました。
↓
新各ブロックの間に隙間がなくなりました。
余白を消せば、背景色を完全に隣接させることが可能です。

ブロックの追加ボタンの変更など、その他の影響

2020年12月から仕様変更に着手し、長期間の開発となりました。
これまでのシステム更新でも最大規模と言えます。

上記で説明した、幅・余白・隙間に関する更新ですが、これにより副次的な更新がありました。以下で新旧の比較を中心に説明します。

追加ボタン

旧ブロック追加用の「＋」ボタンは、主に除去できない隙間に設置していました。
↓
新隙間がなくなり、ほとんどの「＋」ボタンはブロックの上に重ねて設置しています。

スマホでの余白（マージン）の扱いが変わりました

旧グループの背景に設定した余白（マージン）は、スマホ表示の際に無効化されていました。
↓
新スマホ表示でもグループの背景に設定した余白は有効です。

ページの表示速度UP

複雑な並列表示が可能なようにHTMLタグの多重構造を利用していますが、これを効率化し、構造がシンプルになりました。
ページの表示速度が改善する効果が期待できます。

旧エディタを使う

システム更新前の編集機能が以前として利用可能です。
ページ編集時に、下部の「旧エディタ」をチェックすることで利用できます。
この場合、サイズ機能は利用できません。

今回のシステム更新により、ページ内容の配置が変わってしまう可能性があるページは、旧エディタに強制変換されています。ご了承願います。

並列内に並列を内包するのは旧エディタでのみ可能ですが、現在の仕様では「入れ子ブロック」で実現が可能です。旧エディタをやめる際には、「入れ子ブロック」が有効な場合があります。

2021/2/19