h1-ブログタイトル部分

ブログタイトル部分を追加します。<h1>というのは「見出し」です。<h>タグには１〜６の６段階あり、数字が小さくなるにつれ「見出し」としての重要度は下がります。ロボット型検索エンジンもh1に指定したテキストが一番重要で、数字が大きくなるにつれ重要視しなくなります。重要視しないといっても他のテキストよりは重要視します。<h>で囲まれたテキストは他の文字よりも大きくなりますが、文字を大きくする為に見出しタグを使用するのは間違った使用法です。

スタイルシート部分

h1 {
  height: 37px;
  font-size: 200%;
  color:#000;
  margin: 0px;
  padding: 10px 50px 0 30px;
  text-align: left;
  background: #ffffff;
  border: 2px solid #999999;
}
h1 a:link, h1 a:visited {
  color:#666699;
  text-decoration: none;
}
h1 a:hover, h1 a:active {
  color:#000000;
  text-decoration: none;
}

HTML部分

<div id = "all">
<h1><a href="./"><%blog_name></a></h1>

スタイルシート部分各セレクタ別の解説をします。

h1

height: 37px

h1部分の高さをピクセルで指定しています。

font-size: 200%

文字の大きさを指定しています。通常の文字サイズを100％としているので、その倍、200％で指定しています。通常のテキストサイズの２倍の大きさで表示されます。

color:#000

文字色を指定しています。ブログタイトルはリンクで表示されるのでここで指定した色は反映されません。トップページのみリンクをはずすという事をする場合の為に指定しています。

margin: 0px

h1部分外枠と他の領域との上下左右との間隔を指定しています。上、右、左にはウィンドウ、下にはブログ紹介文部分（intro）があります。それらとの間隔を指定しています。

padding: 10px 50px 0 30px

h1部分内枠とh1内の内容との間隔を指定しています。ここではh1部分内枠とブログタイトルのテキストリンクとの間隔を指定しています。上10px、右50px、下0px、左30pxの間隔をとりました。

text-align: left

文字を左寄せしています。

background: #ffffff

背景色を指定しています。ここでは「白」を選びました。

border: 2px solid #999999

h1部分の枠線の太さ、種類、色を指定しています。2pxの太さでsolid(実線)、#999999(濃いめの灰色)を指定しました。

h1 a:link,a:visited

未訪問、訪問済みに同じスタイルを指定します。

a:hover,a:active

マウスオン時、クリック時に同じスタイルを指定します。

color:000

リンク色を指定しています。

text-decoration: none

リンクテキストの装飾を何も指定していません。他の部分ではunderlineを指定してリンクに下線を引いています。

HTML部分の解説をします。

<h1><a href="./"><%blog_name></a></h1>

a href = "./"の"./"はそのブログのトップページＵＲＬを所得しています。

<%blog_name>はそのブログのタイトルを所得して表示しています。環境設定の変更＞「ブログの名前」で指定した通りに表示されます。

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

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

前後の記事

最近の記事