青磁鼠のスキン、ネットスケープでは思いっきりくずれて表示されていたようなので、いったん元に戻しました。
(ネットスケープでは、この既製のスキンでも、本文右側の文字が切れてるそうな。ナゼ?)
スキン、何もわからないまま見よう見真似でExplorerで作って各文字サイズで表示を確認したけれど、数日後にたまたまFireFoxで見たら、怒鳴ってるかのように文字が巨大化していてビックリ。
そのうえ、太字にしたいタイトル部分が細字で、細字のままで構わない本文が太字に。
私のスキンを元に作ってあげたRのスキンも同様。
見る環境でデザインが変わるとは知っていたけれど、作った時にはそのことをすっかり忘れてた。
太字指定が生きていないだけならわかるけれど、なぜ何も指定していないところが太字に??と、??だらけになってあれこれいじっていたら、文字はとりあえず直ったものの、Rのスキンのタイトル部分に入れてある画像がFireFoxでは表示されずに空欄になっている。
文字はHTMLとCSSで指定が重複しまくっているので思ったように表示できなくなるのはわかるけれど、一箇所でしか指定していないタイトル部分の画像がナゼ?と、ブラウザの設定のせいかと思って(普段FFではポップアップとかブロックしているので)ツールバーをいじっていたら、「JavaScriptコンソール」というものを発見。
何だろう、とクリックしてみると、「プロパティの値が終わらずに末尾に余分な’VERDANA’が続いています。’FONT-SIZE’プロパティの値をパース中にエラーが発生しました。このスタイル宣言は無視されました」 等々、ソースのエラーがずらずら。
ああ、こういうのがあるから設定が反映せずにデザインが崩れてしまうのか。
こういう時こそ、前に教えてもらったHTML診断を使うべきだったんだ、と思い、こんなにエラーだらけでよくExplorerはあそこまで表示してくれてるなあ、と感心。
で、ふと、「そういえば、ページのソースって右クリックで見られるんだっけ。私が書いたのはどんな風に表示されてるんだろう」 と見てみたら、
ひゃ~っ! 私が書いた通りのがそのまま表示されてる! 知らなかった。
「/* --- この以下3行を入れたら、外に出てた記事タイトルと日付が白枠内に入った ---*/」
「/* DIV.POSTのPADDING-topを変えると上枠から日付・タイトルまでの余白が変わる */」
等々、試行錯誤の過程でわかったことを忘れないようにCSSソース内にメモしまくり。
他の人のページは、と見てみると、そんな私的メモを自作スキンのCSS内に書き込みまくってるのは私くらいだった。
っていうか、ふつう自作するなら、それくらいはメモしておかなくても当然わかってるものなんだろう。
恥ずかしいので青磁鼠のソースは人前に出せません。
っていうか、メモは別のところにしれ。