エディターの仕様をより使いやすくアップデートしました。

大きな変更点について解説します。

レスポンシブ切り替えボタンに背景色がつきました。

レスポンシブ設定をした場合、切り替えボタンと同色の背景色が右パネルの設定項目のラベルにも表示されます。そのため、PC版と別の値が設定されていることが一目でわかるようになりました。

また、ラベルにマウスをホバーした際に表示される✖ボタンを押下すると、その値に設定しているレスポンシブ設定がクリアされます。

→レスポンシブ設定方法についてはこちら

これまでスタイル/設定の二つに分かれていた右パネルを一つに統一しました。

設定パネルはスタイルパネルに統合され、設定パネルの中にあった項目は「エレメント名」の設定項目内に移動しています。

(before)

(after)

左パネルから画像/動画パネルが削除されました。画像/動画パネルは右パネルの設定から開くポップアップとして開くようになっています。画像の設定を選択すると画像パネルが開き、動画の設定を選択すると動画パネルが開きます。これまで通り、ポップアップの上に画像/動画をドラッグ＆ドロップするか、アップロードボタンから選択することでアップロードすることができます。

各設定値の入力がこれまで値は変更直後に反映されていましたが、Enterキーを押下するか入力フォームからフォーカスを外すことで反映するように変更しました。これは変更途中の値が反映されないようにするための変更になります。

また、各インプットの単位（px/%等）のメニューがこれまではクリックすることで開いていましたが、マウスをホバーするだけで開くように変更しました。また、入力フォームに直接単位を入力し、Enterキーを押下することでメニューから選択しなくても単位を変更できるようになりました。

バックグラウンド/ボーダー・角丸/シャドウ/オーバーフロー/表示が別の設定項目として分かれていましたが、「スタイル」という設定項目に統合しました。また、バックグラウンド・ボーダー・シャドウの各設定値はポップアップ内で設定するよう変更しました。また、バックグラウンドのグラデーションの設定についても、ポップアップ内で切り替えて設定できます。

同様にテキストシャドウ/リンクカラーをタイポグラフィ内に移動しました。

こちらの設定値もポップアップ内で設定することができます。

アニメーションのOpacity/Transformの設定をひとつに統合しました。

こちらもポップアップ内で各設定値のbefore/afterを設定できます。

左側に設定した値から右側に設定した値へとアニメーションします。

前述の通り、画像/背景動画の設定が「左パネルのメディアパネルで選択」から「右パネルから開くポップアップで選択」に変更しました。赤枠をクリックするとポップアップが表示され、その中の画像をクリックすることで画像を選択できます。