ご注意ください

この記事は、リニューアル後のKARTE Blocksに関する内容です。 現在ご利用のUIが旧バージョンの場合は、リニューアル前のサポート記事をご確認ください。

ブロックの変更方法の1つとして、ページには元々存在しないブロックを追加してコンテンツや導線を増やすことができます。
※ 基本的なブロックの編集方法や流れはブロックを編集するをご確認ください。

ページエディターで、ブロックを新しく追加する

手順

  1. プレビュー上で編集したいエリアをクリックする

  2. 変更方法を選択するメニューから、**［前に追加］または［後ろに追加］**をマウスオーバーする

  3. さらに表示される以下のメニューから作成方法を選び、クリックする

    1. ［選んだブロック］：プレビュー上でクリックしたエリアを複製し追加します

    2. ［ストアから］：ブロックストアからテンプレートを選択し追加します

    3. ［ライブラリから］：ライブラリからカスタムテンプレートを選択し追加します

  4. ブロックを編集し保存する

    • 追加する方法を選択したら、あとは通常のブロック編集時と同様に設定を進め、保存します。

「前にブロックを追加」「後にブロックを追加」の特徴 / 注意点

1つのエリアに対し、1回のみ追加が可能

1つの追加するエリアに複数のブロックを追加することはできません。
同じ場所に複数のブロックを追加したいような場合は、コードを編集して必要な要素を書き加えてください。

ブロックのコード編集の手順

  1. 追加したいブロックのコード（HTML / CSS / Script）を準備する

  2. ページエディターでブロックの追加を行う

    • プレビュー上でメニューを選び、ブロックの編集パネルを表示します。

  3. 右パネル上部の［コード］タブをクリックする

    • 右パネルがコードモードに変わります。

  4. コードを編集し、保存する

    • 1で準備したブロックのコード（HTML / CSS / Script）を記述し、HTMLコードの全体を1つの親要素（例： divタグなど）で囲って保存します（※後述の注意点をご確認ください）。

コード編集をする際の注意点

KARTE Blocksでは、一つのブロックは一つの親要素で構成する決まりがあります。
そのため、コード編集でHTMLを追記する際は、全体をdivタグやsectionタグなどで囲むなどの方法で、親要素が1つになるように記述してください。

ご注意ください

親要素が1つでない場合、エラーとなってHTMLコードを保存できません。 また、極端に文字数が多いと保存可能サイズを超過する場合があります。

⭕️ 保存できる： 親要素が1つになっている

<div>
  <div> あいうえお </div> // - 変更元のブロック
  <div> かきくけこ </div> // - 追加したいブロック
</div>

❌ 保存できない： 親要素が2つ以上になっている

 <div> あいうえお </div> // - 変更元のブロック
 <div> かきくけこ </div> // - 追加したいブロック

追加元の場所もブロックとして編集する方法

追加元のブロックエリアの仕様

ページにあるブロックエリアに対して、施策におけるパターンごとに、1つのブロックを配信することができます。
ブロックの編集方法は、「選択したブロック自体を編集する（もしくは非表示にする）」 もしくは「選択したブロックの前後にブロックを追加する」のいずれか一方から選べる仕様になっています。
前後にブロックを追加を選択すると、選択元自体の編集はできなくなります。

追加元を編集しながら、ブロックの前後追加を行う方法

上記仕様のため、追加元のブロックも編集したい場合は、以下の流れで実施します。

  1. 追加したいブロックのHTMLコードを準備する

    • 必要に応じてCSSやScriptもご準備ください。

  2. ページエディター画面のプレビュー上で編集したいブロックを選択する

    • 編集メニューが開きます。

  3. ［編集］メニューをクリックする

    • ブロックの前後に追加のメニューではなく、［編集］メニューを選んでください。

  4. 編集パネルでコード編集を開き、1で用意したHTMLコードをコピー＆ペーストし、コードを保存する

    • ※ 親要素が1つとなっているように注意してください。

  5. 保存する

    • 保存前に、追加元と追加したブロックが1つのブロックとなっていることを確認してください。