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

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

画面の説明

null

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

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

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

配信条件の設定について

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

null

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

null

ブロックタイプ詳細

null

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

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

イメージ

  • イメージ
    • 設定したい画像を直接アップロードするか、アルバムから選択します。
  • 画像オプション
    • 代替テキスト:画像が表示されない場合の代替テキスト(altテキスト)を設定できます。
    • 親要素のリンク:画像のリンク先を変更、追加できます。
  • 属性値
    • id属性:任意のid属性を設定できます。(#は不要です。)
    • class属性:任意のclass属性を設定できます。スペースで区切ることで複数のclass属性を設定できます(.は不要です。)
  • スタイル
    • 画像サイズ (px):画像サイズを任意のサイズに設定できます。
    • 背景色:画像の背景色を任意の色に設定できます。

テキスト

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

コード

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

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>

変数について

null

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

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

null

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

HTMLの追加

追加される位置は「設定したブロックエリアのDOM内の末尾」になりますのでご注意ください。

非表示

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

ブロックの下書き機能

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

null

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

null

配信条件別の表示確認

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

null

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

null

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

null

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

null

その他注意点、仕様

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