いつもKARTE Blocksをご活用いただきましてありがとうございます。

ブロックタイプ「コード」を選択したHTMLの置き換えがより直感的にできるようになりました。このページでは、具体的な変更点について説明させていただきます。

どのように変わるのか？

変更前

今までは、下記のようにブロックエリアで設定したCSSセレクタに該当するHTMLの内、中身を取り囲む親要素は置き換え対象に含まれていませんでした（innerHTMLプロパティを採択）。

ブロックエリアで設定したCSSセレクタに該当するHTML

<div class="items">
  <p class="item">A</p>
  <p class="item">B</p>
  <p class="item">C</p>
  <p class="item">D</p>
  <p class="item">E</p>
</div>

ブロック編集時に置き換えができるHTML

<p class="item">A</p>
<p class="item">B</p>
<p class="item">C</p>
<p class="item">D</p>
<p class="item">E</p>

サンプルケース

例えば、KARTE Blocksのサービスサイトのファーストビューのボタンの色を変更するケースを考えます。拡張機能を使って実際のページ上で該当のブロックを選択し、セレクタを登録します。

null

実際のHTMLは下記になりますので、ここの<a>タグにclassを追加し、CSSタブにCSSを記述すればボタンの色を変えることができそうです。

null

ただ、現状、ブロックスの管理画面から置き換えができるHTMLは上記の通り親要素を含まないので、下記になります。

null

この場合、<a>タグにclassをつけることができないので、設定する場合は、このボタンを含むHTML要素をブロックエリアとして指定しなければならず、直感的ではありませんでした。

変更後

変更後は、下記のようにブロックエリアで設定したCSSセレクタに該当するHTMLの内、中身を取り囲む親要素も含む形で置き換えができるようになります（outerHTMLプロパティを採択）。

ブロックエリアで設定したCSSセレクタに該当するHTML

<div class="items">
  <p class="item">A</p>
  <p class="item">B</p>
  <p class="item">C</p>
  <p class="item">D</p>
  <p class="item">E</p>
</div>

ブロック編集時に置き換えができるHTML

<div class="items">
  <p class="item">A</p>
  <p class="item">B</p>
  <p class="item">C</p>
  <p class="item">D</p>
  <p class="item">E</p>
</div>

これにより、先ほどサンプルケースで紹介したボタンの色変更も、直感的に対応できるようになりました。

また、この仕様変更に伴い、HTMLタブ内で親要素を含むHTMLは1つしか記述できなくなりました。親要素のHTMLを2つ以上記述した場合は、下記のようにエラーが表示され、ブロックの配信ができません。

null

OKなケース

<div class="items">
  <p class="item">A</p>
  <p class="item">B</p>
  <p class="item">C</p>
  <p class="item">D</p>
  <p class="item">E</p>
  <!-- 子要素内の追加はOK -->
  <p class="item">F</p> 
  <p class="item">G</p>
</div>

NGなケース

<div class="items">
  <p class="item">A</p>
  <p class="item">B</p>
  <p class="item">C</p>
  <p class="item">D</p>
  <p class="item">E</p>
</div>
<!-- 親要素自体の追加はNG -->
<div class="items">　
  <p class="item">A</p>
  <p class="item">B</p>
  <p class="item">C</p>
  <p class="item">D</p>
  <p class="item">E</p>
</div>

仕様変更の対象は？

既に設定しているブロックについては、原則変更前の仕様のままとなります。下記のケースの場合、変更後の仕様が適用されます。

  1. 「置き換えブロックの追加」から新規でブロックを作成し、ブロックタイプ「コード」を選択した場合
  2. 既に設定しているブロックのブロックタイプを「（旧）コード」から「コード」に変更した場合

2.について補足します。既に設定しているブロックについては、下記の通り、「（旧）コード」というブロックタイプが設定されています。

null

このブロックタイプを「（旧）コード」から「コード」に変更すると、変更後の仕様が適用されます。また、ブロックタイプを「コード」に変更して、「保存して配信」を押すと、以降は「（旧）コード」は表示されずに「コード」のみが表示されます。

null