先日の記事で Wiki 投稿向けの CSS のカスタマイズをご紹介しましたが、このように CSS をカスタマイズしたときに一番困るのが、実際に投稿してみないと見た目が確認できない点です。投稿時に「投稿内容を確認する」ボタンで表示されるページには CSS のカスタマイズが反映されないため、いまいちイメージが掴めません。タグの挙動を大きく変えている場合はなおさらですね。

そこで、今日はブラウザの User Stylesheet という機能を使って、投稿内容確認のページにカスタマイズした CSS を適用する方法をご紹介します。

User Stylesheet とは

User Stylesheet は、Web ページを表示する際にユーザーが指定した CSS ファイルの設定を反映させる機能です。文字が小さすぎたり、背景色と文字色が似ていて読みづらいページなどを、閲覧者側で適切に調整できるようにしよう、というのが本来の目的です。もちろん、閲覧者側で設定したスタイルはその閲覧者のブラウザ上でのみ適用され、他の閲覧者には影響を与えません。

User Stylesheet の設定方法

User Stylesheet を設定する方法は、ブラウザごとに異なります。ここでは Firefox, Opera, Internet Explorer 6 について、User Stylesheet の設定方法をご紹介します。

Firefox

Firefox では、プロファイルディレクトリの "chrome/userContent.css" が User Stylesheet として使用されます。標準では User Stylesheet の場所を指定したり、簡単に ON/OFF する機能はありませんが、Web Developer 拡張で実現できます。Web Developer 拡張はそれ以外にも便利な機能を満載していますので、この機会にインストールすることをお勧めします。

また、Firefox の独自拡張として、URL を元にして User Stylesheet の適用を制御する機能があります（後述）。

Opera

Opera の User Stylesheet サポートは非常に優秀です。任意のファイルを User Stylesheet として使用できるほか、メニューやツールバーボタンで簡単に User Stylesheet を ON/OFF できます。また、User Stylesheet を有効にした際にページ本来のスタイルを残すかどうかも選択できます。

User Stylesheet の設定は以下の手順で行います。

1. メインメニューから [View]-[Style]-[Configure modes] を選択。
2. 「Presentation Modes」ダイアログが表示されます。
3. 「My style sheet」に User Stylesheet として適用したい CSS ファイルを指定。
4. 必要に応じて、「User mode」の各チェックボックスを設定する。お勧めは、「My fonts and colors」のみ OFF で、それ以外すべて ON です。
5. 「OK」ボタンをクリック。

これで User Stylesheet が設定されました。後は、メインメニューから [View]-[Style]-[User mode] を選択すれば User Stylesheet が適用されます。解除する際は、[View]-[Style]-[Author mode] で元に戻ります。

Internet Explorer 6

Internet Explorer 6 も User Stylesheet の設定が可能です。任意のファイルを User Stylesheet に指定できますが、簡単に ON/OFF する機能はありません。プラグインなどで実現できるかもしれませんが、軽く探した限りでは見当たりませんでした。設定方法は以下のとおりです。

1. メインメニューから [ツール]-[インターネットオプション] を選択。
2. 「インターネット オプション」ダイアログが表示される。
3. 「全般」タブを選択。
4. 右下の「ユーザー補助」ボタンをクリック。
5. 「ユーザースタイルシート」の枠内、「自分のスタイルシートでドキュメントの書式を設定する」のチェックを ON にする。
6. 「スタイルシート」に User Stylesheet として適用したい CSS ファイルを指定。
7. 「ユーザー補助」ダイアログの「OK」ボタンをクリック。
8. 「インターネット オプション」の「OK」ボタンをクリック。

ただし、残念ながら livedoor blog の投稿ページは DOCTYPE 宣言がきちんとされておらず、ブラウザが互換モードで動作してしまいます（DOCTYPEスイッチ参照）。そのため、Internet Explorer 6 では一部のスタイルが正しく動作しません。Internet Explorer 7 に期待しましょう。（＾＾；

投稿内容確認ページのスタイルを指定する

User Stylesheet の設定方法がわかったところで、さっそくそれを使って投稿内容確認ページのスタイルを変更してみましょう。まずは、HTML のソースを見て、CSS のセレクタをどのように記述すればよいかを検討します。投稿内容の部分は ＜td class＝"textcell cmscolor2"＞ という要素で囲われていますので、セレクタは "td.textcell 要素名" でうまくいきそうですね。

では、適当な CSS ファイルを作成し、手始めに以下ように入力してください。

td.textcell h1 {
    border-style:   none none dashed none;
    border-width:   1px;
    font-size:      16px;
}

そして、前述の方法で User Stylesheet として設定し、ご自分の適当な投稿（見出し 1 を使っているもの）で投稿内容確認ページを表示してみてください（Opera を使っている場合は、User Mode に変更するのを忘れずに）。見出し 1 の部分に破線のアンダーラインが引かれているはずです。しかし、なにか変ですね。フォントサイズの指定が機能していないようです。

User Stylesheet はそれぞれの要素のデフォルトスタイルを変更するものなので、もし Web ページ側の CSS で同じ指定があると上書きされてしまいます。その場合は、以下のように "!important" という指定をパラメータの後に付加します。

td.textcell h1 {
    border-style:   none none dashed none;
    border-width:   1px;
    font-size:      16px !important;
}

この状態でブラウザを再起動し、もう一回同じページに移動してください。今度はフォントサイズが正しく反映されているはずです。後は、同様にして必要な要素のスタイルを指定していけば、blog での表示とほぼ同じものが再現できるはずです。

なお、User Stylesheet の内容を変更したときは、ブラウザを再起動しないと変更が反映されませんのでご注意ください。

Firefox の拡張機能

最後に、Firefox でのみ使用できる特殊な CSS の指定をご紹介しておきます。User Stylesheet は原則的にすべてのサイトに適用されますので、他のページでも同じクラスを使用していると表示が変わってしまいます。実際、上記の指定方法でも他の blog 管理ページの一部に影響が及んでしまいます。

そこで、Firefox ではドメインや URL を指定して User Stylesheet の適用範囲を限定できるようになっています。具体的には、以下の記述が可能です。

@-moz-document domain(ドメイン名) {
    /* 指定されたドメイン名（サブドメイン含む）でのみ有効 */
}

@-moz-document url(URL) {
    /* 指定された URL のページでのみ有効 */
}

@-moz-document url-prefix(URL) {
    /* URL で始まるページでのみ有効 */
}

それぞれのパラメータはコンマ区切りで複数指定できます。この機能を使えば、投稿内容確認のページのみにスタイルが適用できて、非常に便利です。Firefox ユーザーの方は、ぜひ有効利用してください。

以上で、投稿内容確認ページのスタイルを自由に変更できるようになりました。CSS ファイルを書くのが手間ですが、それさえ済めば、より快適に Wiki 投稿ができると思います。ぜひ試してみてください。