引用（blockquote）を格好よく表示する

blockquote（引用）がカッコよいサイトが多いので真似してみようと思いましたが、自分にはスタイルシートを変更する能力もないので、参考になるサイトを探してみました。

MIYA氏のCSS Lectureのblockquote(引用部分)をCSSでデザインするサンプル集に掲載されていた「サンプル2」を利用させていただきました。サンプルコードと画像も一括ダウンロードできます。

引用文は下記のように表示されるようになりました。

ブログを書いていると他のサイトから文章などを引用してきたりする事もあるかと思います。
そういう時に使えそうな blockquote のデザインとサンプルを作ってみました。

blockquote(引用部分)をCSSでデザインするサンプル集

Bloggerでblockquoteのスタイルシートを変更する

デザイン >> HTMLの編集 を開いて、最初に『テンプレートをすべてダウンロード』でバックアップを取得します。



『ウィジェットのテンプレートを展開』をチェックし、blockquoteでソースを検索して現在の設定内容を確認します。

利用しているテンプレートに依存すると思いますが、自分の使っているテンプレートでは、下記のようになっていました。

変更前

.post blockquote {
margin: 1em 20px;
}
.post blockquote p {
margin: .75em 0;
}

blockquote(引用部分)をCSSでデザインするサンプル集のサンプル2をベースに下記のように変更します。

画像のURLには上記サイトからダウンロードしたimage2.gifを事前にpicasaにアップロードするか、bloggerの下書きに画像を挿入して取得したURLを指定します。

変更後

.post blockquote {
background: url(http://画像のURL) no-repeat 2% 6%;
padding: 10px 20px;
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
font-size: 90%
color: #696969;
}
.post blockquote p  {
margin-bottom: 12px;
}
.post blockquote .origin    {
text-align: right;
margin-bottom:0;
}   
.post blockquote .origin a  {
color: #2D88B3;
}

スタイルシートの説明

■【background: url(image/blockquote2.gif) no-repeat 2% 6%;】の「％」部分は、画像の表示位置です。ピクセル（px）でも指定できます。

■【padding: 10px 20px】は内側の余白で、10pxが上下の余白、20pxが左右の余白になります。

■【fontsize: 90%】は引用文のフォントサイズです。本文とのメリハリを付けるために本文で使用しているフォントサイズより少し小さくして90％にしています。

■【color: #696969】は引用文の文字色です。こちらも本文とのメリハリを付けるために色を薄くしてDim Grayにしています。

変更後に『テンプレートを保存』をクリックすれば完了です。

下記のようにhtmlを記載すると上記の表示例のように表示されます。

<blockquote>
<p>ブログを書いていると他のサイトから文章などを引用してきたりする事もあるかと思います。
そういう時に使えそうな blockquote のデザインとサンプルを作ってみました。</p>
<p class="origin">
<a href="http://www.css-lecture.com/log/css/blockquote.html" target="new">blockquote(引用部分)をCSSでデザインするサンプル集</a></p>
</blockquote>