前後の記事

最近の記事

追記部分に文章を記述した場合、追記へのリンクと追記本文を表示させます。追記部分に文章が無い場合は追記へのリンクは表示されません。

スタイルシート部分

.kizi_more {
  margin: 10px 0px 0px 0px;
}

HTML部分

<div class="kizi_body">
  <%topentry_body>
  <div class = "kizi_more">
    <!--more_link-->
      <a href="<%topentry_link>#more">続きを読む</a>
    <!--/more_link-->
    <!--more-->         
      <a id="more" name = "more"></a>
      <%topentry_more>
    <!--/more-->
  </div>
</div>

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

margin: 10px 0px 0px 0px

ここでは単に記事本文と追記部分との間隔を空ける為に宣言しました。上に10pxの間隔を空け、右、下、左には間隔を空けていません。

ＨＴＭＬ部分

今回使用した変数

• <!--more_link-->：追記部分に記述がある場合は追記へのリンク等を表示する
• <%topentry_link>：その記事のＵＲＬを表示
• <!--more-->：追記部分に記述がある場合は追記本文を表示

この部分の構造として、追記部分に記述がある場合、

<a href="<%topentry_link>#more">続きを読む</a>

を表示させています。#moreというのは、追記本文に記述したキーワードです。

<a id="more" name = "more"></a>

と記述しています。これがリンク元で、「続きを読む」をクリックするとこのリンク元を記述した場所へ移動します。例えばこの記述を追記本文最下部にした場合は「続きを読む」をクリックすると追記本分の最下部へ移動しますが、通常は追記本文の先頭に記述します。

ここでも、<%topentry_more>（追記本文を表示する変数）の上部に <a id="more"></a>と記述しています。

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

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

前後の記事

最近の記事