引用(blockquote)をCSSでカスタマイズする

Grid 960: Zapisi 5今回は、引用(blockquote)をCSSでカスタマイズする方法を紹介します。
photo credit: Aleksandar Urošević


カスタマイズ後は、このようになります。


<blockquote>カスタマイズ後は、このようになります。</blockquote>


まず、管理画面にてテンプレート > カスタマイズ > アドバンス > CSSの追加 と進みます。



そして、以下を追記して保存します。

blockquote {
position: relative;
 padding: 20px 50px;
 min-height: 20px;
 background: url(quote_start.gif) no-repeat 10px 10px #eeeeee;
 }
 blockquote:after {
position: absolute;
 bottom: 10px; right: 10px;
content: url(quote_end.gif);
}


そして、引用符の画像をアップロードし、アップロードした画像URLを上のquote_start.gifquote_end.gifの部分に挿入します。