CSSで章分けを
昨日のThe Black Box紹介の際、写真の下部に灰色のロゴと黒い下線があったと思う(IE6ではそう見えた)。なにかセクションのtitleみたいになっていたが、あれは単純に写真とエントリの境目に現れる黒線と写真の一番下に表示されていただけで、全く偶然の産物だ。でも、あれはかっこいい。Weblogにもあーいう＜h＞タグ的な要素を盛り込んだ方が読みやすくなるんちゃう？という事で、ちょっと作ってみる事にした。スタイルシートで指定して、h1タグだと他の部分に影響が出そうな気がしていやなのでh5くらいでちょこっと作ってみようかな。class指定でもいいが、エントリを入力しているときにわざわざ＜ｈ clas＝・・・・ とか入力するのはわずらわしすぎる。
スタイルシートの、htmlタグに対する一般的な指定方法はご存知の通り以下のようになる。
h5 {****}
んで、まずは下線を指定する。この場合はborderで指定する。その他の指定は、細めの実線、色は黒、が男らしくてよい。
h5 {border-bottom: 1px solid black; }
フォントも適当に指定。流石にＭＳゴシックは無いだろうという判断で、（多分)windowsデフォではマシな方だと思うHGゴシックEに指定する。HGゴシックEが無いPCの人も外国の人をはじめたくさんいるだろうと思うので、次候補としてfont familyにてこれまたwindowsデフォにしては見やすくてさっぱりしたArielフォントを指定。これの日本語も悪くないんやけどなー。ついでにサイズも指定。フォントは改善の余地ありまくりな気がする、、、！
h5 {
border-bottom: 1px solid black;
font-family:'HGゴシックE','Ariel';
font-size: 13pt;
}
などとやる。文字の間隔は広めのほうがキレイに見えるかな、、と思ったので
h5 {
border-bottom: 1px solid black;
font-family:'HGゴシックE','Ariel';
font-size: 13pt;
letter-spacing: 0.2em;
}
とletter-spacingを指定。文字の色は断然灰色がかっこいいと思ったので、文字色を指定。（ここから例は省略）。そして、前章と次章の区別をつけやすくするために前章との間に3px、次章との間に2pxほどpaddingを指定する。このままでは画面端、というかブロック端まで線が延びてしまうので、全長の半分ほどに長さを指定。この場合は、width:55%;と指定。これで以下のようなcss指定が完成する。
h5 {
border-bottom: 1px solid black;
font-family:'HGゴシックE','Ariel';
font-size: 13pt;
letter-spacing: 0.2em;
color=gray;
padding: 3px 2px;
width: 30%;
}
といわけで、おしまい。改善はぼちぼちやっていく「つもり」。
やっぱ、長文でだらだらってのもいいとは思ったけど読み手を考えない文章はアレすぎるので、章分けできるようになると読みやすいし、書きながら色々なことを整理できるしいんちゃうかなーと思った。本当はh5タグに画像やらをいれてもっとかっこよくする事もできるしそうしたいのだが、とりあえずは軽さ重視でこの設定でいこうと思う。シンプルでかっこいい程お手軽なものはない。
ある程度のカスタマイズの自由度を保証してくれるhatenaのサービスに感謝したい。
・・・が、どうも上の設定では満足いかない。
paddingをいじり、線と文字の間隔を開ける。さらに、フォントを変えてみると
h5 {
border-bottom: 1px solid black;
font-family:'HGｺﾞｼｯｸEd', 'HG正楷書体-PRO','Ariel'; font-size: 13pt;
letter-spacing: 0.2em;
color=gray;
padding: 24px 10px 0px 7px;
width: 55%;
height: 50px
}
これで少しはかっこいいのができただろうか。
