引用(blockquote)の書式

引用の書式は、スタイルシートで設定しています。

 マイ・ブログ > デザイン > デザイン一覧

と進んで、タイトルから現在使用しているスタイルシートを選びます。
スタイルシートを開いたら、blockquoteを探します。ここが引用の書式を指定しているところです。

次の例を見てください。

▼例1
blockquote{
margin:10px;
padding:5px;
border:1px solid #c0eaff;
}
囲み罫(border)の太さ1px、線の色は#c0eaff、罫の外側の余白(margin)10px、罫の内側の余白(padding)5pxという指定です。
Seesaaのテンプレート「ベビー」で使われている書式です。


▼例2
blockquote{
margin: 20px;
padding: 5px;
background: #eed;/*背景色*/
}
罫線の指定はなしで、背景色だけ指定した事例です。
背景色を薄い色にするといいですね。


▼例3
blockquote{
margin: 20px;
padding: 5px;
color: #630;/*文字色*/
background: #e5e5e5;/*背景色*/
border: 2px solid #ff0032;/*線*/
}
このように、文字色、背景色を指定することもできます。
わざと目立つ色にしたけど、これはちょっといきすぎでしたね(笑)。
引用は脇役ですから、本文を邪魔しない色がいいんじゃないでしょうか。

線の種類は実線(solid)の他に、破線(dashed)、二重線(double)を試してみても面白いかもしれません。
囲み罫だけでなく、このブログで使用しているスタイルシートのように、左だけに線を引くこともできます。

このブログでは、左側にラインが出るシンプルな書式になっています(2007年3月現在。後で変わっているかもしれないです^^)。

▼現在使用しているスタイルシートの設定
blockquote{
padding: 5px;
margin: 10px;
border-left: 3px solid #6180a3;
}
引用部分のデザインはこうなります。
左側に3pxの罫線が付きます。色はこのブログのアクセントカラー#6180a3です。
内側の余白(padding)5px、外側の余白(margin)10pxです。


↓参考になったら、クリックで応援してね!↓



この記事へのコメントが 0 件あります


この記事へのトラックバック