短いタイトルと長い見出し
日記タイトルを、フルスペルで表示するようにいたしました。
しかし、タイトルバーの表示は短くしたかったので、設定項目を変えることはできません。
そこで、CSS2のcontent特性で内容を書き換えました。
h1 { content: "Aerial ReCord\A on\A Hatena::Diary"; padding: 23px 5px 59px 5px; _padding: 58px 5px 24px 5px; }
タイトルが長いのと、デザイン的意図で、3行に分けて描画させました。\A
は、CSSで改行文字を表します。
padding
は、はてなテーマのcssでの数値を参考に、複数行用に調整しなおしました。
_padding
は、IE6対策です。IE6ではcontent特性を解釈しないので、元々のタイトルが表示されてしまいます。表示位置も、元々の場所にした方が、良いでしょう。
これは、特性名の先頭のアンダースコアが無視されるというIEの振る舞いを用いたもので、CSSの正しい記述ではございません。
この方法では、h1要素自体を書き換えてしまうので、日記トップへのリンクが働かなくなってしまいます。
これを防ぐためには、h1ではなく、その子要素のaを書き換えるようにすれば良いのですけれど、display特性をblockにしたり、位置調整をやり直したりと面倒ですので、今回はここまでです。
追記
Fx2.0.0.1では書き換わっていませんでした。
要素そのものにcontent特性は使えない、ということでしょうか?