日々歳々: 引用をCSSで飾る

2008年3月27日 (木)

引用をCSSで飾る

I challenged the work of decorating the blockquote-tag with CSS.

よしっ、なんとかうまくいきました♪　ひとつ前の記事で引用タグ（blockquote）を使ってみたんですけどどうでしょう。CSSでかっこよく見えるように飾っています。

セブンプレミアムのスープ　08/03/27
http://wondada.cocolog-nifty.com/
hibi_saisai/2008/03/post_28c0.html

実は引用タグってあんまり好きじゃなかったんですよね。というのも、なんだか文章が引っ込んだだけみたいなんですもん。見てもわかりにくいというか、かっこ悪いというか。

それでこのブログでは、引用するときは文字を強調したり、「　」でくくったりするようにして引用タグはあまり使わなかったんです。

でも、オレンジスカイさんのところで引用タグをCSSできれいにするサンプル集が紹介されているのを見て一念発起。チャレンジしてみることにしました♪

オレンジスカイのゆったりアフィリ★
blockquoteタグを、CSSできれいにするサンプル集
http://orangesky.ti-da.net/e2036039.html

Blockquote Examples by CSS-Tricks
http://css-tricks.com/examples/Blockquotes/

管理画面で直接確認することができなかったのでちょっと悩みましたけど、記事にアップしてしまえばきちんと表示されていたんですね。よかった、どうしちゃったのかと思いました。

過去記事の引用部分もこんなふうに修正していこうかな。…ええ、時間があれば（汗）

ちなみに、うちでは４つめのFancy Quoteのデザインにしてみました。CSSの書き方は、初めてのココログ・カスタマイズさんの所を参考にさせていただきました♪

初めてのココログ・カスタマイズ
基本５：カスタム・テンプレート用CSSの主な要素
http://tea-for-me.cocolog-nifty.com/
blog/2006/06/5css_68dc.html

というわけで、該当部分のCSSはこんな感じです。

.content blockquote {
font: 14px/20px italic Times, serif;
padding-left: 70px;
padding-top: 18px;
padding-bottom: 18px;
padding-right: 10px;
background-color: #dadada;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 5px;
background-image: url(http://wondada.cocolog-nifty.com/
hibi_saisai/openquote4.gif);
background-position: middle left;
background-repeat: no-repeat;
text-indent: 23px;}

Blockquote Examples by CSS-Tricksで書いてあったの、ほとんどそのままですね…。

あと、クラス（class）を分けるとデザインを使い分けることができるらしいんですけど、その辺はもうちょっと勉強してからチャレンジしてみます（汗）

ともあれ、ひとまずできたので大満足～♪

[PR]“Ｍｙ”アフィリエイトブログで報酬