KARTE Blocksでは、各種機能をご利用いただく上で専用のChrome拡張機能が必要です。この拡張機能では、主にサイトやページをプレビューしたり、ブロックの編集、ブロックのスクリーンショットの取得などで使用しています。
Chrome拡張が利用可能な環境を整えることで業務効率の向上が期待できますが、利用できない場合もあります。そのような場合には、「ブロックの編集・追加」に関しては、Chrome拡張なしで行う方法として、ブロックリスト画面から変更を行う方法があります。本記事ではその手順をご紹介します。
なお、ブロックリスト機能についてはこちらをご覧ください。
1.施策を作成する
施策を作成します。
後ほど表示をテスト確認するために、テストセグメントを設定した状態で作成するとスムーズです。
2.ブロックエリアを登録し、ブロックを作成する
以下の手順でブロックの編集を行います。
- ブロックエリアを新規登録
- 右上の［登録］ボタンより、［CSSセレクターを入力］メニューをご利用ください。
- ブロックを作成
- 各ブロックの作成メニューを選択し、ブロックを作成してください。
3.ブロックを編集する
説明の例として、最も利用シーンが多い［書き換え］ > ［ブロックエリアを元に作成］メニューの、編集フローをご説明します。
画面は大きく3つのエリアから構成されています。
- ブロックの要素
- ブックマークしたブロックの要素：ブロック内の要素のうち、ブックマークされた要素の一覧
- 全てのブロックの要素：ブロック内のすべての要素の一覧
- コード：編集できるコード（HTML、CSS、Script）の一覧
- 変数：ブロックに設置する変数の作成・編集
- プレビューエリア
- リアルタイムに編集内容がプレビューされ、表示を確認することができる
- 編集パネル
- 選択した要素のテキスト・画像・リンクURLの指定、細かなデザインの調整や属性の付与などを行うエリア
1. ブロックの要素
左ペインは、4つの一覧に切り替えることができます。
左から、［ブックマークしたブロック要素］、［すべてのブロック要素］、［コード］、 ［変数］のタブが並んでいます。利用シーン応じて切り替えてご利用いただきます。
［ブックマークしたブロック要素］では、テキスト・画像・リンクがデフォルトで表示されています。［すべてのブロック要素］で各要素の右端にブックマークをON/OFFできるマークがあり、ONにすると［ブックマークしたブロック要素］で表示されます。日常的によく編集する要素をブックマークすることで、日々の更新は［ブックマークしたブロック要素］だけ見て行うことが可能です。
2. プレビューエリア
編集時にリアルタイムにプレビューの確認ができます。
上部のバーに、左から［デバイス切り替え］、［ガイド表示ON/OFF］、［選択要素を中心に表示］、［画面リロード］、［プレビュー］を別タブで開く機能があり、編集とプレビュー確認の間をスムーズに繋ぎます。
3. 編集パネル
プレビューエリアやブロックの要素にて指定した要素を編集できるエリアです。
テキスト・画像・リンク先URLの変更は、直感的な操作で簡単に行うことができます。
4.ブロックを配信する
施策にテストセグメントが指定されていることを確認してください。テストセグメントが指定されていない場合、意図しない他のユーザーがアクセスするリスクがあります。 テストセグメントを設定することで、本番サイトで他のユーザーに影響を与えずに設定内容を確認できます。
- 編集が終わったら、編集画面を右上の［保存］ボタンをクリックする
- これで本番への配信まで完了です。
※施策を本番公開するには、施策のステータスを「公開中」に変更する必要があります。
公開しているブロックを非公開にする場合
該当のブロックが紐づく施策を非公開にする必要があります。
こちらのサポートサイトをご参照ください。
設定したブロックを削除したい場合
ブロックリストから削除したいブロックを選び、［ブロックを削除］をクリックすれば完了です。
自動で変更内容が反映され、サイトに変更ブロックが配信されなくなります。
ブロックエリアを削除すると、紐づく変更ブロックもすべて削除されますのでご注意ください。
注意点
ブロックエリアが取得できない
具体的なケース
ブロックリスト画面でブロックエリアを登録したり、ページエディターでブロックを変更・配信する際に自動的にブロックエリアが登録される際に、以下のようなケースではブロックエリアの情報を取得できないことがあります。
- ページにログインしないとアクセスできない/ページにベーシック認証が設定されている
- ブロックエリア登録時にCSSセレクターの指定が間違っている
- 登録したブロックが非同期で生成される
- ユーザーエージェントによってPC/SPの出し分けを行っていて、SP用のCSSセレクターを指定している
- WAF (Web Application Firewall)などの仕組みが入っていて、クローラーがアクセスできない
対応方法
その場合、ブロックの変更時に［ブロックエリアを元に作成］の編集方法を選択できません。
ブロックの変更メニューで［カスタム作成］を選択した上で、下記の方法で元サイトから対象のHTMLをコピーして貼り付けてください。貼り付けることで、対象要素の変更が可能になります。
具体手順
- ブロックの変更メニューで［カスタム作成］を選択し、編集画面に移動。
- 元サイトを表示し、Chrome DevToolsを開く（ブラウザで右クリック→「検証」をクリック）
- 対象の要素を選択 > 右クリック「Copy」 > 「Copy outerHTML」をクリック
- 管理画面のカスタム作成の編集画面に戻る
- 編集パネルの［コード］を選択 （画像①）
- 画面左のブロックの要素エリアの［HTML］を選択 （画像②）
- 中央の［コードで変更］にコピーしたHTMLを貼り付け （画像③）
- 中央下の［変更］を選択 （画像④）
