unitone v15.8.0 をリリースしました

unitone v15.8.0 の概要

機能追加

  • セクション区切りの設定に「コンテンツのトリミング量」の設定を追加
  • セクション区切り(下部)の「種類」の選択肢に「スペースを拡張」を追加
  • フォント「Cormorant Garamond」を追加
  • グローバルスタイルに新しいカラーパレットを追加

変更

  • グルーバルスタイルからカラーパレットを削除(Asia、Evening、Glasslands、Ice lake、Refined、Soft light)

不具合の修正

  • セクション区切りを設定している場合、(svg 画像の)404 が発生することがある不具合を修正
  • レスポンシブグリッドブロックで「階段グリッド」を設定したとき、レスポンシブグリッドブロックのパディングが意図しない値になることがある不具合を修正

セクション区切りの設定に「コンテンツのトリミング量」の設定を追加

これまでは、セクション区切りを設定した場合、指定した「レベル」の分だけコンテンツがトリミングされていました。例えば下記の場合、赤いセクションブロックにセクション区切りが設定されていますが、ブロックの右側のほうをみると、セクションがトリミングされているのがわかると思います。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

これで良い場合は良いのですが、「コンテンツは一切削らずにセクションを区切りたい」ということもありますよね?ということで、「コンテンツのトリミング量」も設定できるようにしてみました。下記はコンテンツのトリミング量を0(一切トリミングしない)に変更した場合のサンプルです。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

セクション区切り(下部)の「種類」の選択肢に「スペースを拡張」を追加

そうすると、今度は緑色のセクションブロックのほうが、赤いセクションブロックに侵食されてトリミングされちゃってるのが気になりますよね。

ということで、セクション区切り(下部)の「種類」の選択肢に「スペースを拡張」を追加しました。これを選んで後続のブロックのセクション区切りの設定値と同じ値を設定すると、下のブロックからトリミングされる分のスペースを追加して、トリミングされていないように見せることができます。

下記は赤いセクションブロックのセクション区切りが「レベル:100」「コンテンツのトリミング量:50」なので、緑色のセクション区切りを「スペースを拡張」にして、赤いセクションブロックと同じ設定値である「レベル:100」「コンテンツのトリミング量:50」に設定したサンプルです。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

フォント「Cormorant Garamond」を追加

安定して使えるセリフ体があったほうがデザインがよりしやすくなるかなと思って、Cormorant Garamond を追加してみました。

Lorem ipsum dolor sit amet, consectetur adipisicing elit

グルーバルスタイルから既存のカラーパレットを削除し、新しいカラーパレットを追加

既存のカラーパレット(Asia、Evening、Glasslands、Ice lake、Refined、Soft light)があまりにも実際には使われなさそうなものだったので、実際に現場でもよく使用されるであろうカラーパレットに刷新しました。

「デフォルト」以外は、各色毎の6段階のカラーバリエーションと、3段階の白透過・3段階の黒透過のバリエーションは追加されません。追加されている色を消すのはコードを書かないといけず面倒だろうという判断でそうしたのですが、あったほうが便利という意見が多ければ、他のカラーピッカーにも追加しようと思うので、ぜひご意見ください!

デフォルト
ライト
ライト:ブルーベース
ライト:レッドベース
ライト:イエローベース
ペールグレー
ペールグレー:ブルーベース
ペールグレー:レッドベース
ペールグレー:イエローベース
ダーク
ダーク:ブルーベース
ダーク:レッドベース
ダーク:イエローベース
inc2734のアバター

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です