ボード画面では、ブロックエリアの登録、置き換えブロックの追加、編集、プレビュー、配信などを行います。このページでは、画面の見方や仕様について説明します。

全体の流れを確認したい場合は「ブロックを登録してサイトに配信するをご確認ください。

画面の説明

null

  1. フィルター
    • 配信条件でブロックを絞り込むことができます。
  2. ブロックエリア
    • 管理画面から追加したブロックエリアが表示されます。追加すると最右に追加表示されます。
  3. 置き換えブロック
    • 追加、設定した置き換えブロックが表示されます。追加した置き換えブロックは配信条件の優先度順に表示されます。
  4. オリジナルブロック
    • サイトのオリジナルが表示されます。
  5. ブロックエリア登録
    • 管理したいブロックエリアを登録できます。
  6. 配信条件別の表示確認
    • 設定している配信条件、 パターン別に実際のページでどのように見えるかを確認することができます。

ブロックをボードに登録する

こちらをご確認ください。

配信条件の設定について

配信条件ページで作成した配信条件を設定できます。配信条件の作成、設定方法についてはこちらをご確認ください。

null

それぞれのブロックエリアで登録されたブロックに対し、同一置き換え条件内でのパターンは特定の１つしか紐付けられません。 同一ブロックエリア内で、既に他のブロックで条件が設定されている場合、「このパターンはすでに他のブロックで選択されています」というアラートが表示されます。

null

ブロックタイプ詳細

null

ブロックタイプによって設定内容が異なります。ブロックタイプはそれぞれ下記になります。

  • イメージ
    • 画像を置き換える場合
  • テキスト
    • テキストを置き換える場合
  • コード
    • HTML、CSS、JSなどコードを置き換える場合
  • HTMLの追加
    • ブロックにHTMLを追加する場合
  • 非表示
    • ブロックを非表示にする場合

イメージ

  • イメージ
    • 設定したい画像を直接アップロードするか、アルバムから選択します。
    • エリアに含まれている<img>タグのsrc属性の値、もしくは背景画像（background-image）で指定されている場合はbackground-imageのurlの値を変更します。ブロック置き換え前に背景画像が設定されていない場合、設定したイメージを背景画像として追加します。
    • エリアに適用されているCSS/JavaScriptはそのまま適用されます。（※ 下記属性値を付与しない場合）
  • 画像オプション
    • 代替テキスト：画像が表示されない場合の代替テキスト（altテキスト）を設定できます。
    • 親要素のリンク：画像のリンク先を設定できます。
      • 指定したブロックにリンク先があればこちらで設定した内容に変更され、リンク先がなければ設定したリンク先が追加されます。
  • 属性値
    • id属性：任意のid属性を設定できます。（#は不要です。）
    • class属性：任意のclass属性を設定できます。スペースで区切ることで複数のclass属性を設定できます（.は不要です。）
  • スタイル
    • 画像サイズ (px)：画像サイズを任意のサイズに設定できます。
    • 背景色：画像の背景色を任意の色に設定できます。

テキスト

  • テキスト
    • 変更したいテキストを入力します。「オリジナルテキストを挿入」ボタンをクリックすると、登録したブロックエリアに紐づくテキストを取得できます。
    • エリアに適用されているCSS/JavaScriptはそのまま適用されます。（※ 下記属性値を付与しない場合）
  • 属性値
    • id属性：任意のid属性を設定できます。（#は不要です。）
    • class属性：任意のclass属性を設定できます。スペースで区切ることで複数のclass属性を設定できます（.は不要です。）
  • スタイル
    • フォントサイズ (px)：テキストのフォントサイズを任意のサイズに設定できます。（pxまで入力してください。）
    • 文字色：テキストの色を任意の色に設定できます。
    • 背景色：テキストの背景色を任意の色に設定できます。

コード

  • HTML
    • HTMLを記述できます。
    • 「オリジナルHTMLを挿入」ボタンをクリックすると、登録したブロックエリアに紐づくHTMLを取得できます。
      • ログイン後の画面など認証が必要なページでは、オリジナルHTMLを挿入ボタンをクリックしてもオリジナルHTMLを取得することはできません。また、HTMLが動的に生成される場合、HTMLが正しく取得できないことがあります。その場合は、オリジナルHTMLを元サイトからコピーして編集してください。
  • CSS
    • CSSを記述できます。
      • CSSタブで設定したスタイルはパーツの外側の要素も影響を受けますので、記述する際はご注意ください。
  • Script
    • JavaScriptを記述できます。
      • Javascriptを記述する場合はScriptタブに記載してください。HTMLタブに記述すると動作しません。また、Scriptタブで設定したJavascriptはページ全体に影響を与えますので、記述する際はご注意ください。
  • 変数
    • 変数を追加することができます。詳細は下記に記載します。
  • 「アルバムからURLを取得」
    • クリックするとアルバムが開き、任意の画像をクリックすると画像URLを取得することができます。

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>
<!-- 同じ階層のHTMLの追加は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>

変数について

null

  • 変数名
    • HTML側で呼び出す用の名称です。#{val}の形で埋め込むことができます。
  • 表示名
    • 変数値エリアで表示される名称です。
  • タイプ
    • 画像、テキストから選択できます。テキストの場合はテキストフォームが、画像の場合はアルバムがそれぞれ変数値エリアに表示されます。

追加された変数は変数値エリアに表示され、HTMLタブでHTMLを編集せずに、画面側で設定が可能になります。

null

変数で指定した値はHTMLタブでのみ利用できます。CSS/Scriptタブでは利用できないので、予めご了承ください。

ブロックテンプレート

ブロックテンプレートはコードブロックをテンプレートとして保存し、様々な場所やページで呼び出して利用することができる機能です。
詳細は、 ブロックテンプレートをご確認ください。

HTMLの追加

2021/4/8現在、HTML追加の仕様が変更になっております。詳しくはこちらをご確認ください。

ブロックエリアで設定したCSSセレクタに該当するHTMLの前後に追加することが可能です。

ブロックエリアの前に追加

<p class="item">F</p> /* ここにBlocksで設定した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>

ブロックエリアの後ろに追加

<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>
<p class="item">F</p> /* ここにBlocksで設定したHTMLが追加される */

非表示

非表示ブロックを選択した場合、設定したブロックエリアが非表示になります。

ブロックの下書き機能

置き換えブロック追加時に、設定した内容が自動で下書き保存されます。

null

「下書きから新規作成」から選択することで、下書きの状態から編集の再開ができるようになります。

null

配信条件別の表示確認

ブロックのリアルタイムプレビューとは別に、公開中のブロックを配信条件、パターン別に確認することができます。

null

ページが遷移し、選択した配信条件とパターンの設定内容が実際のページ上に反映されます。変更している内容は下記のように枠線が表示されます。

null

枠線を非表示にする場合は、右下の「ブロックの枠線を非表示」アイコンをクリックしてください。

null

下部のプルダウンに、対象のページで設定されている配信条件が表示されます。表示確認したい配信条件
とパターンを選択すると、自動でページが再読み込みされ、書き換え後の要素を確認できます。

null

共有URLの発行

ツールバー右下の「共有URLの発行」をクリックすると、設定している配信条件、パターンの状態のURLが発行されます。発行されたURLを共有することで、KARTE Blocksのアカウントや拡張機能のインストールなしに、特定の配信条件、パターンの表示確認が簡単に行えます。（配信前の非公開の状態でも共有可能です。）

null

URLを開くと下記のように配信条件、パターンに応じたページが表示されます。

null

プレビューの有効期限は発行から3日間になります。

その他注意点、仕様

  • オリジナルコンテンツが取得できない場合があります。詳しくはこちらの記事をご確認ください。
  • 拡張機能を利用したブロックエリアの登録では、場合によってはブロックの更新が行われない場合があります。詳しくはこちらの記事をご確認ください。