だーしゃのCSS講座　引用文に色を付けてみよう！

2005年12月29日 22:04

だーしゃのCSS講座　
第8回　引用文に色を付けてみよう！

ひさーしぶりにＣＳＳ講座を開いてみる事にしましたー！
まず、皆様引用文って使ってますか？
僕のブログを見ていただくとわかると思うんですが、
他のサイトから引用を行うときに使う物なんです。

※こんな感じの表示がありますよねっ↓

こちらは管理画面の記事投稿の時に文字を選択して、
下記ボタンを押すと出てくるタグを利用するとできます。。

タグ⇒「<blockquote></blockquote>」

そして早速なのですが、こちらは
自分の管理画面＞デザイン＞オリジナルデザインの登録＞スタイルシート
に下記枠の中にある文字をコピーして張り付けるだけでＯＫ。

例えばぼくと同じ灰色バージョンを使いたい方は
↓のクラスをコピーして自分のスタイルシートに入れてください。

■グレーバージョン

blockquote{
background-color:#efefef;
line-height:140%;
padding:10px;
border-bottom:1px solid #cccccc;
border-right:1px solid #cccccc;"
}

そのほかにもいくつか用意してみましたっ。
コピーして貼り付けてくださいね。

■オレンジバージョン

blockquote{
background-color:#ffcc66;
line-height:140%;
padding:10px;
border-bottom:1px solid #cccccc;
border-right:1px solid #cccccc;"
}

■イエローバージョン

blockquote{
background-color:#ffff99;
line-height:140%;
padding:10px;
border-bottom:1px solid #cccccc;
border-right:1px solid #cccccc;"
}

■グリーンバージョン

blockquote{
background-color:#ccff99;
line-height:140%;
padding:10px;
border-bottom:1px solid #cccccc;
border-right:1px solid #cccccc;"
}

※色を変えるには・・
もし自分で好きな色に変えたい場合は赤太字のカラーコードを変更してくださいねー。

こちらは少し変わったやつで、画像ＵＲＬのところに
お好きな画像ＵＲＬを入れることで画像を使う事もできます。

■画像バージョン

※イメージ

↑

blockquote{
background:#fff url(画像ＵＲＬ) ;
line-height:140%;
padding:10px;
border-bottom:1px solid #cccccc;
border-right:1px solid #cccccc;"
}

コピペだけでいいので、簡単ですよね。
よりよいブログライフのために（＾＾）！
使ってみてくださいねー。

もしスタイルシートをもっと詳しく知りたいならここをご参照ください。
スタイルシートリファレンス（目的別）

もっと詳しくはオススメ本がありますよっ。
CSSコンパクトリファレンス
スタイルシートポケットリファレンス

過去のスタイルシート講座はこちら