バシャログ。

01. シンプルに見栄えよくしてみる

[サンプル]

[HTML]

<blockquote id="simple01">
<p>あ…ありのまま 今 起こった事を話すぜ！<br />
『おれは奴の前で階段を登っていたと思ったらいつのまにか降りていた』<br />
な…何を言ってるのかわからねーと思うがおれも何をされたのかわからなかった…<br />
頭がどうにかなりそうだった…<br />
催眠術だとか超スピードだとかそんなチャチなもんじゃあ 断じてねえ<br />
もっと恐ろしいものの片鱗を味わったぜ…</p>
</blockquote>

[CSS]重要なところだけ抜粋

/* =========================================================
■ 01.シンプルに見栄えよくしてみる
========================================================= */
blockquote#simple01 {
    width: 460px;
    margin: 0 20px 10px;
    padding: 10px 10px 10px 30px;
    border: #D9D9D9 solid;
    border-width: 1px 0;
    background: url(img/blockquote_01.gif) repeat-x 0 0;
}
blockquote#simple01 p {
    margin: 0;
    line-height: 150%;
    font-size: 90%;
}

[ポイント]

• blockquote といえば 「 “ ダブル引用符」です。背景画像にダブル引用符をモチーフにした画像をひくことで、引用部分を暗示します。

02.before,after を使ってみる

[サンプル]

[HTML]

<blockquote id="simple02">
<p>あ…ありのまま 今 起こった事を話すぜ！<br />
『おれは奴の前で階段を登っていたと思ったらいつのまにか降りていた』<br />
な…何を言ってるのかわからねーと思うがおれも何をされたのかわからなかった…<br />
頭がどうにかなりそうだった…<br />
催眠術だとか超スピードだとかそんなチャチなもんじゃあ 断じてねえ<br />
もっと恐ろしいものの片鱗を味わったぜ…</p>
</blockquote>

[CSS]重要なところだけ抜粋

/* =========================================================
■ 02. before,after を使ってみる
========================================================= */
div#sample02 blockquote#simple02 {
    width: 460px;
    margin: 10px;
    padding: 10px;
    background: #F2FAFC;
    border: none;
}
div#sample02 blockquote#simple02 p:before {
    margin: 0 5px 0 0;
    font-weight: bold;
    font-size: 120%;
    color: #0099CC;
    content: "“";
}
div#sample02 blockquote#simple02 p:after {
    margin: 0 0 0 5px;
    font-weight: bold;
    font-size: 120%;
    color: #0099CC;
    content: "”";
}
div#sample02 blockquote#simple02 p {
    margin: 0;
    padding: 0 0 1em;
    line-height: 150%;
    font-size: 90%;
    color: #666666;
}

[ポイント]

• before,after を使って、ダブル引用符にスタイルをあてます
• before,after は、IE には対応していません

03. 出典を表示してみる

[サンプル]

[HTML]

<div id="sample03">
<blockquote id="simple03">
<p>あ…ありのまま 今 起こった事を話すぜ！<br />
『おれは奴の前で階段を登っていたと思ったらいつのまにか降りていた』<br />
な…何を言ってるのかわからねーと思うがおれも何をされたのかわからなかった…<br />
頭がどうにかなりそうだった…<br />
催眠術だとか超スピードだとかそんなチャチなもんじゃあ 断じてねえ<br />
もっと恐ろしいものの片鱗を味わったぜ…</p>
</blockquote>
<cite><a href="#">ジョジョの奇妙な冒険 - スターダストクルセイダーズ</a></cite>
</div><!-- /#sample03 -->

[CSS]重要なところだけ抜粋

/* =========================================================
■ 03. 出典を表示してみる
========================================================= */
div#sample03 {
    text-align: center;
    background: url(img/blockquote_03_02.gif) no-repeat 50% 100%;
    padding: 0 0 65px;
}
div#sample03 blockquote#simple03 {
    padding: 65px 0 0;
    text-align: center;
    background: url(img/blockquote_03_01.gif) no-repeat 50% 0;
}
div#sample03 blockquote#simple03 p {
    margin: 0 0 15px;
    line-height: 150%;
    font-size: 80%;
    color: #92908E;
}
div#sample03 cite {
    font-size: 80%;
    font-style: normal;
}

[ポイント]

• 出典元やソースのありかを示すcite を使用します。
• 引用文の装飾にしては妙な感じですが、何かのヒントになれば。

しかし、この一文は名文だなあ。