2005年10月21日

かっこいい引用の仕方

先日からブログでの引用の表示方を変えている。

引用部分を

ここに引用文が入ります。
なんたらかんたら、ほほいのほい。

こんなふうに枠で囲われるようにした。

やり方はスタイルシートに

BLOCKQUOTE {BORDER: 1px solid #99CC33; margin: 3px 20px; padding: 5px 5px 5px 5px; background-color:#FDFFF5;}

と書き込んで、引用する部分の文章を<blockquote>と</blockquote>で囲めばいい。
実際のmarginとpaddingの値はそのブログのデザインによって異なるので変更する必要がある。

とよろこんで書いていたら、ちょっとめんどくさい問題がおきてきた。
BLOCKQUOTEの中を<p>タグでくくろうとすると、左右の余白などが変ってきてあまりうまくいかない。これはコメントの中の<p>の部分に指定されたスタイルが影響してしまうらしい。

変えるのが面倒くさいのでしばらくはblockquoteの中は<p>でくくらずにおこうと思う(文法無視)(超激怒
ただ書いてみたかっただけ(あっそ

H17.11.9 追記

人に聞いて
blockquote p { margin: 3px 10px 0 10px; padding:0}と書くことでバランス良く表示されるようになりました。

最初blockquote pにスタイル設定すればもともとのpのスタイルは無視されるかと思ったら、そうではなくblockquote pとしてもそこにpのスタイルも適用されているようだ。

もしかしたらpのスタイルというのが閲覧プラウザ依存であるからかもしれない。

at 21:06 | Category : blog設置とカスタマイズ | Comments [0] | TB [0]
トラックバックURL

このエントリーのトラックバックURL:

コメントしてください




保存しますか?

(書式を変更するような一部のHTMLタグを使うことができます)


ご利用のブラウザ、設定ではご利用になれません。