blockquoteに画像を使用

サイト休止時にいろんなBlogを見ていて「かっこいいなぁ〜」と思ったのが引用時に画像を使用していることでした。見た目だけでなく、直感的に引用していることがわかるし、さっそくまねすることにしました。ところが、またもやIEの野郎が他と違う表示をしたので、その対策メモです。

XHTMLでは、引用するときにその引用個所を「<blockquote></blockquote>」で囲みます。そして、引用元は「<cite></cite>」で囲みます。それをふまえて当サイトでは、引用するときの基本形を以下のように決めました。

<blockquote>
<p>引用する文</p>
<p><cite>引用元</cite></p>
</blockquote>

そして、スタイルシートで定義しやすくするため以下のように「cite」タグを囲む「p」タグにクラス指定をしました。

<blockquote><p>引用する文</p>
<p class="quoteFooter"><cite>引用元</cite></p>
</blockquote>

後はスタイルシートで以下のように定義しています。

blockquote {
width: 302px;
margin: 1em auto;
padding: 0;
background: url(http://blog.heartfield-web.com/skins/heartfield/images/Q_header.png) left top no-repeat;
text-align: center;
}

blockquote p.quoteFooter {
padding: 0 20px 0 0;
background: url(http://blog.heartfield-web.com/skins/heartfield/images/Q_footer.png) right bottom no-repeat;
text-align: right;
}

細かいところは置いておいてざっと解説しますと、「blockquote」は、背景「」を左上に一つだけ表示し、「p.quoteFooter」で背景「」を右下に表示しています。ところが、IEは「」を表示してくれません。いろいろいじっくていると偶然解決方法が見つかりました。以下のように変更すれば解決です。

<blockquote>
<p>引用する文</p>
<p class="quoteFooter"><cite>引用元</cite> </p>
</blockquote>

わかりますか？　「cite」の閉じタグの後に半角スペースを挿入するだけです。すると、めでたくIEでも引用文の終了画像を表示することに成功しました。

このようにIEに対応するためには運も必要です。ふぅ…