他のブログからの引用をそれっぽく見せる！

　他のブログから内容を引用する場合、引用符を付けたいな、というのがあり、

creazy photograph;第12回：引用（blockquote）をCSSと画像でそれらしく見せる方法

を参考に早速導入してみました。
結果は以下の通りです。

４）左上に「“」、右下に「”」を表示させる

via: creazy photograph;第12回：引用（blockquote）をCSSと画像でそれらしく見せる方法

うまくいきました(^_^)v

追加するCSSはこちら。

.post .post-body blockquote {
 width: 400px;
 border: 0px solid #666666;
 padding: 0px;
 margin-top: 10px;
 margin-right: 0px;
 margin-bottom: 10px;
 margin-left: 30px;
}
.post .post-body blockquote p {
 display: block;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN9LqYSADuePighJb6K4aUg8PHwMuYPoa5UDjPN7uYBjtcs3oNscnKsdqmVlgn6RZF09OZJk7Tbn7-GJgAz36m-Ehv154H58lr1BVC3nKu5WdXiO6XcYjvhrUjJwRWT9vQInfKdc5Nxuw/s144/quote_start.gif) no-repeat scroll top left;
 margin: 0px;
 padding-top: 10px;
 padding-right: 10px;
 padding-bottom: 10px;
 padding-left: 30px;
}
.post .post-body blockquote cite {
 display: block;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfrn4qFbdWPU6SLDTLOj3RtV9HLIHRU6LA3J6KYppNOQzP6qagJWpCpJO7c04gG9f-DN1a1wTp6WCMt26WOF0odo1HpSLyZrPK5mYRTMFX4DevwLuHVMxXd5zLtD2CLEcAm6AWgZt_j9k/s144/quote_end.gif) no-repeat scroll bottom right;
 padding-top: 0px;
 padding-right: 30px;
 padding-bottom: 10px;
 padding-left: 10px;
 margin: 0px;
}

また、HTMLはこちら。

<blockquote cite="http://creazy.net/2007/09/blockquote_css.html" title="creazy photograph;第12回：引用（blockquote）をCSSと画像でそれらしく見せる方法">
<p>４）左上に「“」、右下に「”」を表示させる</p>
<cite>via: <a href="http://creazy.net/2007/09/blockquote_css.html" target="_blank">creazy photograph;第12回：引用（blockquote）をCSSと画像でそれらしく見せる方法</a></cite>
</blockquote>