引用（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ランキング

引用（blockquote）をCSSで指定する方法:ネット・在宅ワークで稼ぐアフィリエイト講座