KARTE Blocksにおけるページエディター機能を改修しました。デバイスのスクリーン幅やブラウザの解像度に合わせて最適な画像を表示する「レスポンシブイメージ」の設定が、さらに直感的に実施できるようになりました👏

複雑なレスポンシブイメージの設定も、コード編集いらず

レスポンシブイメージの設定方法は複数あり、それぞれの仕様や制限を理解することはハードルが少し高いかもしれません。

レスポンシブイメージの設定には以下の情報が必要です。 特に既存の画像要素から新しく設定するには、KARTE BlocksでもHTMLコードを編集して対応する必要がありました。

  1. 最適な画像を表示する基準・条件
  2. 画像候補

今回の改修で、レスポンシブイメージの設定もHTMLコード編集なく、簡単に実現できるようになりました。

  1. レスポンシブイメージが設定済みの場合、その内容をGUI上に表示・そのまま編集可能に
  2. 未設定の場合、簡単にレスポンシブイメージの設定へ切り替えが可能に
  3. 設定方法に誤りがあれば、アラートでお知らせ

レスポンシブイメージを正しく設定することで、エンドユーザーのサイト利用体験も向上するため、ぜひ積極的にご活用ください🚀

null

モダンなpictureタグでの設定にも対応

レスポンシブイメージの設定で、近年主流になってきているのがpictureタグを使った設定です。従来の画像要素（imgタグ）とは異なるHTML構造のため、設定方法も異なります。KARTE Blocksでの編集時にも同様にHTMLコードの編集が必要でした。

今回の改修でpictureタグを使ったレスポンシブイメージの編集もさらに直感的に。 画像候補が一目でわかり、画像の出し分けを行うための画面幅の条件（メディア条件）なども対応関係を確認しながらサクサク編集できます🚗

null

詳細な設定内容はサポートサイトもご覧ください。
https://support.karte.io/post/6ImhEKaqeulRecL4PwLmch