February 28, 2009
スタイルシート(CSS)カスタマイズ #04 引用枠のカスタマイズ
背景や文字を変えてしまうと
引用枠も合せて変更しておかないと見づらくなる。
ブログ記事のタイトル、日付、背景の項目の少し下に、
/* =blockquote */
という項目がある。
引用枠の枠部分を点線にしたり
うちのように左側だけ太くしてみたりといろいろできる。
あとは検索すればやり方がいくらでも出てくるので試してみるだけ。
blockquoteの下にでも追記すればいい。
参考までにうちの設定
実際タイトル表記をしたい場合は
<div class="quotetitle">タイトル</div>
のように使う。
(表記の都合で<>が全角になってるが、使う時は半角で)
引用枠も合せて変更しておかないと見づらくなる。
テスト
blockquoteの設定
ブログ記事のタイトル、日付、背景の項目の少し下に、
/* =blockquote */
という項目がある。
引用枠の枠部分を点線にしたり
うちのように左側だけ太くしてみたりといろいろできる。
あとは検索すればやり方がいくらでも出てくるので試してみるだけ。
引用タイトルの設定
こんな風に引用の中にタイトルをつけることができる。
引用の中で使用しなければ上にある[blockquoteの設定]のように
下線を引いたミニ・タイトル風にも使える。
blockquoteの下にでも追記すればいい。
参考までにうちの設定
/*quotetitle設定*/
.quotetitle{
WIDTH: 98%;
font-size:15px;
font-weight:bold;
border-bottom: 1px solid ;
padding: 0 0 0 1px;
}
実際タイトル表記をしたい場合は
<div class="quotetitle">タイトル</div>
のように使う。
(表記の都合で<>が全角になってるが、使う時は半角で)