ページエディタ
目次
1.機能概要
2.本機能導入にあたってのご留意事項や利用制限
3.動画資料：ページエディタについて
4.ショップ管理ツールに追加される項目
5.作成したページをユーザーに公開する方法（事例紹介）
1.機能概要
登録されているパーツをドラッグ＆ドロップで配置・並べ替えする直感的な操作だけで、特設ページの作成・更新ができる機能です。
HTMLやm:idが苦手なかたや、デザイナーでないかたでも、簡単にページを作成・更新できます。
ページそのものに表示期間や表示対象ユーザーを指定することもできるため、
特定のエンドユーザーだけに見せる限定ページを作成することも可能です。
2.本機能導入にあたってのご留意事項や利用制限
・本機能は、CMSオプションを導入した場合にご利用いただける機能です。
・本機能は静的コンテンツを作成するため、ページエディタ内で使用するHTMLコンテンツにm:idはご利用いただけません。
本機能導入時に店舗様で必要な作業
・本機能を本番環境でご利用いただく前に、デモ環境で本機能をご利用いただき、
登録したページのヘッダー、サイドバー、フッターなどの各テンプレートファイルに、修正が必要かどうかをご確認ください。
※作成したページのヘッダー、サイドバー、フッターには、
「/view/userweb(smartphone)/common/」内の.xhtmlファイル（header.xhtml/sidebar.xhtml/footer.xhtml）が使用されます。
上記以外のファイルをヘッダーやフッターとして使用している場合や、
共通で読み込むcssやjsファイルを上記ファイルに記載していない場合などは、事前に該当ファイルの修正が必要です。
※ページエディタの登録方法については、下記動画資料をご参照ください。
3.動画資料：ページエディタについて
4.ショップ管理ツールに追加される項目
本機能を導入すると、ショップ管理ツールに以下のメニューおよびCSSファイルが追加されます。
下記の順でグローバルナビゲーションからアクセスしてください。
・追加されるショップ管理ツールメニュー
「コンテンツ管理」 → 「ページエディタ」 → 「ページ新規登録／一覧」 → 「ページ登録・編集」
・追加されるCSSファイル
「コンテンツ管理」 → 「テンプレート管理」 → 「view」 → 「userweb」 → 「page」 → 「css」 → 「page.css」
※スマートフォンオプションをご利用の場合は、
「view」 → 「smartphone」 → 「page」 → 「css」 → 「page.css」も追加されます。
コンテンツ管理 ＞ ページエディタ ＞ ページ新規登録／一覧
ページ登録・編集画面で登録したページを一覧で表示します。
また本画面から、ページの新規登録・編集・コピーを行うことができます。
コンテンツ管理 ＞ ページエディタ ＞ ページ新規登録／一覧 ＞ ページ登録・編集
ページエディタで作成するページ（以下ページ）の新規登録・編集を行います。
登録したページは、ページ新規登録／一覧画面で確認できます。
「コンテンツ管理」 → 「テンプレート管理」 → 「view」 → 「userweb」 → 「page」 → 「css」 → 「page.css」
ページエディタ導入時に追加されるCSSファイルには、以下の内容が含まれています。
ページ作成時には、下記の内容が出力されるため、店舗様でデザインを変更される場合は「page.css」を編集してください。
| タグ | 適用結果 |
|---|---|
| <h2>大見出し</h2> |  |
| <h3>中見出し</h3> |  |
| <h4>小見出し</h4> |  |
| <strong>強調文が入ります。</strong> |  |
| <blockquote>引用文が入ります。</blockquote> |  |
| <table> <tr> <th>見出し1</th> <td>内容1</td> </tr> <tr> <th>見出し2</th> <td>内容2</td> </tr> <tr> <th>見出し3</th> <td>内容3</td> </tr> </table> |  |
| <a href="#" class="button positive medium">大ボタン（赤）</a> |  |
| <a href="#" class="button normal medium">大ボタン（白）</a> |  |
| <a href="#" class="button negative medium">大ボタン（黒）</a> |  |
| <a href="#" class="button not_click medium">大ボタン（グレー）</a> |  |
| <a href="#" class="button positive small">小ボタン（赤）</a> |  |
| <a href="#" class="button normal small">小ボタン（白）</a> |  |
| <a href="#" class="button negative small">小ボタン（黒）</a> |  |
| <a href="#" class="button not_click small">小ボタン（グレー）</a> |  |
| <div class="wrap"> <div class="clm-2 left"> <p>カラム1の本文が入ります。...</p> </div> <div class="clm-2 right"> <p>カラム2の本文が入ります。...</p> </div> </div> |  |
| <ul> <li>番号なしリストの項目1</li> <li>番号なしリストの項目2</li> <li>番号なしリストの項目3</li> </ul> |  |
| <ol> <li>番号付きリストの項目1</li> <li>番号付きリストの項目2</li> <li>番号付きリストの項目3</li> </ol> |  |
| <dl> <dt>リストの定義語1</dt> <dd>リストの定義語1の説明</dd> <dt>リストの定義語2</dt> <dd>リストの定義語2の説明</dd> </dl> |  |
5.作成したページをユーザーに公開する方法（事例紹介）
作成したページは、店舗様のサイトドメインとページコードによって、URLが決まります。
ページのURLをどのように活用するかについては、さまざまな事例があるため、ここでは代表的な事例をご紹介します。
1.パーツ管理でバナーを作成し、バナーの「バナークリック時遷移先」にURLを指定する
パーツ登録・編集にてバナーを作成し、
バナーをクリックした際のリンク先（「バナークリック時遷移先」 ＞ 「外部ページを表示」）にURLを指定する方法です。
パーツ管理機能を利用することで、テンプレートの編集頻度を減らし、画像の差し替えなどの作業時間を軽減できます。
パーツ管理の特集ページはこちら
2.トピックスの「リンク先指定」にURLを指定する
トピックス新規登録にて作成したトピックスをクリックした際のリンク先（「リンク先指定」 ＞ 「任意のURL」）にURLを指定する方法です。
ユーザーウェブ上のお知らせとして機能するトピックスを利用することで、季節に応じた販促やセール企画などに合わせたページ運用が可能です。
トピックス機能の特集ページはこちら
3.メルマガなどのコンテンツにURLを記述する
特定のユーザー（セグメント化されたユーザーなど）に向けたページを作成し、メルマガに掲載・配信する方法です。
季節に応じた販促や、特定のニーズに合わせたページ運用が可能です。
※テキストメルマガであればURLを直接記述するだけですが、HTMLメルマガの場合はhref属性でのURLの指定が必要です。
4.ユーザーウェブ上にURLを記述する
ユーザーウェブの任意のページにhref属性でURLを指定し、ページへの遷移を可能とする方法です。
HTMLに関する若干の知識は必要ですが、ユーザーウェブ上の任意の箇所に記述できるため、自由度に優れたページ運用が可能です。
