引用に枠線を設定しましょう（CSS編集） yozoの気が向いたと記2.0

引用に枠線を設定しましょう（CSS編集）

06/11/24 10：30追記

　06/11/22のここの記事ブロック要素に枠線を設定しましょう（CSS編集）にあるように、blockquoteは、他のWebサイトやブログからの引用を表すためのものです。自分の記事ではdivを使うようにしてください。
詳しくはコチラ→ブロック要素に枠線を設定しましょう（CSS編集）

　『引用』に、下のような枠線を設定してみましょう。なんとなく、雰囲気がでてくると思いませんか・・・？

引用したい内容をこのように装飾しましょう♪

　なお、この記事の内容は、CSS編集が可能なブログならどのブログでもできます。

引用に枠線を設定しましょう

下のCSSコードを追加してください。記事を投稿するときに、『引用』したい部分を
<blockquote cite="引用したサイトのURI">～</blockquote>の中に書けばOKです。

blockquote
{
padding: 5px;
margin : 15px 20px 15px;
border: 1px #cc6600 dotted;
background:#ffffff;
}

background(背景色)やborder(枠線)の設定を好みで変更して下さい。
border: 1px #cc6600 dotted;
＝枠線の設定の内容＝
枠線の幅　1～px
枠線の色
枠線の種類　dotted→点線　dashed→破線　double→二重線　none→実線（デフォルト）など

引用の枠線複数設定するときは･･･

『引用』を複数使用したい方は、下のように.type1を必要数だけ書き加えてください。
記事を投稿するときに、『引用』したい部分を<blockquote class="type1" cite="引用したサイトのURI">～</blockquote>としてください。

blockquote.type1
{
　～省略～　

}
blockquote.type2
{
　～省略～　

}
blockquote.type3
{
　～省略～　

}

なお、この画像は『chai*』様よりダウンロードさせていただきました。

yozoからのお願い

　この記事のやり方は、yozoが実際にやってみたことを書いているだけです。この記事のやり方だけしかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。
　また、言うまでもないことですが、この記事を参考にされるのでしたら、「CSS編集」は自己責任で行ってください。そして、必ずバックアップを取っておくようにしてくださいね♪
　この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。　m(_ _)m

↓　ぽちっと応援お願いします♪ m(_ _)m