今日は久しぶりに、blog と Wiki の活用をネタにしようと思います。うちの blog は見かけ上「すりガラス」のデザインそのままに見えますが、記事内のタグは密かにカスタマイズされています。Wiki 文法で書いた文章の見栄えを良くすることを主眼にしてスタイル設定していますので、同様に Wiki 文法で blog を書こうとしている方々に少しでも参考になればと思います。

なお、この記事は「すりガラス」デザインをもとにして書いています。もしかしたら他のデザインではクラス名などが違っているかもしれません。その際は、ブラウザでページのソースを表示させて正しいクラス名を見つけてください。m(_ _)m

CSS のカスタマイズ方法

まずは、livedoor blog での CSS のカスタマイズ方法について、簡単にご紹介します。livedoor blog では、管理ページから簡単に CSS をはじめとしたページデザインのカスタマイズが行えます。手順は以下のとおりです。

1. 管理ページに移動します。ブログ記事の投稿などをするページのことです。
2. ページ上部のメニューから、「ブログの設定/管理」をクリックします。
3. 左の段にある「ブログの設定/管理」のメニューから、「デザインの設定」をクリックします。
4. 右の段の最下部にある「カスタマイズ」をクリックします。
5. 右の段の上部にあるメニューから、「スタイルシート(CSS)」をクリックします。
6. テキストボックスに CSS の内容が表示されていますので、好みに合わせてカスタマイズします。
7. 右の段の最下部にある「この内容で保存する」ボタンをクリックします。
8. 「設定が完了しました」と赤文字で表示されたページに移動するはずです。
9. 左段の上部にある「このブログについて」のメニューから「ブログに設定を反映（再構築）」をクリックします。
10. 右の段の中ほどにある「再構築する部分を指定」のボックスで、「デザイン（CSS）」を選択し、「ブログを再構築する」ボタンをクリックします。
11. 何回かページが切り替わります。「サイトの再構築が完了しました」と表示されたらデザインが反映されているはずです。

livedoor blog では、CSS は全ページ共通です。ページごとにデザインを変更することはできません。実際にはいくつか方法はありますが、そのあたりは今回の趣旨から外れますので、ここでは触れません。

なお、上記の作業をしても変更が反映されていないページが表示されることがあります。そのような場合は、ページをリロード（F5 キーを押す）してみてください。

DOCTYPE スイッチについて

Internet Explorer, Firefox, Opera など、主要なブラウザのほとんどは古いバージョンとの互換性を保つための「互換モード」（名称はブラウザによって違います）を持っています。とくに CSS の解釈については過去のブラウザでのバグが多く、互換モードでは正常に動作しない設定が多数あります。

ブラウザがページを互換モードで表示するかどうかは、HTML の先頭に記述する「DOCTYPE 宣言」というもので判断されます。このような機能を「DOCTYPEスイッチ」と呼びます。手っ取り早く互換モードを無効にするには、HTML の先頭に以下のように記述すれば OK です。

＜!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http：//www.w3.org/TR/html4/loose.dtd"＞

※タグに変換されるのを防ぐため、"<", ">", ":" を全角にしています。バグ報告したんですが、早くなおらないかなぁ・・・（＾＾；

具体的に livedoor blog で上記の設定をする手順は、以下のとおりです。

1. 管理ページに移動します。
2. ページ上部のメニューから、「ブログの設定/管理」をクリックします。
3. 左の段にある「ブログの設定/管理」のメニューから、「デザインの設定」をクリックします。
4. 右の段の最下部にある「カスタマイズ」をクリックします。
5. 右の段の上部にあるメニューから、「トップページ」をクリックします。
6. テキストボックスに HTML ソースが表示されますので、先頭に前述の DOCTYPE 宣言を挿入します。
7. 右の段の最下部にある「この内容で保存する」ボタンをクリックします。
8. 「個別機次ページ」、「カテゴリアーカイブ」、「月別アーカイブ」でも同様に DOCTYPE 宣言を挿入します。
9. 左段の上部にある「このブログについて」のメニューから「ブログに設定を反映（再構築）」をクリックします。
10. 右の段の中ほどにある「再構築する部分を指定」のボックスで、「全てのページ」を選択し、「ブログを再構築する」ボタンをクリックします。
11. 何回かページが切り替わります。「サイトの再構築が完了しました」と表示されたら設定が反映されているはずです。

記事内に限定してスタイルを変更する方法

前置きが長くなって申し訳ありませんが、blog のスタイル変更に関してもうひとつ知っておくべきことがあります。単純に CSS でタグのスタイルを変更してしまうと、ブログ記事以外の場所、例えばサイドバーやタイトル部分にまで影響が及んでしまう可能性があります。影響が記事内に限定されるように CSS を記述することが必要です。

それには、CSS の「セレクター」の記述を工夫します。HTML テンプレートを変更していなければ、記事本文は ＜div class＝"main"＞、追記の部分は ＜div class＝"mainmore"＞ というタグで囲まれています。これを利用して、"div.main タグ名, div.mainmore タグ名" というようにセレクターを記述するとよいと思います。

例えば、見出し 1 の文字色を赤にするには、以下のように記述します。

div.main h1, div.mainmore h1 {
    color: red;
}

このように記述することで、記事内の h1 タグに限定してスタイルを指定することができます。

カスタマイズ例

それでは、この blog で設定しているスタイルを少しご紹介しようと思います。と言っても、基本的には表示を整えているだけで、大したことはありませんが・・・（＾＾ヾ。以下のスタイルはすべてもともとの CSS の後に追加する形で記述しています。

見出し文字列

見出し 1 のスタイルは以下のようになっています。ボーダーを使ってアンダーラインを引く技は定番ですね。ベースになっているスタイルが淡い色調で実線を引いてしまうと強すぎるため、点線にしています。

div.main h1, div.mainmore h1 {
    font-size:      16px;
    border-style:   none none dashed none;
    border-width:   1px;
    border-color:   #666;
    padding-bottom: 2px;
}

見出し 2 はこんな感じです。見出しはレベルのごとの区別を明確にしつつ、他の部分よりも強い印象を与えるのがポイントですね。すべての見出しに似たようなスタイルを割り当てられることが多いですが、私はレベルごとにまったく違うスタイルにするほうがよいと思っています。ただ、今のスタイルは見た目が少しかっこ悪いんですよね(笑)。もう少し工夫したいと思っているところです。

div.main h2, div.mainmore h2 {
    font-size:   16px;
    border-style: none none none solid;
    border-width: 4px;
    border-color: #888;
    padding-left: 4px;
}

見出し 3 は使わないことにしていますので、スタイルも設定していません。（＾＾；

リスト

リストは元のスタイルほぼそのままで、マージンの調整をしているだけです。livedoor blog は改行を改行タグに変換するので、Wiki 投稿で入力するときリストの上下に空行を入れると、リストの上下に空間ができてしまいます。かといって空行を入れないと入力画面で非常に読みにくくなるので、マージンに負の値を与えて空間を調整しています。あまり褒められた使い方ではありませんが、仕方ありません。

注意点として、Internet Explorer と Opera はリスト全体の字下げに margin を使っていますが、Firefox は padding を使っているようです。ですので、以下のように padding を 0 にしておかないと Firefox での表示がおかしくなります。

div.main ol, div.mainmore ol {
    margin: -4px 0px -4px 32px;
    padding: 0px;
}
div.main ol li, div.mainmore ol li {
    margin:  4px 0px 4px 0px;
    padding: 0px;
}

番号なしリスト (ul) もほぼ同じです。

引用

livedoor の Wiki 文法の最大の欠点が、pre タグに対応する指定がないことです。コマンドラインの入力例やプログラムソースなどを載せることが多い私の blog では、これは大問題です。そこで、引用 (blockquote) が pre タグとして機能するようにスタイルを設定しています。

div.main blockquote, div.mainmore blockquote {
    font-family:   monospace;
    font-size:     12px;
    margin-top:    0px;
    margin-bottom: 0px;
    padding:       4px 8px;
    overflow:      auto;
    _width:        410px;
    white-space:   pre;
}

ポイントは、"white-space: pre;" の行です。この指定があると、pre タグ同様に空白や改行がそのまま適用されるようになります。さらに "font-family: monospace;" で文字フォントを固定ピッチのものにしています。

また、長い行の表示がはみ出してしまうのを防ぐために "overflow: auto;" を指定しています。この指定があると、行がはみ出した場合に横スクロールバーが表示されます。"_width 410px;" は Internet Explorer のバグへの対処で、引用ブロックの横幅を決めうちで設定しています（こちらの記事参照）。これを指定しても、依然として縦横両方のスクロールバーが表示されるという間抜けな挙動になりますが・・・。IE7 ではなおっているのかなぁ・・・（´ー｀；

本文と追記の間の空間をなくす

標準のスタイルでは、本文と追記の間にかなりの空間が開いてしまい、続きの文章を追記に逃がすとちょっとかっこ悪くなってしまいます（すりガラスデザイン特有の問題かもしれませんが）。しかし、Wiki 投稿ではトラックバックの文章などに Wiki 文法がそのまま表示されてしまうため、できれば導入部分だけなるべく Wiki 文法を使わずに本文に書き、記事本体は追記の側に逃がしたいところです。そこで、この本文と追記の間の空白をなくしてしまいましょう。

div.main {
    padding: 15px 0px 0px;
}
div.mainmore {
    padding: 0px;
}
div.posted {
    padding-top: 40px;
}

本文と追記の間に空間が開くのは、記事とその下のトラックバックなどのリンクの間に空間を空けようとした副作用だったようです。div.main や div.mainmore で指定されていた空間を 0px にし、代わりに div.posted で指定するようにしました。これで他の部分に影響を与えずに問題の空白のみを取り除くことができました。

思いのほか長くなってしまいましたので、このへんで。そのほかテーブルや定義リストなども多少スタイル設定しています。詳細は CSS のソースをご覧ください。また、これらのほかにもかっこいいスタイル指定などがありましたら、教えていただけると嬉しいです。（＾＾）