[XHTML+CSS] 引用を装飾してみる

08-03-2008 Category: XHTML+CSS

ブログをやってると引用(blockquote)をすることが多いので、とりあえず引用符？ちょんちょん？ダブルクオート？を作って見ました。

引用符　wikipedia
引用符（いんようふ）は、約物の一つ。文中において、他の文や語を引用していることを示す役割を果たす、引用部分を囲む一対の記号。コーテーションマーク、クォーテーションマーク、クオーテーションマーク、引用符号とも言う。

こういうの装飾方法って、おしゃれ系ブログとかで良く見ますよね。うちのCSSはこんな感じです。

blockquote {
	background-color: #F2F2F2;
	background-image: url(/画像1.gif);
	background-repeat: no-repeat;
	background-position: 2% 0.5em;
	width: 95%;
	margin: 0 auto 1em auto;
	padding: 0px;
	border: 4px solid #939393;
}
blockquote p {
	text-align: justify;
	text-justify:inter-ideograph; /* IE独自 */
	background-image: url(img/画像2.gif);
	background-repeat: no-repeat;
	background-position: 98% bottom;
	padding: 2em 13.5% 1.5em 13.5%;
	margin-bottom: 0.5em;
	font-size: 85%;
	line-height: 1.5;
}

blockquoteの背景に左上の”(ダブルクオート)を指定して、中のPの背景に右下の”(ダブルクオート)を指定するかんじです。

うちは横幅が960px-760pxの擬似リキッドですので、ちょっと数値とかが面倒です。あと、いろいろ色指定したりボーダー使ったりしてるんで長いっすね。backgroundはあえてショートハンドで書いてません。

普通にやるなら

blockquote {
	width: 500px;
	padding-left: 60px;
	background: url(img/画像.gif) no-repeat left top;
}
blockquote p {
	padding-right: 60px;
	background: url(img/画像2.gif) no-repeat right bottom;
}

をベースとしていじっていく方がいいと思います。

関連する投稿

最新の記事

Trackback URL

Trackbacks

Comments

Comment feed

Comment