スポンサーサイト

intro-ブログ紹介文部分

ブログ紹介文部分を追加します。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に指定しています。それ以外の上、右、左との間隔は0pxにして間隔をあけていません。

border: 1px solid #999999

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

background: #cccccc

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

height: 19px

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

HTML部分の解説

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

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

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

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

前後の記事

最近の記事

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。