このページでは、エディター画面でできることや注意点について紹介します。
ページエディタ画面でできること
ページエディタ画面では主に以下のことが行えます。設定方法の詳細は後述します。
- ブロックの編集、配信
ページエディタの構成
ページエディタは大きく4つのエリアから構成されています。
- ①配信条件エリア
- 配信条件を切り替えるエリア
- ②左エリア
- ブロックの要素をHTML構造で表示したり、特定の要素をブックマークできるエリア
- ③右エリア
- 選択した要素のテキスト・画像・リンクURLの指定、その他細かいデザインの調整や属性の付与などを行うエリア
- ④中央エリア
- 編集したい要素の選択や、編集内容のリアルタイムプレビュー確認ができるエリア
ブロックを編集する
④中央エリアから編集したい要素を選択し、クリックすると選択モーダルが表示されます。
編集、非表示、前後にブロックを追加、ライブラリからインポート、利用シーンに応じて使い分けてください。
編集をクリックすると③右エリアが表示されますので、ここから指定した要素を編集できます。
テキスト・画像などの変更は、上記のイメージの通り直感的な操作で簡単に行うことができます。
編集が完了したら、右上の「編集を終了」をクリックします。
一つのブロックではなく、複数のブロックをまとめて編集して配信する場合は、同様に編集したい要素を選択→編集し「編集を終了」を繰り返してください。
以上で編集は完了です。
中央エリアでの表示について
ブロックの状態によって、以下のような表示がされます。（各ブロックをホバーすると、ブロック左上に説明が出てきます。）
- ①：オリジナルブロック
- 未編集でブロックの登録のみ行われている場合
- ②：編集済みブロック
- 同一の配信条件・パターンで既に編集済みの場合
- ③：前後追加ブロック
- 緑枠が追加元のブロック、オレンジが追加したブロック
- ④：非表示ブロック
ブロックを編集する際のTips
画像＋テキストなど複数の要素を一つのブロックとしてまとめて選択、編集する
テキストのみ、画像のみを一つずつ編集するのではなく、画像＋テキストを含む要素を1つのブロックとしてまとめて編集する場合、編集をクリックしても右エリアにはフォームが表示されません。この場合、以下のように中央エリアから編集したい要素をクリックすると、右側にフォームが表示されますので、そこから編集してください。
もしくは、ブロックを選択→編集をクリック後、②左エリアの「レイヤーを開く」を選択すると、選択したブロックの要素がリンク、画像のように分解されます。こちらから編集したい内容をクリックすると右側にフォームが表示されます。
コード（HTML/CSS/JS）を直接編集する
ノーコードでの編集ではなく、HTML/CSS/JSのコードを直接編集することができます。エディターの幅を変更することも可能です。
HTML欄では、「<!--」 と 「-->」 で囲った部分をコメントとして残すことができます。
既存のHTMLをコメントアウトして残しておいたり、編集意図をテキストで残しておく上でご利用ください。
※ 仕様上、ブロックのルートノード（最上位の要素）と同列ではコメントを残せませんのでご注意ください。
編集、プレビューする際のデバイス、比率を切り替える
中央エリア上部のプルダウンからデバイスを変更することができます。また、画面幅、高さを自由に変更することができます。
ブロックを編集する際の注意点
- ページエディタ画面からブロックを配信・公開した場合、ブロックリスト側で表示されるブロック名は一律「ブロック」になります。 管理・運用などの目的でブロック名を変更したい場合は、ブロックリストで対象のブロックの「...」 →オリジナルブロックの詳細を選択して名称を変更してください。
- ブロックの効果計測の目的等で、既に登録済みのブロックを編集する場合、以下の理由から登録済みのブロックと同じブロックを編集する（ブロックの粒度を合わせる）ことを推奨しています。
- ブロックリスト側に、計測用のブロックと編集済みの別ブロックが作られ、管理が煩雑になる場合がある
- ブロック編集、公開後のブロック別効果を正確に把握することが難しい
編集したブロックを公開する
- 編集が終わったら、右ペイン右上の「編集を終了」ボタンをクリック
- エディター画面でデザインが崩れていないかなどを確認し、問題なければ右上の「保存して配信」ボタンをクリック。これで編集内容が本番サイトに公開されます。
ブロック公開における注意点
- 配信ボタンをクリックしないと本番サイトに設定内容は反映されません。
- 配信ボタンを押してから、実際に公開されるまで数秒から十数秒かかります。またブラウザでキャッシュが効いている場合、変更内容の反映には多少時間がかかることがあります。
- 本番サイトに全体配信する前にテスト配信を行うことを推奨としています。必要に応じてご活用ください。
- 配信したブロックが表示されない場合は、ブロックが正しく更新されない場合のチェックポイントをご確認ください。
その他、よくある質問
- 配信条件を付け直して公開することはできますか？（例：元々テスト用で編集していた内容を全員に切り替えて配信する）
- ページエディタでは最初に設定した配信条件を後で付け直すことはできません。ブロックリスト側から設定してください。
- ページエディタで編集したブロックのスクリーンショットがブロックリストでうまく表示されません。
- ブラウザの拡大率を変更している場合や、ディスプレイにつないでBlocksの管理画面を表示している場合、スクリーンショットの位置がずれることがあります。
#karte_blocks