h2-記事タイトル部分

ブログタイトルの<h1>の次に重要視される<h2>タグで記事タイトルを囲みます。今回解説する部分を追加すれば、環境設定の変更で指定した通りにエントリータイトルが並びます。

スタイルシート部分

h2 {
  font-size: 120%;
  color :#000;
  margin: 0px;
  padding: 6px 12px 6px 12px;
  border: 1px solid #999999;
  background: #ffffff;
}
h2 a:link {
  color:#666699;
  text-decoration: none;
}
h2 a:visited {
  color:#666666;
  text-decoration: none;
}
h2 a:hover, h2 a:active {
  color:#000000;
}

HTML部分

<div id = "left">
  <!--topentry-->
    <h2><a href="<%topentry_link>"><%topentry_title></a></h2>
  <!--/topentry-->
</div>

h2-スタイルシート部分

font-size: 120%

文字サイズを120％にしています。通常の文字サイズを100%としているので20%大きく設定しています。

color :#000

文字色を黒に指定しています。実際に表示される記事タイトル部分のテキストはリンク部分の設定で指定した通りに表示されます。記事表示部分ではリンクをはずす、とされる場合にはここで指定した色になります。

margin: 0px

h2部分と隣接する部分との間隔を指定しています。上、右、下、左に0pxを指定しています。隣接しているのは上（left部分上部）、右(left部分右)、下(記事本文)、左(left部分左)です。

padding: 6px 12px 6px 12px

h2の枠と内容領域（ここでは記事タイトル）との間隔を指定しています。左から上、右、下、左の間隔です。上と下には6px、右と左には12pxの間隔を空けています。

border: 1px solid #999999

枠線の太さ(1px)、種類(solid:実線)、色(#999999:濃い灰色)を指定しています。

background: #ffffff

h2部分の背景色を指定しています。白（#ffffff）に指定しました。

text-decoration: none

noneを指定して何も装飾していません。underlineを指定すると下線が引かれますが記事タイトルでは下線をひきませんでした。

h2-ＨＴＭＬ部分

今回使用するＦＣ２変数

  • <%topentry_link>・・記事へのリンクを表示。
  • <%topentry_title>・・記事タイトルを表示。

環境設定の変更で指定している「最初に表示するエントリーの数」の分だけリンクつき記事タイトルを表示します。つまり、

<h2><a href = "記事ＵＲＬ">記事タイトル</a></h2>
<h2><a href = "記事ＵＲＬ">記事タイトル</a></h2>
・
繰り返し
・

となります。ここで記述した部分を追加したのち、テンプレートプレビューしてみて下さい。記事タイトルが左に並んで表示されているはずです。

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

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

前後の記事

最近の記事