<<主題>>
いきなり差し込み記法といわれてもわからないのですが、、、
【主題】
<table><tr><td><table><tr><td><!--%主題%--></td></tr></table></td></tr></table>
同じページ内で、 色の部分を の部分で置き換える機能です。
WEBページを編集する場合、WYSWYGエディタ wiki記法、ローカルのhtml編集プログラム(ホームページ作成ソフト)のいずれか、または組み合わせによります。
単純な文字列を入力する場合は、どの方法でも、効率に大きな差は出ません。
しかし、見易く整った形で、表示したい場合は、htmlタグを使用したり、記法を使用して記述する必要性が出ます。
htmlや記法を駆使するためには、それなりの学習が必要になります。
下に記述したサンプルは、スペースとコメント部分を除いたコード部分に1127文字 表示する文字列が200文字程度なのに対して、5倍以上になる(画像記法による生成タグ部分は除外しています1画像110文字以上)画像を含めると7倍以上は、見えないソースの部分に費やされています。
もっと短いソースで記述できるはずだとか、この部分が無駄だ等、ご意見もあると思いますが、その当然の意見こそは、html自体が、見た目の同じ一枚のドキュメントを得るための、コーディングは、それこそ千差万別に行われていることを示しています。
しかし、ひとつのサイトを運営する中で、ページを作成するたびに、同じ入力を繰り返す必要はありません。
決まりきった部分は、それはそれ、これはこれと、まとめておいて、変更部分だけを更新できればよいのですが、その自然な方法は、WYSWYGエディタにもWikiにも実装されているものではないようです。
差し込み記法は、定型部分と否定形部分を、一枚のドキュメントの中で分割することで、常に柔軟で自由度のある、プリセットレイアウト方の編集を実現しようとするものです。
差し込み元マーカーは、日本語のタグを自由に作成しているのと似ているので、ドキュメントの更新を依頼する場合など、とても伝わりやすくなるという一面もあります。
今週の日替わりランチです。 今週のランチ担当シェフは、イケメン1号です。
|
|
|
月曜日
550円
ナポリタンか、ミートソースを選べます。
先着:5名さま、ブルーマウンテン食後に出ます。
ランチと一緒にサラダご注文の場合
サラダは、100円ですよ。(普段は、350円)
|
|
火曜日
秋刀魚定食、煮付け定食
550円
気仙沼からの直送品です。
今年は、特に油が乗ってます。
|
|
水曜日
釜飯定食、かにと、ホタテを選べます。
650円
釜飯は、15分ほどお待ちいただきますので、ご了承くださいませ
|
|
|
【今週の日替わりランチタイトル】
txt2img>(p:mikaP13:今週の日替わりランチです。 今週のランチ担当シェフは、イケメン1号です。)
【/今週の日替わりランチタイトル】
【左のパネル】
月曜日
http://www.….com/tunami/images/spa_meat_.gif?w=105h=59
<strong>550円</strong>
【/左のパネル】
【左のパネルコメント】
ナポリタンか、ミートソースを選べます。¶
先着:5名さま、ブルーマウンテン食後に出ます。
ランチと一緒にサラダご注文の場合
サラダは、100円ですよ。(普段は、350円)
【/左のパネルコメント】
【真ん中のパネル】
火曜日
http://www.….com/tunami/images/sanma.gif?w=100h=75
秋刀魚定食、煮付け定食
<strong>550円</strong>
【/真ん中のパネル】
【真ん中のパネルコメント】
気仙沼からの直送品です。
今年は、特に油が乗ってます。
【/真ん中のパネルコメント】
【右のパネル】
水曜日
http://www.….com/tunami/images/kamamesi.gif?w=75h=100
釜飯定食、かにと、ホタテを選べます。
<strong>650円</strong>
【/右のパネル】
【右のパネルコメント】
釜飯は、15分ほどお待ちいただきますので、ご了承くださいませ
【/右のパネルコメント】
[ランチテンプレート]
[は便宜上全角を使っています。
編集する場合は、日本語で示した括弧の中に、最低限のhtmlと記法を組み合わせて書くだけですみますので、編集更新作業が楽になると思います。
以下に実際のhtmlソースを示しますので、比較してみてください。
<table border="0" cellpadding="0" cellspacing="0" width="765" style="background:url(../images/table_sample.jpg)">
<tr><!-- row 1 -->
<td colspan="7" width="765" height="93" border="0" style="vertical-align:top;padding-left:10px;"><!--%今週の日替わりランチタイトル%--></td>
</tr>
<tr><!-- row 2 -->
<td width="34" height="358" border="0" ></td>
<td width="185" height="358" border="0" style="vertical-align:top;"><div style="height:350px;overflow:hidden;border:none;">
<!--%左のパネル%--><div style="color:#06f;padding:3px;width:170px;overflow:auto;height:150px;border:none;">
<!--%左のパネルコメント%-->
</div></div>
</td>
<td width="70" height="358" border="0"></td>
<td width="183" height="358" border="0" style="vertical-align:top;"><div style="height:350px;overflow:hidden;border:none;">
<!--%真ん中のパネル%--><div style="color:#06f;padding:3px;width:170px;overflow:auto;height:150px;border:none;">
<!--%真ん中のパネルコメント%-->
</div></div></td>
<td width="64" height="358" border="0" ></td>
<td width="190" height="358" border="0" style="vertical-align:top;"><div style="height:350px;overflow:hidden;border:none;">
<!--%右のパネル%--><div style="color:#06f;padding:3px;width:170px;overflow:auto;height:150px;border:none;">
<!--%右のパネルコメント%-->
</div></div></td>
<td width="39" height="358" border="0" ></td>
</tr>
<tr><!-- row 3 -->
<td colspan="7" width="765" height="41" border="0" alt=""></td>
</tr>
</table>
| Lorem |
|
Ipsum
|
|
Dolar
|
|
| » |
氏名 |
山田太郎
|
| » |
住所 |
仙台市青葉区中央1丁目
|
| » |
メールアドレス |
yamada@sample.com
|
| » |
電話 |
080-0000-0000
|
|
| Lorem |
|
Ipsum
|
|
Dolar
|
|
| » |
氏名 |
山田太郎吉
|
| » |
住所 |
仙台市若林区
|
| » |
メールアドレス |
yamada@sample.com
|
| » |
電話 |
080-0000-0000
|
|
| Lorem |
|
Ipsum
|
|
Dolar
|
|
| » |
氏名 |
山田太郎衛門
|
| » |
住所 |
仙台市宮城野区
|
| » |
メールアドレス |
yamada@sample.com
|
| » |
電話 |
080-0000-0000
|
|
| Lorem |
|
Ipsum
|
|
Dolar
|
|
| » |
氏名 |
山田太郎
|
| » |
住所 |
仙台市青葉区中央1丁目
|
| » |
メールアドレス |
yamada@sample.com
|
| » |
電話 |
080-0000-0000
|
|
【氏名】
山田太郎
【/氏名】
【住所】
仙台市青葉区中央1丁目
【/住所】
【メール】
yamada@sample.com
【/メール】
【電話】
080-0000-0000
【/電話】
<table width="100%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td style="background-color: #000000;text-align: center;color: #cccccc;">Lorem</td>
<td> </td>
<td style="background-color: #dedeca;text-align: center;"><a href="#">Ipsum</a></td>
<td> </td>
<td style="background-color: #dedeca;text-align: center;"><a href="#">Dolar</a></td>
<td width="100%"> </td>
</tr>
<tr>
<td colspan="6" style="background-color: #000000;">
<table width="100%" border="0" …>
<tr>
<td style="text-align: right;">»</td>
<td width="30%"style="text-align: left;width:12em;">氏名</td>
<td width="70%" style="text-align: left;"><!--%氏名%--></td>
</tr>
<tr>
<td style="text-align: right;">»</td>
<td>住所</td>
<td style="text-align: left;"><!--%住所%--></td>
</tr>
<tr>
<td style="text-align: right;">»</td>
<td>メールアドレス</td>
<td style="text-align: left;"><!--%メール%--></td>
</tr>
<tr>
<td style="text-align: right;">»</td>
<td>電話</td>
<td style="text-align: left;"><!--%電話%--></td>
</tr>
</table></td>
</tr>
</table>