続いて、見出しの設定だ。見出しといへばh1〜h6要素である。HTMLの学び始めに「H1タグは文字を大きく表示します。FONTタグとは違い、数字が小さくなるほど大きい文字になります。文字を大きくしたいときはFONTタグを使いましょう」などと教へられ、HTMLのマークアップの道を踏み誤ることになるアレである。こんな「常識」は忘れるべきだ。こんな解説をしてゐる本は今すぐゴミ箱に捨てろ。こんな解説をしてゐるサイトはブックマークから消せ。オレたちは嘘を教へられたんだ。「人」といふ字は人と人とが支へあつてゐる形なんかぢやないんだ。騙されるな。

感情がたかぶってきた先生が、どんどん不機嫌になっていく様で、学校の授業のようでリアルな感じです。

さて、はてなダイアリーでは、それぞれの見出しの内容が以下の様に自動的に決定される。
h1:日記のタイトル(例:大和但馬屋日記)
h2:日付
h3:*(アスタリスク)で始まる小見出し

「自動的に決まる」とするならば、是非も無しです。
この日記にあてはめると、

ｈ１要素が「田中大士の食うに困らぬ日々」

ｈ２要素が「はてな市民の物語２０」

ｈ３要素が「はてな はてな黙示録（その６）」

となるわけですね。「ただ、文字の大きさを変えるためだけに、適当に「ｈ＊要素」を使うな」と書いてありますので、ここから先使いません。
この後は、＜h1＞〜＜h3＞までの要素を順番に指定して行くことになります。

background-repeat:no-repeat ; /* ロゴ画像の繰返し設定 */
background-position:0% 100% ; /* ロゴ画像の表示位置 */
vertical-align:bottom ; /* 文字の配置を下揃えに */

こいつらが初登場たち。

background-repeat：no-repeat: 「no-repeat」は、画像が一つだけ表示されるそうです。「repeat」は、「ごくフツーにタイル上に並ぶ」とのこと。大きさに合わせて、いくつも同じ画像が並ぶあれですね。他にも「repeat-x」「repeat-y」「repeat」などがあるようです。
background-position: ここの例では、「0% 100%」となっています。これは、左から０％、上から１００％の位置に表示するということのようです。ということは、この「ＨＡＴＥＮＡ：：」という画像は、左上にピッタリ張り付く形で表示されているはず。ならば、それよりさらに上に表示されている「最新の日記」とか出ている辺は、存在しないことになっているということなんでしょうか。なってるんでしょうね、だってそう見えるもんな。
vertical-align：bottom: サイズの異なる文章が一行に並んでいる時、どの位置に揃えるのかということを指定しているようです。ようです、と書いているのは私にはピンと来ていないからに他なりません。まぁ、「bottom」は下に合わせてあるということみたい。その他に、「top」やら「text-bottom」やらがあります。

ちょっと、頭から煙りが出かかっていますが、もうちょっとがんばりましょう。
「ｈ１」要素はこうある。

で、大見出しとなるh1要素である。これを「はてなダイアリー」のヘッダの様に見せかけるため、いろいろと設定しなくてはならない。まずはてなのロゴを切出して背景画像に設定し、見出しとなる文字列はロゴの幅だけ余白をとつて表示させるわけだ。この様にすることで、はてなダイアリーの出力するHTMLには手を出せなくともある程度自由に遊ぶことができる。これがCSSを使ふ醍醐味だと思ふがどうか。

読むのが必死で、ただうなずくことしか出来ないのですが、きっと醍醐味です（すいません、その内分かりたいです）。
見せかけるため、いろいろと設定しなくてはならないというのは、「テーマ」を「設定なし」にしたことのある今、大変納得。しかし、「ロゴを切り出して」と簡単に書いてありますが、その方法が分かりません。きっとなんらかの処置をするのだろうということは分かりますので、流します。

「ｈ２」要素は出てきますが、こちらはあまり複雑じゃありません。
記述にもある通り、最初の「ｈ２」要素は、「この日記は」という部分をさしているそうです。
（サンプル５）
もう一つの「ｈ２」要素は、「div.main h2」という形で書かれているもので、こちらは前々回の「はてなダイアリー日記本体に出力されるdiv要素」の中から、「＜div class="main"＞」の部分を指定していることは明白です（ピンとこなければ、前々回のやつ見れば楽勝）。出力されている部分を言えば、「2004-03-15 編集」という部分にあたるのでしょう。

「ｈ３」は、「＊」で指定する見出し。つまり、「■ [はてな][www]CSS再構築(その一) body要素 00:00」にあたる部分。「ｈ２」とほとんど同じ設定です。

随分と駆け足で来てしまいましたが、「ｈ２」と「ｈ３」の間に禍根を残していると薄々感じています。
「padding」やら「margin」やらを見て見ないふりをしてきたのが原因なのは明白ですが、こういうのって「color」みたいな分かりやすいものと違って、派手さが無いので試す気にならないんだよねぇ。素人まるだしってやつですね。

h3要素は、まあそのまんまだ。サンプル文書5。ついでにh4,h5のスタイルも設定。h6は使つた記憶がないし、使ふとしてもボールド表示だけで十分なので放置。

サンプルが付いているので、それがどう表示されるかは瞭然です。いつか自分でスタイルシートを書く日が来るまで、頭の片隅に入れておきましょう。
「ボールド表示」は意味不明なので調べましょう。

google:ボールド表示
誰も「ボールド表示」がなんなのか分からない、なんていうことはありえないという様子が怪訝ですが、まぁそういうものです。
「イタリック体」とか、そういう字体の中で太字のものを指すらしいということがなんとなく分かります。
辞書を引いたところ、「boldface type」が「肉太活字」という意味らしいので、まぁそういうことなのでしょう。

とりあえず終わりました。
ここまでで、自分の日記にある要素はカバー出来ているはずです。（というか、ただの「Hatena」のテーマなんで）
この後、「CSS再構築」は、「CSS再構築(その五) サイドバーをつけてみる」へと進んでいくのですが、私はこいつをくっつけていないので、それがどういう機能を持っているのか、どういう状態で稼働するのかさっぱり見当がつきません。
ということは、一回付けてみないといけないですね。（モジュールで付けられるんだっけ？）
そんなことも知らないわけですが、とりあえずスタイルシートを書いてみたいと思っています。

だって、そっちの方が楽しそうだし。

それに、サイドバーが無くて困ったことないしな。

それが終わったら、今度はサイドバーをいろいろいじってみて、この「CSS再構築」に帰ってくる所存です。まぁ、そういうことにしといて。

んじゃ、どういうデザインにするか、とりあえずぼんやり思いをはせてみます。
（っていうか、「頭で分かったつもり」なだけで、どうにかなるものなのだろうか）