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

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

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

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

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



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

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

■グレーバージョン

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コンパクトリファレンス
スタイルシート ポケットリファレンス


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

▼CSS講座

2006-04-11 だーしゃのCSS講座　写真に自動で白縁をつけたい！

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

2005-09-02 だーしゃのCSS講座　線のカスタマイズしよう！

2005-07-28 だーしゃのCSS講座　背景画像及び背景色を変更してみよう！

2005-07-21 だーしゃのCSS講座　ブログタイトルの位置を変更してみよう！

2005-07-18 だーしゃのCSS講座　ブログタイトルの色を変えてみよう！

2005-07-17 だーしゃのＣＳＳ講座　ブログの構造を理解してみよう！

2005-07-11 だーしゃのCSS講座　カスタムプラグインをかっこよく！

2005-07-10 だーしゃのCSS講座　ヘッダーの画像を変えてみよう！

---

■関連記事一覧
↓
CSS＆ブログの活用講座！

---