このページでは、ページエディタ画面でできることや注意点について紹介します。

ページエディタ機能を利用する上で、KARTE Blocks専用のChrome拡張機能は必須です。

ページエディタ画面でできること

ページエディタ画面では主に以下のことが行えます。利用方法の詳細は後述します。

• ブロックの編集、配信
• 配信条件の公開ステータス変更
• オリジナルブロックの管理、確認

ブロックを編集・保存・配信する

ブロックを編集・保存・配信するまでの流れは以下の通りです。

1. 編集したいパターンを選択する
2. 選択したパターンで、ブロックを編集する（ブロックごとに繰り返す）
   • 1) 変更したいブロックを選択する
   • 2) ブロックの変更方法を選ぶ
   • 3) ブロックを編集する
   • 4) ブロックの編集を終了する
3. 配信条件の公開ステータスを確認・変更する
4. パターンの変更を保存する

編集したいパターンを選択する

ページエディタ画面は、配信条件一覧画面から遷移します。
任意の配信条件の行にカーソルを当て、「ページを編集する」ボタンから起動して下さい。

配信条件に複数のパターンが設定されている場合、最初に左上でブロックを変更するパターンを選択します。

ページエディタ画面では、あるパターンで変更したブロックを別のパターンに後から紐付け直すことはできません。ブロック変更前に、パターンに間違いがないか確認してください。

選択したパターンで、ブロックを編集する

1) ブロックの登録・保存状態を確認する

ブロックの登録・保存状態によって、画面中央のプレビュー部分でブロックが枠線でハイライトされます。

• 緑色： 変更前ブロック
  • ① 同一のページ設定内で、すでにオリジナルブロックとして登録されているもの
    • 他の配信条件やパターンで、ブロックの変更が保存されている場合があります。
    • 意図せず変更がバッティングしないよう注意しましょう。
  • ② 追加元のブロックとして登録されているもの
    • 前後にブロックを追加している場合、追加元のブロックがハイライトされます
      • 前後追加時、追加元のブロックは変更はできません
• 青色： 選択したパターンで変更済みのブロック
  • ③ ブロック自体を変更しているもの
  • ④ ブロックを非表示にしているもの
  • ⑤ 前後に追加したブロック
    • ②のブロックと対で登録されます

2) 変更したいブロックを選択する

編集したいブロックにカーソルを当ててクリックすると、ブロックを選択することができます。
また、ブロックを選択した状態で、画面右上に表示されるツリーパネルから、選択したブロックの親要素にあたるブロックへ選択を切り替えることもできます。

ブロック選択時のTips

1. ブロックを選択する際、特に意図がなければ、画像やテキストを細かく指定するのではなく、ある程度の塊でブロック化しておくとブロックの管理がしやすくなります。

2. すでにオリジナルブロックが登録されている場合、可能な限り同じ単位でブロックを選択すると、ブロック管理がしやすくなります。
   

ページ内で動的に表示されるブロックを選択する

デフォルトのページには表示されていない、ページ内の操作に対応して画面上に表示されるようなブロックも選択することができます。

1. 上部のツールバーで「通常操作モード」に切り替える
2. プレビュー上でページ内操作を行い、該当のブロックを表示する
3. ツールバーで「ブロック選択モード」に切り替える
4. ブロックを選択する

3) ブロックの変更方法を選ぶ

ブロックが未変更、かつ、変更可能な場合、ブロックをクリック（選択）すると変更方法を選択するモーダルが表示されます。

すでにブロックを変更済みの場合、ブロックをクリック（選択）すると、追加で編集するか、変更をリセットする（元のサイトで読み込まれるブロックに戻す）ことができます。

ストアからブロックを呼び出す

ブロックの変更方法を選択時、詳細な選択肢で「ストアから」を選ぶと、ブロックストア（β）から直接ブロックテンプレートを呼び出すことができます。

ライブラリからブロックを呼び出す

同様に、詳細な選択肢で「ライブラリから」を選ぶと、ブロックライブラリに登録されたブロックテンプレートを呼び出すことができます。

4) ブロックを編集する

ブロックの変更方法を選択すると、ブロックの編集が可能になり、画面右の編集用パネルでブロックの内容やスタイル（色や余白等）を編集できます。

編集状態にあるブロックは画面中央のプレビューでハイライトされ、プレビュー内でブロックの要素をクリックすると、その要素に対応する編集用パネルに変化します。

編集上のTips

• ブロックに対して行った編集を1つずつ元に戻す・やり直す（Redo/Undo）ことも可能です
• デバイス別の表示切り替えでブロックをプレビューしながら編集を進めてください
  • 中央エリア上部のプルダウンから変更可能です
  • 合わせて参考： PC・SPサイトでそれぞれ最適な配信を実現するためのベストプラクティス

レイヤー機能で、ブロックの要素を確認・選択・操作する

画面左側の「レイヤー機能」を利用すると、左パネルが開き、ブロックの要素を簡単に確認・クリックして選択することができます。
表示される画面は以下の2つです。

• ブックマークしたブロックの要素
  • デフォルトでは、編集頻度の高い、テキスト、リンク、画像の要素のみを抽出
• 全てのブロックの要素
  • ブロックの要素をHTMLの階層構造に倣って確認できます
  • 要素を削除したり、ドラッグアンドドロップで要素間の並び替えも可能です

（発展）コードで編集する

右側の編集パネルから「コード」ボタンをクリックしてコードエディター画面を開きます。
編集後は、「HTMLを保存」と押すとブロックのプレビューに反映されます。

HTMLコードの変更点がある場合は、オレンジ色のシグナルが点きます。
HTMLコードに問題がある場合は、赤色のシグナルが点き、HTMLを保存できない状態となります。エラーがないかご確認ください。

なお、HTML欄では、「<!--」 と 「-->」 で囲った部分をコメントとして残すことができます。
既存のHTMLをコメントアウトして残しておいたり、編集意図をテキストで残しておく上でご利用ください。
※ 仕様上、ブロックのルートノード（最上位の要素）と同列ではコメントを残せませんのでご注意ください。

5) ブロックの編集を終了する （次のブロックを編集する）

ブロックの編集が完了したら、画面右側の「編集を終了する」ボタンをクリックします。
※ 「・・・」ボタンから、「編集を破棄する」を選択すると、直近の編集を行う前の状態に戻ります

続いて、同じパターンで他のブロックも編集したい場合、2)から繰り返します。

ブロックとパターンの変更を保存する

最後に、「保存」ボタンを押して、編集したブロックをパターンに保存します。
※ 複数ある場合には一括で登録・保存されます。

他パターンを編集したい場合、最初に戻って同じ流れを繰り返します。

配信条件の公開ステータスを確認・変更する

次のステップでパターンにブロックの編集内容を反映する前に、配信条件の公開ステータスを確認しておきましょう。
編集途中で一旦保存したい、という場合、配信条件のステータスを「停止中」にしておくと安心です。

オリジナルブロックを管理する

ページエディタ画面からブロックを配信・公開した場合、ブロックリスト側で表示されるブロック名はデフォルトで一律「ブロック」になります。
登録するオリジナルブロックの数が増えていく場合、適宜オリジナルブロックの名称を付けて見つけやすくしましょう。

ページエディタ画面では、ブロックを選択していない状態で画面左のレイヤーパネルを開くと、登録されているオリジナルブロックを一覧で確認・管理できます。

• オリジナルブロックの名称、CSSセレクターの変更
• オリジナルブロックがページ内に存在しない場合の検知（アラート）

よくあるご質問 / 注意点

保存したのに、サイトに表示されません

• 保存ボタンを押してから、実際に公開されるまで数秒から十数秒かかります。またブラウザでキャッシュが効いている場合、変更内容の反映には多少時間がかかることがあります。
• 配信したブロックが表示されない場合は、ブロックが正しく更新されない場合のチェックポイントをご確認ください。

編集したブロックについて、紐付ける配信条件やパターンを変更することはできますか？

• ページエディタではできませんが、ブロックリスト画面から対応可能です。

#karte_blocks