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

画面の説明

null

  1. ブロックエリア:管理画面から追加したブロックエリアが表示されます。追加すると最右に追加表示されます。
  2. 置き換えブロック:追加、設定した置き換えブロックが表示されます。追加した置き換えブロックは配信条件の優先度順に表示されます。
  3. オリジナルブロック:サイトのオリジナルが表示されます。
  4. ブロックエリア登録:管理したいブロックエリアを登録できます。
  5. 最終配信日時:最後にサイトに配信した日時が表示されます。
  6. 配信ボタン:こちらのボタンを押すことで設定したブロックの内容が本番に配信されます。ボタンを押下していないと反映されませんのでご注意ください。
  7. プレビュー:本番配信前に、設定内容を確認することができます。
  8. トラブルシューティング:ブロックが置き換わらない場合のトラブルシューティングのドキュメントのリンクが表示されます。
  9. ページ編集:設定したページ名、URL条件などの編集が行えます。

ブロックエリアを登録する

「ブロックエリアを登録」からブロックエリアを登録できます。ブロックエリアは以下2つの方法から登録できます。

  • サイトで選択
    • ページから直接ブロックエリアを追加することができます。
    • KARTE Blocksの拡張機能がインストール/有効化されている必要があります。
  • CSSセレクタを入力
    • 管理画面からCSSセレクタを入力してブロックエリアを追加することができます。

サイトで選択

ページ追加時に設定したプレビュー用URLに遷移し、下記のように追加したいブロックエリアをクリックし、ブロックエリア名を入力することでページから登録することができます。

null

既に登録済みのブロックエリアは、下記のように緑の枠線で囲まれて表示されます。

null

CSSセレクタを入力

null

管理画面からブロックエリア名、対象のCSSセレクタを入力することでブロックエリアを登録できます。

  • 基本設定
    • エリア名:更新したいエリアの名前を入力(例:メインバナーエリア)
  • エリア指定
    • CSSセレクタで指定します。
    • 「サイトでエリアを選択」をクリックするとページ追加のプレビュー用URLで設定したURLに遷移し、直感的に選択することができます。

置き換えブロックを追加する

置き換えブロックを追加、設定することで上記で設定したブロックエリア内のブロックを更新することができます。置き換えブロックの追加はブロックエリア内の「+」ボタンから行えます。

null

配信条件

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

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

変数について

null

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

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

null

HTMLの追加

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

非表示

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

プレビューで確認する

設定したブロックが正しく設定されているか、本番配信前に確認することができます。プレビューボタン押下後、配信条件とパターンを選択します。

null

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

null

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

null

対象のページで設定されている施策がプルダウンに表示されるので、プレビューしたい施策とパターンを選択すると、自動でリロードされて書き換え後の要素をプレビューできます

null

ブロックが設定されていないページの場合は、プレビューモードをONにすることができません。

null

配信する

プレビューで挙動が問題ないことが確認できたら、実際にサイト上に配信を行います。本番配信時には必ずテスト配信を行っていただくようお願い致します。 テスト配信の設定方法はこちらをご確認ください。

ボード画面右上の「変更内容をサイトに配信」を押下します。

null

配信が成功すると「配信に成功しました」というメッセージが表示されます。

- ブロックを追加時の「保存」をクリックしただけでは変更内容がサイト上に反映されませんのでご注意ください。変更内容をサイトに反映させるためには必ず「変更内容をサイトに配信」を押下してください。
- ブラウザ側でキャッシュが効いている場合、変更内容の反映には多少時間がかかることがあります。

その他注意点、仕様

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

旧デザインに戻したい場合は?

画面内の「v1に戻す」をクリックすると、旧デザインに戻すことができます。

null

旧デザインから新デザインに戻す場合は、旧デザイン画面で「v2にする」ボタンをクリックしてください。

null

旧デザインへの切り替えできるのは11/30までを予定しております。12/1以降は新デザインのみになりますので、予めご了承ください。