ブロックリスト画面では、登録されたブロックを１つずつ変更して配信することができます。この記事ではブロックリスト画面からブロックを変更して配信するまでの手順や注意点についてご説明します。

ブロックリスト機能についてはこちらをご覧ください。

変更ブロックの登録・配信には、事前に配信条件・パターンの設定が必要です。

オリジナルブロックを登録する

変更ブロックを配信したいオリジナルブロックを、右上の登録ボタンから登録します。
サイトをプレビューしながら選択・登録できるほか、CSSセレクタを直接入力して登録することもできます。

null

ブロック設定画面で、どのような配信を行うか設定する

対象のオリジナルブロックの行を確認し、右端の「・・・」ボタンから「変更ブロックを追加」をクリックし、ブロックの設定画面に遷移します。

null

まず、ブロック設定画面では、変更ブロックの配信条件・パターンを選択します。
※ すでに別の変更ブロックが登録されているパターンは選択できません。

null

次に、ブロックの変更メニューを選択します。

  • 別のブロックに変更、前後にブロックを追加、ブロックを非表示の3つの変更方法から選択します。
  • その上で、オリジナルブロックを元に作成、カスタム作成、ブロックライブラリから作成の3つの詳細な作成方法から、やりたいことに応じて選択します。

null

オリジナルブロックの情報を取得できていない場合、「オリジナルブロックを元に作成」は選択できません。
詳細は末尾をご覧ください。

ブロックを編集する

  • 説明の例として、最も利用シーンが多い別のブロックに変更xオリジナルブロックを元に作成の組み合わせで編集フローをご説明します。
  • 編集画面（エディタ）は大きく3つのエリアから構成されています。
    • ①左ペイン
      • ブロック内の要素を個別に選択するエリア
    • ②右ペイン
      • 選択された要素のテキスト・画像・リンクURLの指定、細かなデザインの調整や属性の付与などを行うエリア
    • ③中央ペイン
      • リアルタイムに編集内容がプレビューされ、表示を確認することができるエリア

null

  • ①左ペインは、3つのビューに切り替えることができます。
    • 左から、ブックマークしたブロック要素、すべてのブロック要素、コードになっており、利用シーン応じて切り替えて利用することが可能です。
    • ブックマークしたブロック要素では、テキスト・画像・リンクがデフォルトで表示されています。
    • すべてのブロック要素で各要素の右端にブックマークをON/OFFできるマークがあり、ONにするとブックマークしたブロック要素で表示されます。日常的によく編集する要素をブックマークすることで、日々の更新はブックマークしたブロック要素だけ見て行うことが可能です。

null

  • ②右ペインは、左ペインで指定した要素を編集することができます。
    • テキスト・画像・リンク先URLの変更は、以下イメージの通り、直感的な操作で簡単に行うことができます。

null

  • ③中央ペインでは、編集時にリアルタイムにプレビューの確認ができます。
    • 上部のバーに左から デバイス切り替え、ガイド表示ON/OFF、選択要素を中心に表示、画面リロード、プレビューを別タブで開く機能があり、編集とプレビュー確認の間をスムーズに繋ぎます。

null

ブロックを配信する

  • 編集が終わったら、編集画面を右上の終了ボタンをクリック。
  • ブロック設定画面に戻るので、右上の保存して配信ボタンをクリック。これで本番への配信まで完了です。

null

設定したブロックを削除したい場合

ブロックリストから削除したいブロックを選び、「ブロックを削除」をクリックすれば完了です。
自動で変更内容が反映され、サイトに変更ブロックが配信されなくなります。

オリジナルブロックを削除すると、そこに紐づいている変更ブロックも全て削除されますのでご注意ください。

null

注意点

オリジナルブロックが取得できない

具体的なケース

ブロックリスト画面でオリジナルブロックを登録したり、ページエディタでブロックを変更・配信する際に自動的にオリジナルブロックが登録される際に、以下のようなケースではオリジナルブロックの情報を取得できないことがあります。

  • ページにログインしないとアクセスできない/ページにベーシック認証が設定されている
  • オリジナルブロック登録時にCSSセレクタの指定が間違っている
  • 登録したブロックが非同期で生成される
  • ユーザーエージェントによってPC/SPの出し分けを行っていて、SP用のCSSセレクタを指定している
  • WAF (Web Application Firewall)などの仕組みが入っていて、クローラーがアクセスできない

対応方法

その場合、ブロックの変更時に「オリジナルブロックを元に作成」の編集方法を選択できません。
「カスタム作成」を選択した上で、下記の方法で元サイトから対象のHTMLをコピーして貼り付けてください。

  • Chrome DevToolsを開く（ブラウザで右クリック→「検証」をクリック）
  • 対象の要素を選択→右クリック「Copy」→「Copy outerHTML」をクリック

null