本記事では、ページエディター機能を使って、元のページに表示されている要素をブロックとして内容を編集する方法をご案内します。
※ ブロックを作成/編集する場合、事前に施策及びパターンの設定が必要です。
参照：施策を作成・設定する
※ ページエディターの詳細な操作方法はページエディターをご覧ください。
本記事では、以下の手順で進めます。
- ページエディターを開く（施策作成画面）
- 編集したい場所を選択する
- ブロックを編集する
- ビジュアルタブ（GUI）で編集
- コードタブで編集
- 編集したブロックを保存する
1. ページエディターを開く
施策設定画面の［パターンとブロック］のセクションから、ブロックを編集したいパターンにある［編集］ボタンを押して、別タブでページエディターを開きます。
※ 施策設定画面以外でも、ページエディターを開ける導線はあります。
※ エディター画面で表示されるページURLは、施策の配信ページで設定したサンプルURLです。
2. 編集したい場所を選択する
ページのプレビュー上でブロックとして編集したい場所をマウスオーバーすると、枠で囲まれた単位でブロックとして選択できます。
枠をクリックすると編集方法のメニューが表示されます。
［編集］ボタンを押すと、選択した箇所をブロックとして編集できるようになります。
ブロックとして編集する場所をブロックエリアと呼びます。
また、プレビュー上をクリックするとプレビューエリアの右上にツリーパネルが表示されます。
選択したエリアの1つ上の要素（親要素）、もしくは選択したエリアの1つ下の要素（子要素）を選択できます。プレビュー上ではクリックしづらい時などに便利です。
すでにブロックとして編集されている要素がある場合、同じパターン内で、そのブロックを含む形で別のブロックを作成・編集することはできません。
大きい括りでブロックを作成したい場合、一度編集済みのブロックをリセットし、再度作成し直してください。
Tips： ブロックとして編集する場所の選択の仕方
基本的に編集したい場所を選択して問題ありませんが、以下のケースのような場合は選択する場所に注意が必要です。
エディター右上にあるパネルで親要素となるaタグやpictureタグを選択してブロックの編集を行うようにしましょう。
- リンク付きのバナー画像を、リンクと画像のいずれも変更したい
- レスポンシブイメージで設定された画像要素（pictureタグ）を、画面幅に応じて表示される画像パターン全てを編集したい
3. ブロックを編集する
ブロックの選択後、変更方法のメニューから［編集］を選ぶと、指定した場所を編集するモードに切り替わります。
ブロックの要素を確認/選択する
選択したブロックの中で、編集したい要素が選択されているか確認します。
プレビューまたは画面左の［ブロックの要素］からクリックして選択できます。
選択した要素に合わせて、右の編集パネルの内容が変化します。
3-1. ビジュアルタブ（GUI）で編集
ブロックの要素の編集は右パネルで行います。デフォルトでは［ビジュアル］タブを開いています。
［ビジュアル］タブでは、テキストや画像、リンクの設定、さらに、文字サイズや色、余白などのスタイルを項目ごとにGUIで指定できます。
設定内容はすぐに画面中央のプレビュー上で反映されるので、変更内容に問題ないかすぐに確認できます。
ブロックの要素を複製する
- エディター画面左側の［ブロックの要素］一覧の各要素の［・・・］ボタンをクリックする
- ドロップダウンメニューの［ブロックの要素を複製］をクリックする
- その中に含まれる子要素も合わせて複製されます。
ブロックの要素を削除する
複製と同様の手順で、指定要素を削除できます。
3-2. ブロックをコードで編集する
右パネルの上部の［コード］タブをクリックすると、コードを書いてブロックを編集できます。
HTML / CSS / Scriptのタブごとにコードを記述します。
CSSやJavaScriptは、該当ブロックだけでなく、ページ全体を対象に読み込まれます。
4. 編集したブロックを保存する
ブロックの編集が完了したら、画面右側の［変更を確定］ボタンをクリックします。
最後に、ページエディター画面右上の［保存］ボタンをクリックして、パターンにブロックを紐づけて保存したら終了です。
1つのパターンに複数のブロックを一度に編集/保存することができます。