Bloggerでblockquote(引用部分)をCSSでデザインする

2013年4月6日

Bloggerでblockquote(引用部分)をCSSでデザインする

検索で「Blogger 引用 CSS」とか探すと山ほど出てくると思いますが、このサイトで使っているCSSを載せておこうともいます。

このCSSは、第12回：引用（blockquote）をCSSと画像でそれらしく見せる方法 [C!]
を参考に使用しています。

blockquote {
 width: 570px;
 border: 1px solid #999;
 padding: 0px;
 margin-top: 10px;
 margin-right: 0px;
 margin-bottom: 10px;
 margin-left: 30px;
}
blockquote p {
 display: block;
 background: url(ここの部分に画像URL) no-repeat scroll top left;
 margin: 0px;
 padding-top: 10px;
 padding-right: 20px;
 padding-bottom: 10px;
 padding-left: 30px;
}
blockquote cite {
 display: block;
 background: url(ここの部分に画像URL) no-repeat scroll bottom right;
 padding-top: 0px;
 padding-right: 30px;
 padding-bottom: 10px;
 padding-left: 10px;
 margin: 0px;
}

ハイライトになっている行番号12と21の「ここの部分に画像URL」は画像のURLで、使用する画像は下書きなどのページに画像をアップロードして、HTMLで表示させると画像URLが乗っています。

まず、

実際に投稿するときのｈｔｍｌは

<blockquote cite="引用サイトのページのURL"><p>ここに引用した文字が入る</p><cite title="サイトのタイトル">引用元：<a href="引用したサイトのページのURL" target="_blank">サイト投稿タイトルとサイトのタイトルのリンクURL</a></cite></blockquote>

と書くんですが、私はいちいち書くのが面倒なので、ブラウザの機能を使って、引用したい文字を選択するだけで引用HTMLを作れるようにしています。FirefoxやGoogle Chromeのアドオンでできると思います。

やり方なども、検索で「Firefox アドオン引用」などの組み合わせで山のように出てくると思います。