ブログ紹介文部分を追加します。h1-ブログタイトル部分の下に配置します。

スタイルシート部分

.intro {
  font-size: 80%;
  text-align: right;
  color:#000;
  padding: 0px 10px 0px 0px;
  margin: 0px 0px 10px 0px;
  border: 1px solid #999999;
  background: #cccccc;
  height: 19px;
}

HTML部分

<h1><a href="./"><%blog_name></a></h1>
<div class = "intro"><%introduction></div>

.intro（スタイルシート部分の解説）

font-size: 80%

標準文字サイズは100％なので、80％にして文字サイズを20％小さくしています。紹介文は長い場合も想定しなければいけないので、ある程度の文字数でも収まりきるようにしています。

text-align: right

文字を右寄せにしています。leftにすれば左に寄りますし、centerにすれば中央寄せになります。

color:#000

背景色とのコントラストを考えて文字色を黒にしています。

padding: 0px 10px 0px 0px

introのボックス枠と内容領域（この場合はテキスト）との間隔を指定しています。上、下、左には間隔を作らず(0px)右には10pxの間隔を持たせています。

margin: 0px 0px 10px 0px

introのボックス枠と隣接する領域との間隔（この場合では上部のh1領域との間隔、右、左のウィンドウとの間隔、下の記事部分、右メニュー部分との間隔）を指定しています。ここでは下部分との間隔を10pxに指定しています。それ以外の上、右、左との間隔は０pxにして間隔をあけていません。

border: 1px solid #999999

introのボックス枠の枠線スタイルを指定しています。枠線の太さを1px、実線(solid)、色を#999999で濃い灰色にしています。

background: #cccccc

introのボックス背景を指定します。ここでは灰色に指定しています。

height: 19px

introのボックスの高さを指定しています。高さ固定の19pxにしています。

ＨＴＭＬ部分の解説

<div class = "intro"><%introduction></div>

div class = "intro"で宣言したスタイルを適用しています。<%introduction>はＦＣ２独自変数で、環境設定の変更＞「ブログの説明」で記述した通りに表示されます。

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

1. bodyタグ
2. 全体のリンク色
3. 全体のレイアウト
4. 全体をallで囲む
5. h1-ブログタイトル部分
6. intro-ブログ紹介文部分
7. body〜introソース

前後の記事

最近の記事