« スタイルシートでフォント変更 | Main | オリジナルメニューを作る »

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

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

20031204.jpg


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

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

<body>
<div id=”container”>
<div id=”banner”>
<h1>詞織</h1>
<h2><img src=”http://siolli.cocolog-nifty.com/blog/siteimg/banner.gif”/><br>
si olli novae historiae apparent, quas legere volo. フルカワマサユキblog</h2>
</div></div>

ページの冒頭部分、詞織のタイトル・バナー・サブタイトル・空画像のエリアを規定しているidが<container><banner>であることがわかります。
 既存のスタイルシートを見てみると、

・container:四角いエリア。横幅・下地の色・枠線の色などを規定
・banner:containerの中、頭にあるヘッド部分(詞織だとボーダーで区切られている、長方形の部分)に表示されるデータを規定。縦幅・フォントスタイル・containerとデータの接近度(padding)などを規定。

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

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

*フルカワはSafariやFirebirdをつかってるわけではないので、すべてのブラウザソフトでこのやり方が可能かどうか確かめたわけではないです。他のブラウザを使われてるかたが記事をトラックバックしていただければありがたいです。

|

« スタイルシートでフォント変更 | Main | オリジナルメニューを作る »