自作スタイルシートの覚え書き: 5thstar_管理人

ココログに引っ越してきて以来、@nifty謹製の「ライン：ネイビー」というスタイルシートを使ってきたけれど、これだと、青地の背景に白いゴシック体の文字がちょっときつすぎる。眼が疲れる。

ということで、styles.cssをちょっといじって文字色を変えて、アップロードしたら、ちょっと雰囲気が変わった。しめしめいい感じ。

と思っていたら、誰かからコメントが入ったり、新しい記事を書くたんびに、上書きされてしまうのね、styles.css。そうかみんなが騒いでいたのはこの仕様のことか。

ということで、ココログ内でのスタイルシートカスタマイズのあるべき姿について、ちょっと調べてみました。

詞織: 自作スタイルシートの適用

どうもこれがいちばんお手軽らしい。

body要素内でlink要素使うのは邪道
という問題はあるけれど、ま、いいか。

トモダチのトモダチ：Javascript を利用してスタイルを変更する(2)

これだとXHTMLの文法違反は避けられる。でも、これって、スタイルシートじゃないよなぁ... 悩みは深し。

もっといい方法があったら教えてくださいまし

いちばんいい解決策は@niftyがスタイルの設定のページに

「記事投稿のたびにスタイルシートを上書きしない（上級者向け設定）◎はい ○いいえ」

という項目を追加してくれることだと思うぞなもし。

あるいはユーザー自作のスタイルシートのアップロード（上級者向け設定）を許してくれるか。

At your own risk! ってやつね。

＊＊＊＊＊

[2004/1/1 追記]

まちゃみさんのページ
http://ftokyo.cocolog-nifty.com/sysop/2003/12/55.html

でIE5.5での見え方を教えてもらったので、スタイルシートの修正をやってみた。

◆IE 6.0でIE5.5の見え方の確認

まちゃみさんのページ
http://ftokyo.cocolog-nifty.com/sysop/2003/12/55_1.html
insomniaさんのページ
http://insomnia.jp/days/archives/e20031230_0157.html

を経由して、娘娘飯店しるきぃうぇぶさんのページ
http://www.remus.dti.ne.jp/~a-satomi/bunsyorou/Doctype-Switch_situation.html

Internet Explorer 6.0 (Win) について
* DOCTYPE 宣言の出現以前に半角空白または改行以外の文字が存在する場合、有無を言わさず Quirks モードとなってしまうようです。という事は XML 宣言のあるXHTML の場合は、上記理由でQuirks モードとなってしまうという〜。なんじゃそりゃ。

という記述を発見したので、ローカルに保存した自分のページの一行目の

<!DOCTYPE html PUBLIC "-//W3C//DTD ..... >

の手前に  を追加したら、IE6.0で無事？「本文の下にふっ飛ぶ右サイドバー」を再現することができました。なんじゃそりゃ〜＞Microsoft

◆なんちゃってデフォルトスタイルの変更

@nifty謹製のスタイルシートにあまり手を加えたくないので、とりあえず必要最低限の応急修理。

詞織さんのページ
http://siolli.cocolog-nifty.com/blog/2004/01/post_1.html
を参考に。

「本文の下にふっ飛ぶ右サイドバー問題」

#container {
    line-height: 140%;
       margin-right: auto;
     margin-left: auto;
     text-align: left;
     padding: 0px;
     width: 800px; <---- ここを 802px; に変更

IE5.5では領域のボーダーの解釈が標準と異なるということなので、スタイルに「ライン」を選んでいる人は、左右のサイドバーの両脇にある１ピクセルのラインの分だけ全体の幅に余裕を持たせるわけですね。

「背景が暗いスタイルではカレンダーの見え方が最悪になる問題」

スタイルシートに

th, td {
color: #nnnnnn;
}

を追加。「#nnnnnn」の文字色は、本文の文字色などに合わせておく。

例えば

.content {
     padding: 15px 15px 5px 15px;
     background-color: #000011;

     color: #cccccc; <---- この部分

HTMLソースを見ると、カレンダーが

などで修飾されているけれど、どうもIE5.5ではこの部分がナマの<TH>とか<TD>と思われているみたい。ということで、文字色を本文で使っているのと同じものに合わせてみた。みなさんが試される時は必ずいろいろなブラウザで動作確認してください。

「引用文のフォントサイズ」

.content blockquote {
     line-height: 150%;
     font-size: x-small; <---- この部分を追加
     }

これは好みの問題だけど、私は引用文のフォントサイズを本文より小さくさせたかったので、こうしてみました。

＊＊＊＊＊

[2004/1/12 追記]

フルカワマサユキさんの記事を拝見して、macstyles.cssの中身をstyles-5thstar.cssに取り込んでみました。新着記事一覧の文字化け問題が解決するのか、って思ったけど、そうではなくて、サイトのコメント欄にMacOS XとIE 5.2の組み合わせで入力すると文字化けしてしまう問題、なんてのがあったんですね。

私のこの問題のほうは、どうもクィック投稿の内容にUTF-8とShiftJISで矛盾する文字が紛れ込むか紛れ込まないか、というのがポイントらしい。MacOS X版Mozillaの設定あるいは仕様の限界のような気もするけれど、追求する気力が無いので、もうしばらく様子を見ることに...

話は変わってRSSリーダーの問題。これもフルカワマサユキさんのところで話題になってる。私自身はRSSリーダーを使わない人なので、この問題にはindifferentなのだけど、もともとは@nifty御社がスタイルシート変更の自由度をユーザーに与えなかったこと、と、ココログユーザーの数が、これまでの日本のblog界を凌駕しかねない勢いであることからくる既存のRSSリーダー開発者との葛藤が問題の根本であるわけで、私は個人的にフルカワさんの立場を支持するであります。いつもありがとうです。

そもそもMozillaの前のNetscapeの前のMosaicがなんであの時代にあれだけシェアを伸ばして世界征服することができたかというと、清濁合わせ飲む度量の寛さがポイントだったわけで...