<%topentry_body>という変数を<h2>記事タイトル部分の下に記述すると記事本文も表示されるようになります。一度お試し下さい。<%topentry_body>というのは、ＦＣ２単変数で、<!--topentry-->というブロック変数内で記述する事により、「その記事の本文を表示させる」事が出来ます。表示されたものを見ていただければ分かるように、記事本文部分に枠がありません。この部分に枠をつけたり、本文だけ文字サイズを変えたり、リンク色を変えたり・・・と変更する事が出来るようにするのが、スタイルシート部分の「クラス」です。ここではkizi_bodyという要素名をつけ、ＨＴＭＬ部分で<%topentry_body>の範囲にスタイルを適用させる事により、本文だけ個別にテキストサイズを変更したり出来ます。

ここでは本文のテキストを変更するといった事はしていません。枠線をつけ、文章と枠との間隔を指定、行間を指定、そして記事内の画像のスタイルを設定しています。

スタイルシート部分

.kizi_body {
  margin: 0px 0px 10px 0px;
  padding: 15px;
  border-top: none;
  border-left: 1px solid #666666;
  border-right: 1px solid #666666;
  border-bottom: 1px solid #666666;
}
.kizi_body img {
  border: 1px solid #666666;
  margin: 0px 5px 5px 0px;
}

HTML部分

<!--topentry-->
<h2><a href="<%topentry_link>" ><%topentry_title></a></h2>
<div class="kizi_body">
  <%topentry_body>
</div>

.kizi_body-スタイルシート部分

margin: 0px 0px 10px 0px

記事本文部分と隣接する領域との間隔を指定しています。上、右、左には間隔を空けず（0px）下にだけ10pxの間隔を空けています。次の記事が下にある場合は<h2>-記事タイトル領域との間隔、無い場合はleft領域の下部分、または後に解説するコメント領域が間隔を空ける対象となります。

padding: 15px

記事本文領域(kizi_body)の内枠と内容（この場合はテキスト、画像）との間隔を指定しています。上、右、下、左全てに15pxの間隔をとっています。

border-

記事本文領域の枠線の太さ(px)、種類(solid-実線)、色(#666666-濃い灰色)を指定しています。ここでは上以外に同じ値を指定しています。上をnoneとして線を入れなかったのは、h2-記事タイトル部分の下線と重複する事を避けているからです。

kizi_body img-スタイルシート部分

border: 1px solid #666666

記事内の画像の枠線の太さ、種類、色を指定しています。画像に枠は不要と思われる場合は、noneを値に入れて下さい。

margin: 0px 5px 5px 0px

画像と隣接する領域（テキストや画像など）との間隔を指定しています。右と下に5pxの間隔を指定しています。

ＨＴＭＬ部分

今回使用する変数

• <%topentry_body>・・記事本文を表示

記事本文を表示させます。なお、追記部分に記述した内容は表示されません。

スタイルシート部分で宣言した要素kizi_bodyクラスを<%topentry_body>に適用させています。

ゼロから創るテンプレートトップ

1. left-左部分
2. topentry-エントリー繰り返し表示
3. h2-記事タイトル部分
4. 記事本文を表示
5. 追記部分
6. left(記事部分〜追記)のソース

前後の記事

最近の記事