●トップページ●｜●サイト名●

プレーンテキスト

テキストの入力方法

テキストを入力したい場合は、段落を"<div>〜</div>"
または"<p>〜</p>"のタグの間に入力してください。

フォントサイズの指定方法

フォントサイズを変更したい場合は、
"<div>〜</div>"または"<p>〜</p>"
のタグの間に入力し、
"class"でフォントサイズの属性を指定してください。

※ タグの記入例 ※
<p class="fs20">〜</p>

太字の指定方法

フォントを太字に変更したい場合は、
"<div>〜</div>"または"<p>〜</p>"のタグの間に入力し、
"class"で属性"b"を指定してください。

※ タグの記入例 ※
<p class="b">〜</p>

フォントカラーの指定方法

フォントカラーを変更したい場合は、
"<div>〜</div>"または"<p>〜</p>"のタグの間に入力し、
"class"でフォントカラーの属性を指定してください。

※ タグの記入例 ※
<p class="fc-bule2">〜</p>

タイトルの指定方法

"<h3>〜</h3>"と"<h4>〜</h4>"を使用するとそれぞれ

ここにタイトルを入力してください。

ここにタイトルを入力してください。

上記のタイトルを使うことができます。

また"<h4>〜</h4>"は、"class"で属性を指定することによって
カラーを変更することができます。

※ タグの記入例 ※
<h4 class="bdc-yellow">〜</h4>

センタリング・左寄せ・右寄せ
の指定方法

テキストのセンタリング・左寄せ・右寄せをしたい場合は、
"<div>〜</div>"または"<p>〜</p>"のタグの間に入力し、
"class"で属性をそれぞれ"ta-c","ta-l","ta-r"に指定してください。

※ タグの記入例 ※
<div class="ta-c">〜</div>

任意の範囲の指定方法

任意の文字のサイズやカラーを変更したい場合は、
"<span>〜</span>"のタグの間に入力し、
"class"の属性を指定することで変更することができます。

※ タグの記入例 ※
<span class="b">〜</span>……<span class="fc-pink">〜</span>

属性の複数指定方法

"class"の属性指定は" "(半角スペース)を挿むことで
複数指定することができます。

※ タグの記入例 ※
<p class="b fc-green1 fs12">〜</p>

ボックス

テキストなどを枠線の中に表示することができます。

左文-右画像

右側に画像を表示し、左側にテキストを表示することができます。

「左文-右画像」の指定方法

画像を右側に表示させ
左側にテキストを入力したい場合は、
"<div class="r-imgbox">〜
 <br class="fl-clear" /></div>"
のタグの間に入力していきます。
画像の入力は"<img="画像パス" />"
を使用し、テキストは"<div>〜</div>"または
"<p>〜</p>"のタグの間に入力してください。

タイトルの指定方法

ボックスと同じ方法で指定することができます。

属性の指定方法

プレーンテキストと同じ方法で指定することができます。

ソース画面

<div class="z_box-img-r">
 <img src="画像パス" />

 <p>ここにテキストを入力してください。</p>

 <br class="fl-clear" />
</div>

左文-右画像 枠線あり

右側に画像、左側にテキストを枠線に囲まれた状態で
表示することができます。

ここにタイトルを入力してください。

「左文-右画像 枠線あり」
の指定方法

枠線に囲まれた状態で画像を右側に表示させ
左側にテキストを入力したい場合は、
"<div class="r-imgbox">〜
 <br class="fl-clear" /></div>"
のタグの間に入力していきます。
画像の入力は"<img="画像パス" />"
を使用し、テキストは"<div>〜</div>"または
"<p>〜</p>"のタグの間に入力してください。

タイトルの指定方法

ボックスと同じ方法で指定することができます。

属性の指定方法

プレーンテキストと同じ方法で
指定することができます。
また「左文-右画像 枠線あり」のカラーの変更は、
ボックスと同じ方法で指定することができます。

ソース画面

<div class="z_box-img-rb z_boxc-orange">
 <h3>ここにタイトルを入力してください。</h3>

 <img src="画像パス" />

 <p>ここにテキストを入力してください。</p>

 <br class="fl-clear" />
</div>

左画像-右文

左側に画像を表示し、右側にテキストを表示することができます。

「左画像-右文」の指定方法

画像を左側に表示させ
右側にテキストを入力したい場合は、
"<div class="l-imgbox">〜
 <br class="fl-clear" /></div>"
のタグの間に入力していきます。
画像の入力は
"<img="画像パス" />"を使用し、
テキストは"<div>〜</div>"または
"<p>〜</p>"のタグの間に入力してください。

タイトルの指定方法

ボックスと同じ方法で指定することができます。

属性の指定方法

プレーンテキストと同じ方法で指定することができます。

ソース画面

<div class="z_box-img-l">
 <img src="画像パス" />

 <p>ここにテキストを入力してください。</p>

 <br class="fl-clear" />
</div>

左画像-右文 枠線あり

左側に画像、右側にテキストを枠線に囲まれた状態で
表示することができます。

ここにタイトルを入力してください。

「左画像-右文 枠線あり」
の指定方法

枠線に囲まれた状態で画像を右側に表示させ
左側にテキストを入力したい場合は、
"<div class="r-imgbox">〜
 <br class="fl-clear" /></div>"
のタグの間に入力していきます。
画像の入力は"<img="画像パス" />"
を使用し、テキストは"<div>〜</div>"または
"<p>〜</p>"のタグの間に入力してください。

タイトルの指定方法

ボックスと同じ方法で指定することができます。

属性の指定方法

プレーンテキストと同じ方法で
指定することができます。
また「左画像-右文 枠線あり」のカラーの変更は、
ボックスと同じ方法で指定することができます。

ソース画面

<div class="z_box-img-lb z_boxc-sky">
 <h3>ここにタイトルを入力してください。</h3>

 <img src="画像パス" />

 <p>ここにテキストを入力してください。</p>

 <br class="fl-clear" />
</div>

別窓ボックス

更新情報掲載などに使いやすい
「別窓ボックス」を表示することができます。

「別窓ボックス」の指定方法

小さな別窓の中にテキストなどを入力し表示させたい場合は、
"<div class="z_box-a">〜</div>"のタグの間に入力していきます。
テキストは"<div>〜</div>"または"<p>〜</p>"
のタグの間に入力してください。

更新情報掲載用の指定方法

更新情報掲載に使いやすく表示する場合は
"<div class="z_box-a">〜</div>"のタグの間に
"<dl>〜</dl>"のタグをを入力し、
その間に"<dt>日付</dt>"・"<dd>テキスト</dd>"を
交互に入力してください。

属性の指定方法

プレーンテキストと同じ方法で指定することができます。
また「別窓ボックス」のカラーの変更は、
ボックスと同じ方法で指定することができます。

タイトルの指定方法

ボックスと同じ方法で指定することができます。

ソース画面

テーブル

テーブルを表示することができます。

「テーブル」の指定方法

テーブルの中に画像やテキストを入力して表示する場合は、

上記ソースの"…"の部分に
行 ："<tr>〜</tr>"
列 ："<th>〜</th>"または"<td>〜</td>"
を指定し、その中に入力してください。

<th>と<td>の使い分け

"<th>〜</th>"のタグの間に入力すると
太字・背景色あり・センタリングされた状態で表示され、
"<td>〜</td>"のタグの間に入力すると
標準・背景色白・左寄せされた状態で表示されます。

属性の指定方法

行（縦）に属性を指定したい場合は"<tr>〜</tr>"に、
単一セルに属性を指定したい場合は
"<th>〜</th>"または"<td>〜</td>"に、
"class"を使い指定してください。

テーブルカラーの指定方法

テーブルのカラーを変更したい場合は、
"<table cellpadding="0" cellspacing="0" class="z_tab">"
に対し"class"で属性を指定することで変更することができます。

ソース画面

※ 太字の部分が変更可能な部分です ※

チェックリスト

チェック画像の付いたリスト表示ができます。

class="z_ch1-色"

• ここにテキストを入力してください。
• ここにテキストを入力してください。
• ここにテキストを入力してください。

class="z_ch2-色"

「チェックリスト」の設定方法

チェックリストにテキストを入力するには
"<ul class="z_ch1-色">〜</ul>"または
"<ul class="z_ch2-色">〜</ul>"のタグの間に
"<li>〜</li>"を入力し、そのタグの間にテキストを入力してください。
※ 指定可能な色は"red","blue","green"です。 ※

ボックス内に指定

チェックリストはボックス内に指定することもできます。
"<ul class="z_ch1-色">〜</ul>"または
"<ul class="z_ch2-色">〜</ul>"のタグを、
"<div class="z_box">〜</div>"のタグの間に入力していきます。

属性の指定方法

"<li>〜</li>"に、
"class"を使い指定してください。

ソース画面

※ 太字の部分が変更可能な部分です ※

手紙風デザイン

手紙風の画像の上にテキストや画像を入力できます。

手紙風デザインの指定方法

手紙風画像の上にテキストや画像を
入力したい場合は、
"<div class="z_letter-t">〜</div>
<div class="z_letter-b"></div>"の
"〜"の部分に入力していきます。
"<img="画像パス" />"を使用し、
テキストは"<div>〜</div>"または"<p>〜</p>"の
タグの間に入力してください。

属性の指定方法

プレーンテキストと同じ方法で指定することができます。
画像の左右位置を指定したい場合は
"<img />"に対し"class"で属性をそれぞれ
"z_l-img","z_r-img"に指定してください。

ソース画面

<div class="z_letter-t">
 <img src="画像パス" class="z_img-r" />

 <p>
  ここにテキストを入力してください。
  ここにテキストを入力してください。
 </p>
</div>
<div class="z_letter-b">
</div>