ブログをやってると引用(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;
}
をベースとしていじっていく方がいいと思います。
