unitone v15.7.0 の概要
機能追加
- セクションブロックにセクション区切りを設定する機能を追加
- セクションブロックに「背景画像」を設定する機能を追加
- セクションブロックに「枠線」を設定する機能を追加
- スイッチャーブロックでグループ化・グループ解除できる機能を追加
不具合の修正
- レスポンシブグリッドブロックの「階段グリッド」が
display: noneな要素には適用されないように修正 - 「流体タイポグラフィ」が有効化されている要素が表示されるとき、行間が縮まる様子が一瞬見えることがある不具合を修正
セクションブロックにセクション区切りを設定する機能を追加
セクションの上下を斜めにしたり波型にしたりできる機能を追加しました。
区切りを正しく表示させるためには、背景色・あるいは背景画像の設定が必要です。
上下それぞれで、区切りの種類、レベル（深さ）、サイズ（水平に伸縮）、水平位置を設定できますが、上側については「前のブロックに重ねる」も設定できます。
セクション区切りはセクションブロックを「図形でマスクする」形で実装しているので、そのままだと前のブロックとの間に空白が見えてしまいます。「前のブロックに重ねる」を有効化すると、区切りの高さ分にあわせて前のブロックとの余白が詰まります。
ということで以下サンプル。
もしかしたら今後変えるかもしれないこと…
セクション区切りはセクションブロックを「図形でマスクする」形で実装していると書きましたが、これフロントでは別に良いんですけど、エディターではちょっとした問題があります。エディターではブロックを選択したらブロックのまわりに青いアウトラインが表示されるのですが、それごとマスクでトリミングされちゃうからアウトライン線が見えなくなっちゃうんですよね。
他のブロックではちゃんとアウトラインが見えるのに区切りを設定したセクションブロックだけアウトラインが見えないのは気持ちわるいので、例えば div 要素（ブロックではなくてあくまで HTML の話）を1つ追加して、背景色・背景画像・枠線は一つ内側の div 要素につくようにして、それをマスクするようにすると。そうすれば、アウトラインは一番外側の要素はマスクされないから問題はなくなるなーと。
入れ子が変わってしまうから CSS を書いている人には影響がでるかもしれないのと、実装が結構ややこしくなるからどうかなーということで、とりあえずはやらなかったのですが、もしきれいにやれる方法が思いついたら今後変更を入れるかもしれません。
セクションブロックに「背景画像」を設定する機能を追加
これまでセクションの背景に画像を入れたときはレイヤーブロックを使って画像ブロックとセクションブロックを重ねてくださいと案内していましたが、背景画像ありのセクションにセクション区切りを設定してきれいに区切るためには、セクションブロック自体に背景画像が設定できるようにする必要があります。
せっかくなら背景画像ありのセクションもきれいに区切りたいので、今回のアップデートでセクションブロックに背景画像を設定する機能を追加しました。
以下サンプル。
セクションブロックに「枠線」を設定する機能を追加
シンプルに「枠線」（border）が設定できるようになりました。
ただ、セクション区切りを実現するための「マスク」は枠線もトリミングしてしまうので、枠線をそのマスクの形に合わせてきれいに描画するみたいなことはできません…。なので枠線とセクション区切りは基本的には同時には設定しないのがおすすめです。
コメントを残す