引用(blockquote)をCSSで指定する方法
賢威のデフォルトのテンプレートでは
<blockquote></blockquote>の設定が
されてませんでした (((´・ω・`)カックン...
→ http://8styles.net/test/
(サンプルサイト)
引用部分を
<blockquote></blockquote>で囲んであるんですけどね‥
人気blogランキング
本文の前に応援お願いします♪
そこで、CSSに引用の指定を追加してみました。
■ このブログで使っているのがコレ↓
blockquote{
margin:12px;
padding:12px;
background-color: #f7efff;
border:outset 1px #d8d1f0;
}
■ 線をドット(水玉)に変えてみました↓
blockquote{
margin:12px;
padding:12px;
background-color: #f7efff;
border:dotted 2px #d8d1f0;
}
■ 二重線にしてみました↓
blockquote{
margin:12px;
padding:12px;
background-color: #f7efff;
border:double 3px #d8d1f0;
}
■ 青にしてみました↓
blockquote{
background-color:#B4C7D2;
padding:10px;
border-left:5px solid #4682B4;
}
■ 青の別バージョン↓
blockquote{
background-color: #EEEEEE;
border-left: 10px solid #B4C7D2;
margin-right: 5px;
margin-left: 20px;
padding: 3px;
}
■ ピンク↓
blockquote{
background-color: #fcf7e2;
border-left: 5px solid #ffc9b3;
padding: 8px;
margin-left: 10px;
}
■ オレンジ↓
blockquote{
margin-right: 2em;
margin-left: 2em;
padding-left: 1em;
border: dashed 2px #FFCC66;
}
上記のように
CSSに追記や既にある指定を変更することで
引用スタイルを好みに変えることができます。
■ 背景の色を変えたいなら
background-color: #f7efff;
黄色のマーカーの部分、カラーコードを変えてください。
■ 囲んでいる線を変えたいなら
border:outset 1px #d8d1f0;
黄色のマーカーの部分を変えます。
点線は dotted
波線は dashed
二重線は double
など、線の種類がいくつかあります。
私が使っている outset は
上と左のボーダーが明るく、下と右のボーダーが暗く表示されます。
線を太くすれば、立体的に隆起したように見えます。
■ 線の太さを変えたいなら
border:outset 1px #d8d1f0;
黄色のマーカーの部分を2pxや5pxなど、
希望の太さに変えます。
いろいろ試してみてくださいね^^
●◎ アフィリエイトに関するご質問は、遠慮なくメールください ◎●
・ 何から始めたらいいかわからない
・ 自分に適しているものがわからない
などのお悩みもお気軽にご相談ください。
<24時間メール受付中♪>
この記事がお役に立ったら応援お願いします。
人気blogランキング
2009年2月20日|コメント (0)
カテゴリー:賢威MTのカスタマイズ

