るーのプログラミング

このブログ、左右の幅が狭いなーとつねづね思っていたので、ちょっと広げてみた。広げるに当たっては、実践 Web Standards Design でCSSについて勉強しつつ、便利と評判のFirebugでHTMLの構造を調査した。

で、ごらんのとおり70pxほど幅が広がっているのだけど、Firebugは評判なだけあってすごい！

Firebugをインストールすると、右下に虫のマークが表示されて、それをクリックすると、Firefoxの下半分がFirebugの画面になる(Ctrl+クリックなら別ウィンドウで開く)。左半分にHTMLがツリー構造で表示され、属性（タグ）をクリックするとそこに設定されているCSSのスタイルが継承関係を含めて右半分に表示される。また、メニューの「調査」をクリックしてから、ページにカーソルを合わせることで、ページの見た目からその位置の属性（タグ）が一発でわかる。CSSやHTMLは編集ができて、修正がどのように見た目に影響するかがすぐに分かる。そんな感じで、Firebugでページ内を調べた結果、幅を広げるにはstyles.cssで定義されている#containerのwidthプロパティと、#centerのwidthプロパティを大きくすればよいことが分かった。

なので、ココログのカスタムCSS機能で、↓なのを追加してみた。もともとの#containerや#centerは上書きできなくて、同じ属性が下のほうに追記されるらしく、後勝ちのルールに従って有効になるみたい。

/*** styles.cssの上書き修正 ***/
/* 大枠のdiv属性 */
#container {
    width:772px; /* オリジナルは702px */
}
/* 本文枠のdiv属性 */
#center {
    width:570px; /*オリジナルは500px */
}

最初、#containerの"#"の意味が分からなくて苦労した。おそらくIDセレクタ(一意セレクタ)のことで、id="container"の属性を指しているんだろうとは思ったのだけど、その前にあるはずの「属性名」がない。div属性を意味するのか、それとも属性名を気にしない（idで一意に定まるので)のかなぁと想像したのだけど、この例がIDセレクタの項目に載ってない・・・なぜだーと思ってググったら、ユニバーサルセレクタ(全称セレクタ)"*"が省略されている形らしい。ユニバーサルセレクタの項目を見たら確かに載っていた。

"*"の後に属性セレクタ、idセレクタ、擬似クラスを続ける場合は"*"を省略することができます。

知らんわ～。

本ブログのデザインは今までおしゃれ（？）なチャイナ柄だったのですが、コードをうまく表示できないなど、微妙な表現力に不満があったので、自分で作ることにしました。

チャイナ柄はココログ提供のデザインテンプレートなのですが、細かな修正ができないんですよね。コピーさせてくれれば良いのにな。パクろうと思えばパクれるのでしょうが。

というわけで、しょぼいデザインになりましたが、徐々に改善していきたいと思います。