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

Category
： CSS リファレンス

ブログを書いていると他のサイトから文章などを引用してきたりする事もあるかと思います。

そういう時に使えそうな blockquote のデザインとサンプルを作ってみました。

サンプル 1

XHTML

<div class="sample1">
<blockquote>
<p>
	～　省略　～
</p>
<p class="origin"><a href="http://">ウィキペディア（Wikipedia）</a></p>
</blockquote>
<!--/ .sample1--></div>

CSS

/* サンプル1要素
----------------------------------------------------------- */
.sample1 blockquote	{
	background: url(image/blockquote1.gif) no-repeat 95% 68%;
	padding: 15px;
	color: #064599;
}
.sample1 p	{
	margin-bottom: 12px;
}
.sample1 .origin	{
	text-align: right;
	padding-top: 8px;
	margin-bottom:0;
}
.sample1 .origin a	{
	background: url(image/origin1.gif) no-repeat 0 7px;
	padding-left: 15px;
	color: #999;
}

サンプル 2

XHTML

<div class="sample2">
<blockquote>
<p>
	～　省略　～
</p>
<p class="origin"><a href="http://">ウィキペディア（Wikipedia）</a></p>
</blockquote>
<!--/ .sample2--></div>

CSS

/* サンプル2要素
----------------------------------------------------------- */
.sample2 blockquote	{
	background: url(image/blockquote2.gif) no-repeat 2% 6%;
	padding: 10px 20px;
	border-top: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	color: #212121;
}
.sample2 p	{
	margin-bottom: 12px;
}
.sample2 .origin	{
	text-align: right;
	margin-bottom:0;
}
.sample2 .origin a	{
	color: #2D88B3;
}

サンプル 3

XHTML

<div class="sample3">
<blockquote>
<p>
	～　省略　～
</p>
<p class="origin"><a href="http://">ウィキペディア（Wikipedia）</a></p>
</blockquote>
<!--/ .sample3--></div>

CSS

/* サンプル3要素
----------------------------------------------------------- */
.sample3	{ background: url(image/blockquote3-t.gif) no-repeat center top; }
.sample3 blockquote	{
	background: url(image/blockquote3-b.gif) no-repeat center bottom;
	padding: 40px;
	color: #AAA;
}
.sample3 p	{
	margin-bottom: 12px;
}
.sample3 .origin	{
	text-align: center;
	margin-bottom:0;
}
.sample3 .origin a	{
	color: #555;
}

サンプル 4

XHTML

<div class="sample4">
<blockquote>
<p>
	～　省略　～
</p>
</blockquote>
<p class="origin"><a href="http://">ウィキペディア（Wikipedia）</a></p>
<!--/ .sample4--></div>

CSS

/* サンプル4要素
----------------------------------------------------------- */
.sample4	{	background: #C0C0C0 url(image/blockquote4-t.gif) no-repeat; }
.sample4 blockquote	{
	background: url(image/blockquote4-c.gif) no-repeat bottom;
	padding: 10px 30px 5px 30px;
	color: #212121;
}
.sample4 p	{
	margin-bottom: 12px;
}
.sample4 p.origin	{
	background: url(image/blockquote4-b.gif) no-repeat left bottom;
	text-align: right;
	padding: 5px 20px;
	margin-bottom: 0px;
}
.sample4 p.origin a	{
	background: url(image/origin1.gif) no-repeat 0 7px;
	padding-left: 15px;
	color: #999;
}