WebBoardを使うまでの手順(標準表示)

WebBoardを利用し、テキスト文言を動的表示させる方法を試してみましょう!!
以下の作業手順では、下記画面の赤枠の部分のテキスト、画像を、Excelを利用し動的表示させる手順を解説します。

STEP1 モックデザイン作成

まずはウェブデザインの元となるモックデザインを作成します。
この状況ではレイアウトだけ考え、テキスト、画像などは仮で記載しておきます。

<div id="main-description">
	<h1>H1タイトル</h1>
	<div class="description">
		テキストテキストテキストテキストテキスト<br>
		テキストテキストテキストテキストテキスト<br>
		テキストテキストテキストテキストテキスト<br>
	</div>
	<p><img src="" alt="イメージ挿入"></p>
	<p>特許出願済</p>
</div>

STEP2 Excelデータ作成

STEP1で作成したモックデザインを元に、運用フェーズで変更したいテキスト、画像パスなどの テキスト文字列をExcelに記述します。

【Excelファイルの記載方法】

1.Excelファイルの1行目~4行目には、以下項目を記載してください。

ver 1(固定)
primary Excelの5行目以降に記載するデータの主キー(一意性データ)となる項目
index urlのクエリパラメータより絞り込みたい項目を指定します。
area_name Excelの5行目以降に記載するデータを特定する名称を記載します。
(表形式が好ましい)

2.Excelファイルの5行目にデータの項目名を記載します。

3.Excelファイルの6行目以降にデータを記載します。

図:Excelのキャプチャ(クリックで拡大)

※Excelの詳細仕様はこちら

STEP3 HTMLの修正

【HTMLファイルの記載方法】

1.作成したExcelの6行目以降のデータを、HTMLの表示したいタグのclass属性にclass名(『wb-』から始まる)を埋め込みます。

例)Excelに記載されたarea_nameが"index"、項目名がwb_h1のデータをHTMLに表示させたい場合

<h1 class="wb-setinnertext-index-wb_h1"><h1>
HTMLサンプル
<div id="main-description">
	<h1 class="wb-setinnertext-index-wb_h1">H1タイトル</h1>
	<div class="description wb-setinnertext-index-wb_description">
		テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
		テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
		テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
	</div>
	<p><img class="wb-setsrc-index-wb_image" src="" alt="イメージ挿入"></p>
	<p>特許出願済</p>
</div>

※HTMLの詳細仕様はこちら

STEP4 WebBoardに登録

図:管理ツール『HTMLファイル登録』画面

図:管理ツール『表示データファイル登録』画面

STEP5 完成

<div id="main-description">
	<h1 class="wb-setinnertext-index-wb_h1">H1タイトル</h1>
	<div class="description wb-setinnertext-index-wb_description">
		テキストテキストテキストテキストテキスト<br>
		テキストテキストテキストテキストテキスト<br>
		テキストテキストテキストテキストテキスト<br>
	</div>
	<p><img class="wb-setsrc-index-wb_image" src=""
	alt="イメージ挿入"></p>
	<p>特許出願済</p>
</div>

WebBoardを使うまでの手順(リスト表示)

ここでは、WebBoardを使い、リスト部分のテキストを動的表示させる方法を試してみましょう!
以下の作業手順では、下記画面の赤枠の部分のテキスト、画像を、Excelを利用し動的表示させ手順を解説します。

STEP1 モックデザイン作成

まずはウェブデザインの元となるモックデザインを作成します。
この状況ではレイアウトだけ考え、テキスト、画像などは仮で記載しておきます。


<div class="construction">
	<div class="head"><b>構築面</b></div>
	<img src="/moderator-hp/images/top_before_construction.png">
	<div class="text">
		<li>
		<span>ダミーダミーダミーダミーダミーダミー</span></li>
		<span>ダミーダミーダミーダミーダミーダミー</span></li>
		<span>ダミーダミーダミーダミーダミーダミー</span></li>
	</div>
</div>
STEP2 Excelデータ作成

STEP1で作成したモックデザインを元に、運用フェーズで変更したいテキスト、画像パスなどの テキスト文字列をExcelに記述します。

【Excelファイルの記載方法】

1.Excelファイルの1行目~4行目には、以下項目を記載してください。

ver 1(固定)
primary Excelの5行目以降に記載するデータの主キー(一意性データ)となる項目
index urlのクエリパラメータより絞り込みたい項目を指定します。
area_name Excelの5行目以降に記載するデータを特定する名称を記載します。
(表形式が好ましい)

2.Excelファイルの5行目にデータの項目名を記載します。

3.Excelファイルの6行目以降にデータを記載します。

※Excelの詳細仕様はこちら

STEP3 HTMLの修正

【HTMLファイルの記載方法】

1.作成したExcelの6行目以降のデータを、HTMLのリスト表示したいタグのclass属性にclass名(『wb-listarea-』、『wb-listrow』)を埋め込みます。

例)Excelに記載されたarea_nameが"before1"、項目名がtextのデータをHTMLにリスト表示させたい場合

<div class="text wb-listarea-before1">
	<li class="wb-listrow-before1"><span class="wb-setinnertext-before1-text"></span></li>
</div>
HTMLサンプル

<div class="construction">
	<div class="head"><b>構築面</b></div>
	<img src="/moderator-hp/images/top_before_construction.png">
	<div class="text wb-listarea-before1">
		<li class="wb-listrow-before1"><span class="wb-setinnertext-before1-text">ダミーダミーダミーダミーダミーダミー</span></li>
		<li class="wb-listrow-before1"><span class="wb-setinnertext-before1-text">ダミーダミーダミーダミーダミーダミー</span></li>
		<li class="wb-listrow-before1"><span class="wb-setinnertext-before1-text">ダミーダミーダミーダミーダミーダミー</span></li>
	</div>
</div>
STEP4 WebBoardに登録

図:管理ツール『HTMLファイル登録』画面

図:管理ツール『表示データファイル登録』画面

STEP5 完成


<div class="construction">
	<div class="head"><b>構築面</b></div>
	<img src="/moderator-hp/images/top_before_construction.png">
	<div class="text wb-listarea-before1">
		<li class="wb-listrow-before1">
		<span class="wb-setinnertext-before1-text">
		ダミーダミーダミーダミーダミーダミー</span></li>
		<li class="wb-listrow-before1">
		<span class="wb-setinnertext-before1-text">
		ダミーダミーダミーダミーダミーダミー</span></li>
		<li class="wb-listrow-before1">
		<span class="wb-setinnertext-before1-text">
		ダミーダミーダミーダミーダミーダミー</span></li>
	</div>
</div>