タイトル画像を表示させる

　今回のネタは「中途半端なMOBILER」さんの記事からです。「サブタイトル欄に画像タグを貼り付けるとタイトル画像として流用できる」というワザも、ココログサイト内ではやくもメジャーになりつつありますが、ＩＥ以外のブラウザでサイトを見ると、画像の下半分が切れて見えたりするという問題があります。

　今回はこの問題に挑戦してみましょう。

　さて問題の部分の「詞織」のソースを見てみると、こんな感じになってます。

＜ｂｏｄｙ＞
＜ｄｉｖ　ｉｄ＝”ｃｏｎｔａｉｎｅｒ”＞
＜ｄｉｖ　ｉｄ＝”ｂａｎｎｅｒ”＞
＜ｈ１＞詞織＜／ｈ１＞
＜ｈ２＞＜ｉｍｇ　ｓｒｃ＝”http://siolli.cocolog-nifty.com/blog/siteimg/banner.gif”／＞＜ｂｒ＞
si olli novae historiae apparent, quas legere volo. フルカワマサユキblog＜／ｈ２＞
＜／ｄｉｖ＞＜／ｄｉｖ＞

ページの冒頭部分、詞織のタイトル・バナー・サブタイトル・空画像のエリアを規定しているｉｄが＜ｃｏｎｔａｉｎｅｒ＞＜ｂａｎｎｅｒ＞であることがわかります。
　既存のスタイルシートを見てみると、

・ｃｏｎｔａｉｎｅｒ：四角いエリア。横幅・下地の色・枠線の色などを規定
・ｂａｎｎｅｒ：ｃｏｎｔａｉｎｅｒの中、頭にあるヘッド部分（詞織だとボーダーで区切られている、長方形の部分）に表示されるデータを規定。縦幅・フォントスタイル・ｃｏｎｔａｉｎｅｒとデータの接近度（ｐａｄｄｉｎｇ）などを規定。

　つまり、「サブタイトルに画像を配置したのに、ブラウザによっては画像の下半分が切れる」という場合、この「表示されるデータの縦幅」を変える必要があります。自作のスタイルシートを作成し（→こちらを参照してください）、その＃ｂａｎｎｅｒ部分の数値を変えてください。既存のスタイルだと、おそらく４０～５０くらいの幅になってると思います。詞織の場合、８５に設定してあります。
　変更を加えたスタイルシートをアップロードしてみると、どうですか？無事表示されました。
　
　この縦幅のなかに含まれるデータは「タイトル」「サブタイトル」です。「詞織」の場合、「タイトル」「サブタイトルの画像（４０ピクセル）」「サブタイトル」と３行をつかってますので、目安にしてみてください。

　ところでなんで画像が切れるの？という点ですが、ＩＥが「むしろ大雑把」という特徴を持っているということから生じています。「Ｏｐｅｒａ」などは厳密にスタイルを適用するので、既存スタイルの「縦幅が短い」を正確に反映してしまうのですね。ＩＥの場合、数値の指定がされてても、はみだした部分を表示するために無視しているわけです。便利といえば便利ですけどね。

＊フルカワはＳａｆａｒｉやＦｉｒｅｂｉｒｄをつかってるわけではないので、すべてのブラウザソフトでこのやり方が可能かどうか確かめたわけではないです。他のブラウザを使われてるかたが記事をトラックバックしていただければありがたいです。