--年--月--日

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2006年01月13日

引用に枠線を設定しましょう(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*
なお、この画像は『chai*』様よりダウンロードさせていただきました。

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

↓ ぽちっと応援お願いします♪ m(_ _)m
人気blogランキング


yozoの気が向いたと記2.0の関連記事紹介

↓ ぽちっと応援お願いします♪ m(_ _)m
人気blogランキング

スポンサーサイト

スレッドテーマ:カスタマイズ:ブログ

メイン

≪New 灯油さらに高騰(・`ヘ´・;) | Top | 秘境駅ランキング♪ Old≫

トラックバックURL


コメント

すごーい。すごいよねー勉強熱心だよー。尊敬しちゃう。
いつも見て見て読んで読んで、勉強になります。
こまったらここに来ようと心に決めております。
心強いなぁ。

コメント

>enuさん
こんにちはー♪
いつもお世話になっている、雅さんやbutyo_1280さんたちが
すごいのですよー!
そのマネをするだけなんです。! (ノ`∇´) ソーナンデス
>こまったらここに来ようと心に決めております。
>心強いなぁ。
あんまり、あてになりませんが、いつでも来てくださいね♪

コメントする

お楽しみ:
サイト管理者にのみ通知する

チェックするとコメントプレビューがオンになります。

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


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。