はてなはてな黙示録（その１２）

無事、「引用（blockquote）」のスタイルシートを書くことにも成功しました。
ようやく軌道修正終了。「ＣＳＳ構築」に話を戻すことができます。


順番から行くと、今度は「h1」「h2」「h3」の辺りのスタイルシートを書くのですが、その前にちょっとお道具箱の中身を増やします。
http://joram.agz.jp/hatena/hatena_theme.html
にお出掛けすると、「テーマ」の「ソース」を得ることができます。これが、テーマ独自の秘伝のレシピというわけで、そのテーマのおいしさそのまま、セレクタから何から知ることができるはずの一品です。ここから、テーマ「Hatena」のソースを分けていただいて、これをまねっこしながらスタイルシートを書いて行きたいと思います。


それでは、さっそく「h1」から始めてみましょう。
まず、我が最良の参考書たる「CSS再構築」では、「h1」は「日記のタイトル」であると解説されております。
そして、このように指定。

h1 {
font-size:180% ; /* 文字サイズ */
color:#77bac1 ; /* 文字色 */
background-color:#4594a0 ; /* 見出し部分の背景色 */
background-image:url("http://d.hatena.ne.jp/images/diary/yms-zun/2002-12-30.gif") ; /* はてなロゴ画像 */
background-repeat:no-repeat ; /* ロゴ画像の繰返し設定 */
background-position:0% 100% ; /* ロゴ画像の表示位置 */
padding-left:110px ; /* ロゴ画像の横幅分だけ左に余白を取る */
border-bottom:1px #276d75 solid ; /* 下に枠線表示 */
vertical-align:bottom ; /* 文字の配置を下揃えに */
}

「/*」〜「 */」の間にある解説がとてもありがたいです。
そして、テーマ「Hatena」の秘伝のレシピはこちら。

h1 {
text-align: left;
font-size: 16pt;
font-weight: bold;
border-bottom: 1px dotted #adb2ff;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 5%;
margin-right: 5%;
padding: 4px 4px 4px 4px;
}

二つ並べてみると、案外違うもんなんですね。とりあえず分かりやすく、両方とも試してみましょうか。
（えい、その１！）
なんか変です。「ようこそtanakadaishiさん」の下辺りに、「Hatena::田中大士の食うに困らぬ日々」という大きな文字がぷっかりと浮いています。
当然のことなんですが、「CSS再構築」の方は「Hatena::Di（←この辺が動いている）ary」の辺りを一度消してから、それに見せかけたものを表示しているので、ロゴを貼ったり、位置を揃えたりといろいろなことをやっています。
私は、有料会員でも優良会員でも無いので、その部分をどうにかすることができません。従って、この例をそのまま利用しても、似たようなものが二つ現れるだけというのは自明の理です。
分かってるならやるな？　全くそのとおり。


（えい、その２！）
先ほどとはうって変わって、極めて地味な変化を見せているようです。
その証拠に、どこが変わったのか、私が発見できないでいます。ちょっと、点けたりたり消したりして確認してみます。
……なるほど。
文字が劇的に小さくなり、青い点々の下線が日記名の下に出ましたね。
「text-align」は、その行を右に寄せたり、左に寄せたり、均等割付したりする際に使うとのこと。前にやりましたっけ？　うーん、記憶にありません。


次は「h2」ですね。

h2 {
font-size:140% ; /* 文字サイズ */
color:#066 ; /* 文字色 */
margin:0.5em 0 ; /* 外側の余白 */
padding-left:0.5em ; /* 内側左の余白 */
border-bottom:2px #fff solid ; /* 下に枠線表示 */
}
div.main h2 {
font-size:120% ; /* 文字サイズ */
color:#fff ; /* 文字色 */
padding-left:1em ; /* 内側左の余白 */
border-color:#fc0 ; /* 下線の色を変更 */
}

「CSS再構築」では、「h2」を２個指定しています。
とりあえず、上の純粋な「h2」を試してみます。
日付の横にある見出しの色が変わりました。文字サイズも、他の文字より大きい様子。書いてあるまんまの効果が発揮されているようです。

h2 {
font-size: 100%;
background-color: #5279e7;
padding: 3px 0px 2px 10px;
margin: 5px 0 0 0;
width: auto;
_width: 100%;
}

こちらは、テーマ「Hatena」の「h2」。
「width」というのが分かりません。さっそく調べると、「上下左右全ての」というような意味合いの様子。「border-width」のような形で使われるようなのですが……　「auto」って？　「_width」って？　こういう場合は、取っ払ってしまってどんな変化があるのか確かめれば分かるという寸法です。スタイルシートの設定欄から、「width: auto;」「_width: 100%;」を取っ払います。
（おりゃ！）
変わってる？（変わってません）
意味の無いことはしないはず。きっと何かあるのでしょうが、分からないということで一つ。
とりあえず、取りはずしたまんまにしておきます。

h2 span.date {
color: #ffffff;
font-size: 100%;
font-style: normal;
margin-left: 2px;
margin-right: 2px;
}


h2 span.title {
color: #ffffff;
font-size: 100%;
font-style: normal
}

テーマ「Hatena」では、その他にも２カ所スタイルシートで指定しています。
「h2 span.title」は、日付の横にある見出しを。「h2 span.date」は日付を指定していました。
やってみればなるほどですが、色々細かく指定してあるものなんですね。


それでもって、「h3」。

h3 {
font-size:120% ; /* 文字サイズ */
color:#fff ; /* 文字色 */
margin:1em 0 ; /* 外側の余白 */
border-bottom:3px #9ff solid ; /* 下に枠線表示 */
}

こちら、「CSS再構築」より。とても分かりやすいです。このまま入れると、文字色「#fff」が背景色「#fff」に混じってしまうのでは無いかとちょっと思ったので、少しいじります。えーと、「color:#fff」を「#eee」に変更します。
そんでもって入力。
（とぉ！）
変化しました。なるほど、こうなるのか。
しかし、段々雑然としてきましたね。いつになったら、「らしく」なるのでしょうか。