BLOCKBLOGユーザのためのCSSハック [技術]

おれがブログスペースを借りているここBLOCKBLOGは、その管理ツール画面の「デザインの設定」で直接CSSをいじってブログのデザインをそれなりに手軽に変えられるのだが、このCSS部分を直接いじってる人はそれほど多くないのではないだろうか。

たしかに、このCSS直接指定の部分はぱっと見、得体の知れない文字列が並んでおり、敬遠されるに足る面持ちではあるのだが、基本的、というのはつまり、いじるとその効果がてきめんな部分というのは存外に少なく、CSSを直接指定してデザインをいじると言っても、やってみれば分かるがそれほど大したことでもない。

ここではBLOCKBLOGが提供している基本デザインの「blue1」を例に取り解説を進めるが、CSS自体は一般的なものなので、他のブログサービスを使っているブロガーにも転用が効くものだと思う。

ちなみに、BLOCKBLOGでは一つのアカウントでブログが二つまで作れるので、もしまだ一つしかブログを作っていないのであれば、デザインに限らず色々なカスタマイズの練習場・実験場としてもう一つブログを新規作成することをおすすめする。

さて、CSSでデザインをカスタマイズするにあたって、デザインをいじるブログを便宜的に、

• ヘッダ（タイトル）部
• メニュー部
• エントリ（記事）部

の三つに分けて話を進めよう。あと、CSSをいじるとどこのデザインに反映されるのか、ということを分かりやすくするために図表を用意したので、これを別窓で開いておくといいまもしれません。

ヘッダ部

まず、「blue1」のヘッダ部のCSSを見てみよう。

 /* --------------------------------- header
--------------------------------- */
#header {
background: #2e2eb2
url(http://www.blockblog.jp/skin_img/head_2e2eb2.png) no-repeat;
border-bottom:4px solid #ffffff;
width: 710px;
}
#header h1{
margin:0px;
padding:40px 0px 10px 10px;
color:#ffffff;
font-weight: bold;
font-size:180%;
font-family: "verdana", "arial", "helvetica", "Sans-Serif";
}
#header a{
color:#ffffff;
text-decoration:none;
}

この文字列の「意味」をざっくり言うと、「#header {...}」の部分でタイトル部の背景（図表1）を、「#header h1{...}」の部分でタイトルの文字の書体・色（図表2）がそれぞれ指定されている。ここで、「いじるとすぐさま霊験あらたか」なのは、「#header {...}」ではbackground属性の部分（「属性」という言い方が何やらコムヅカシイ感じだが、まあ「そういうふうに言うものだ」と思ってほしい）、および「#header h1{...}」ではcolor属性の部分だ。この部分を一つひとつ見ていこう。

「#header {...}」のbackground指定では、ヘッダ部の背景に用いる画像が「url(...)」で指定されている。つまり、もしあなたがどこかに画像ファイルをアップロードできるなら、その画像ファイルのURLをこの「url(...)」の「...」に指定して、それを背景画像とすることができる。

また、「背景にわざわざ画像ファイルを使うなんてしゃらくさい」という向きは、「background:」から「no-repeat;」までをざっくり削除して、その代わりに「background-color: 色指定;」というふうに、直接色を指定する手もある。ここでの色指定は「#（6桁のRGB指定）」という形式で、その6桁のRGB指定をどうするかについては、たとえばここなどを参照してほしい（他にも同様のページは「色指定」でググればたくさん出てくる）。

つぎに、「#header h1{...}」のcolor指定だが、これは文字色を指定するもの。この「blue1」では#ffffff、つまり白が文字色として指定されている。だから、たとえば背景が淡い感じであれば、白だとむしろ文字が目立たないのでもっと濃い色、極端には黒である#000000を指定、などというふうにする。

他にも、font-weight属性で太字の程度が、font-size属性で文字のサイズが、font-familyで文字の書体が指定できるので、たとえばここなどを参照して、余裕があれば遊んでみよう。

メニュー部

まずはここもCSSを見てみよう。

 /* --------------------------------- left menu
--------------------------------- */
#menu {
float: left;
width: 200px;
margin: 0px;
padding: 5px;
background-color: #fafafa;
}
#menu dl{
margin:0px;
padding:0px;
}
#menu dt{
margin-top: 0px;
margin-bottom: 1px;
margin-left:auto;
margin-right:auto;
padding: 5px;
border: #ffffff 1px solid;
width: 180px;
background-color: #3c3c77;
color: #ffffff;
font-size:1em;
font-weight:bold;
font-family: "verdana", "arial", "helvetica", "Sans-Serif";
}
#menu dd{
padding: 2px;
font-size:0.9em;
margin:0px;
}
#menu dd.from{
margin-left: 0.5em;
margin-bottom: 0.2em;
}

（ここでは、左にメニューがある場合を想定して話を進めますが、右にメニューがある人は「#menu」を「#rmenu」に読み替えてください）

このセクションで重要なのは、「#menu dt{...}」と「#menu dd{...}」の部分。「#menu dt{...}」でメニュータイトル（図表3）が、「#menu dd{...}」でメニュー本体（図表4）がいじられている。

具体的に見ると、「#menu dt{...}」では背景色に「#3c3c77」（濃い青）、文字色に「#ffffff」（白）が指定されている。それでは「#menu dd{...}」は、と言うと、フォントサイズが基本サイズを1としたときの0.9倍ということが指定されてはいるが（「font-size:0.9em;」という部分）、background-color属性もcolor属性もない！　それでは、このメニュー本体部の背景色・文字色はどうやって指定されているのだろうか？　それをちゃんと理解するには「CSSの階層構造」という、ちょっとばかり厄介な部分に触れなければならない。

ここで、やや唐突だが、「哺乳類」の階層構造を考えてみよう。哺乳類はその類全体の属性として「体温：恒温」、「繁殖法：胎生」、「心臓構造：二心房二心室」などの特徴（属性値）を持つ。そして、その哺乳類のなかでまた、人なら「歩行形式：二足歩行」などの追加的な属性値を持ち、カモノハシでは「繁殖法」属性が「卵生」となる。つまり、「哺乳類」という類が持つ基本特徴を引き継ぎつつ、その下位区分でもろもろの属性の追加・変更がなされる、というわけだ。アウトライン形式で示すと次のようになる。

• 哺乳類
  体温：恒温、繁殖法：胎生
  • ヒト
    歩行形式：二足歩行
  • イヌ
    歩行形式：四足歩行
    • ラブラドール・レトリバー
      毛長：短毛
    • ゴールデン・レトリバー
      毛長：長毛
  • カモノハシ
    繁殖法：卵生

さてそれでは、ここで説明している「blue1」の階層構造はどうなっているか、というと、大略次のようになっている（ほんとはもっと細かい階層になっているけど、今まで出てきた階層、もしくはこれから出てくる階層だけをピックアップして表記）。

• body
  • #header
    • #header h1
  • #menu
    • #menu dt
    • #menu dd
  • #content
    
    • #content h2
      
    • #content .day .entry h3
      

そう、炯眼なあなたはこれでもう気づいたと思うが、先の「#menu dd{...}」内で背景色の指定も文字色の指定もないのは、この「#menu dd」の上位階層である「body」および「#menu」内でこれらの属性指定が行われているからなのだ。もったいぶらずにどこで何が指定されているかを言えば、body内で文字色が、#menu内で背景色がそれぞれ指定されている。先に挙げたメニュー部、および次に挙げるbody部のCSSを見てそのことを確認してほしい。

 body {
margin:0px;
padding:0px;
background:#fafafa;
color:#000000;
}

つまり、bodyのcolor属性の#000000とmenuのbackground-color属性の#fafafaが、#menu ddに引き継がれている、というわけだ。

エントリ部

これまででほぼCSSの仕組みの大枠が分かったと思うので、このエントリ部に関しては駆け足で、CSSのどの部分をいじるとどこのデザインがどうなるのか、ということだけべべべっと記述する。background-colorなどの属性が云々についてはすでに習得済みと見なしてここではとくに説明しない。

• #content
  エントリ部全体。
• #content h2
  日付表示のデザイン（図表5）。
• #content .day .entry h3
  エントリタイトル（図表6）。
• #content .day .entry h3 ,category
  カテゴリ表示（図表7）。
• #content .day .entry .entrybody
  エントリ本体（図表8）。
• #content .day .entry .posted
  投稿日時および投稿者名（図表9）。
• #content .day .entry .url
  エントリURL、コメント数、トラックバック数表示（図表10）。

と、まあこんなもんで、だいぶ長くなっちゃったから終わりにするけど、あと主要なところで説明していないのは、コメントとトラックバックの表示デザインと、リンクの書式ぐらいなものだから、これらについては明日余裕があれば補足説明をしようかな、と。

それじゃ、不明な点や分かりにくい点があれば、お気軽にコメント欄までお寄せください。