・管理側画面
http://demo2.writewired.jp/console/
ユーザーID：demo
パスワード：demo
・公開側画面
http://demo2.writewired.jp/
このデモについて
writeWiredの使い方についてのご説明
デモサイトのURL
管理画面へログインする
ページの作成や編集などのサイト内に関する作業は全て『管理画面』から行います。
まずは下記の手順にて管理画面へログインしましょう。
1. ブラウザでログイン画面を開きます。
ログイン画面：http://demo2.writewired.jp/console/
3. 「ログイン」ボタンをクリックします。
4. クイックメニューが開けばログイン完了です。
以下のような画面が開かず、エラーメッセージが表示される場合はIDとパスワードに入力間違いがないかご確認ください。
コンテンツ編集 - Step.1 コンテンツを開く
『コンテンツ』とはサイト内にあるページの1つ1つのことを指します。
まずは「製品情報」のコンテンツを開いてみましょう。
1.クイックメニューの「コンテンツ検索」をクリックします。
コンテンツ編集 - Step.2 本文の編集
『本文』とはコンテンツの中身を構成するテキストや画像のまとまりであるブロックのことを指します。
この『本文』を積み上げて行くことにより、1ページ分のコンテンツの内容を構成します。
試しに下記の手順で本文を開き、内容を変えてみましょう。
1. 編集したい本文の「編集」ボタンをクリックします。
編集が終わったら上下にある「送信」ボタンをクリックして、編集内容を反映します。
5. コンテンツ編集画面の右上にある「プレビュー」ボタンをクリックして、編集途中の内容を確認します。
6. 「更新」ボタンをクリックして、編集内容を保管します。
編集内容は即時に公開されているページに反映されます。
テンプレート編集 - Step.1 テンプレートの内容を確認する
ページのスタイルや出力するHTMLタグ、定形入力フォームなどを登録しておくのが『テンプレート』です。
コンテンツ作成時にこの『テンプレート』を呼び出して使用することにより、スタイルやHTML、各種の共通パーツなどが適用された状態でコンテンツの中身を作成することが出来るようになります。
実際に使われているテンプレートの中身がどうなっているか、以下の手順にて確認を行うことができます。
1. コンテンツ編集画面の上部にある「テンプレートを編集」ボタンをクリックします。
※ブラウザのポップアップブロック機能によってウィンドウが表示されない場合は解除してください。
【各タブの説明】
| 入力制御 | コンテンツの編集時に入力させる項目の各種設定を行います。 |
|---|---|
| 本文のスタイル | コンテンツ本文に適用するスタイルの設定を行います。 |
| フォームグループ | コンテンツ本文で使用する定形入力フォームの定義を行います。 |
| HTMLテンプレート | コンテンツを表示するためのHTMLの編集を行います。 writeWired上に登録されたテキストや画像などは、テンプレートエンジンを使用してHTML内に持ってくることができます。 |
| テンプレートブロック | ヘッダーやフッター、バナーエリアなどのページ共通のパーツをブロックとして定義し、各テンプレートで使用できるようにします。 |
3. 「HTMLテンプレート」タブをクリックして下さい。
ここではページ内に出力するHTMLを設定します。
テンプレートエンジンの変数（<% ～ %>）を使うことにより、サイトの基本情報やテンプレートブロックを呼び出すことができます。
4. 「テンプレートブロック」タブをクリックして下さい。
ここではヘッダーやフッターなどのサイトの共通パーツのHTMLを登録しておくことができます。
ここで登録したブロックは他のテンプレートで呼び出し使用することができるので、テンプレート毎にヘッダーやフッターなどのタグを書く必要が無くなります。
テンプレート編集 - Step.2 定形入力フォームの追加する
テンプレートには本文で使用する定形入力フォームを登録することができ、予め決めておいたデザインにコンテンツから入力されたテキストや画像を埋め込むことが可能となります。
参考として、定形入力フォームを追加する一連の流れをご説明します。
なお、ここでは以下イメージのフォームを追加します。
【各項目の説明】
| フォームコード | フォームに割り振るIDです。英数字で入力します。 |
|---|---|
| フォーム名 | フォームの名前を付けます。何のフォームなのか分かり易い名前を付けます。 |
4. 「新しい項目を追加」をクリックして、このフォームに追加する項目の設定を行います。
【各項目の説明】
| フィールドID | 項目に割り振るIDです。 |
|---|---|
| 表示ラベル | 入力画面に表示するラベル名です。 |
| 入力必須 | 入力必須とさせるか選択します。 |
| フィールド説明 | 入力時に表示されます。 主に注意事項などを入れます。 |
| フィールドタイプ | どのタイプで入力させるか選択します。 ここで「画像」を選択すると、画像が入れられるようになります。 |
| 長さ | 入力時の最大文字数です。 |
| 入力長 | 入力時の表示幅です。 |
| 入力形式 | 入力時のタイプを選択します。 |
5. 「この設定を適用」をクリックして項目を追加します。
7. 「HTMLテンプレート」タブを選択して、フォームを表示する時に使用するHTMLを入力します。
テンプレートにはフォーム上に入力された各項目のテキストや画像などを表示するための変数を埋め込むことができます。
この変数は「使用できる変数を表示」をクリックすることで見ることができます。
この変数は「使用できる変数を表示」をクリックすることで見ることができます。
テンプレート編集- Step.3 定形入力フォームを本文で使えるようにする
前項にて追加したフォームをコンテンツの本文で使えるようにするには下記の手順を行います。
1. 「テンプレート編集 - Step.1 テンプレートの内容を確認する」と同じようにテンプレートの編集画面を開きます。
2. 「フォームグループ」タブを選択し、「製品情報」をクリックします。
5. テンプレート編集画面のウィンドウを閉じ、コンテンツ編集画面に戻ります。
6. 「末尾に1つ追加」ボタンをクリックして本文を追加します。
8. 「フォームの適用」ボタンをクリックします。
10. 本文の編集ウィンドウ上下にある「送信」ボタンをクリックして入力した内容を反映させます。