ブログ内の引用文をCSSで装飾

前回の記事の続きという訳ではありませんが、ブログを書いていると他のサイトや書籍などからの引用を載せる事も多くなります。

そこで、引用部分をCSSでわかりやすく装飾してみました。

CSSに追記したのは以下の記述

.waku2{
margin:12px;
padding:12px;
background: url(画像のURL) no-repeat scroll top left;
border:outset 2px #d8d1f0;
}

使用した画像はネット上で配布されていたこちら


これでHTMLを以下のように記述すると

<div class="waku2">
二人の囚人が鉄格子の窓から外を眺めた。<br />一人は泥を見た。<br />一人は星を見た。<div align="right">～フレデリック・ラングブリッジ～</div>
</div>

　↓↓このように表示されます。

二人の囚人が鉄格子の窓から外を眺めた。
一人は泥を見た。
一人は星を見た。

～フレデリック・ラングブリッジ～

通常、引用を明確にするのであれば<blockquote>タグ（もしくは<q>タグ）を使わないといけないようです。

しかしこのブログでは、過去に少し意味を間違えて<blockquote>タグを使用していた時期があり、いまさら装飾を変更してしまうと色々面倒な事になります。

そこでこのように、「引用」を意味するタグではありませんが、なんとなくそれっぽく見えるような装飾を施して凌いでみることにしました。

・アメブロカスタマイズ目次