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

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

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

※こんな感じの表示がありますよねっ↓
だーしゃのCSS講座 引用文に色を付けてみよう!

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

だーしゃのCSS講座 引用文に色を付けてみよう!
タグ⇒「<blockquote></blockquote>」


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

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

■グレーバージョン
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;"
}



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



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


■画像バージョン

※イメージ
だーしゃのCSS講座 引用文に色を付けてみよう!


blockquote{
background:#fff url(画像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 だーしゃのCSS講座 ブログの構造を理解してみよう!
2005-07-11 だーしゃのCSS講座 カスタムプラグインをかっこよく!
2005-07-10 だーしゃのCSS講座 ヘッダーの画像を変えてみよう!


同じカテゴリー(CSSについて)の記事

この記事へのコメント
わーい、だーしゃさん、これ標準でほしいって思うほどいつも迷うやつなんです。
ところで、引用文を罫線で囲むコマンドもよかったら教えてくださいな~。
よろしくお願いします。
Posted by pyo at 2005年12月30日 01:23
謹んで新年のお祝いを申し上げます

昨年は だーしゃさんのCSS講座に何かとお世話になりました

ありがとうございました ^^

今年も だーしゃさんのご活躍 期待しております。
Posted by マスチックたか at 2006年01月03日 13:08
だーしゃさん、明けましておめでとうございます。
CSS講座、すごくためになりますわ。
ってgooでこうやって使ってもできますよね?
何かのときに 使わせてもらいます。

今年もどうぞよろしく!
Posted by じゃすみん at 2006年01月03日 15:06
■pyoさんへ
こんにちはー、ご連絡遅くなってしまってもうしわけないですっ
そして引用文を罫線で囲むやり方ですか!?
これは了解ちょっとかんがえてみますよ(^^)

■マスチックたかさんへ
あけましておめでとうございます。
すみません、新年のあいさつエントリーがおそくなってしまって。
今年は色々とありがとうございました。
那覇祭りも着ていただいてうれしかったですよー。
またどうぞ宜しくお願いいたします。

■じゃすみんさんへ
あけましておめでとうございますっ
こちらgooでもある程度つかえるとおもいますよー
是非ためしてみてくださいねっ
今年もどうぞ宜しくお願いいたします。


Posted by だーしゃ at 2006年01月04日 10:12
だーしゃさん、ちょっと質問です。
いまクリスマスのデザイン使ってるんですが、
この引用タグが全く効かないみたいなんです。
どこを直せばいいのかわかりません~。
Posted by pyo at 2007年12月10日 13:17
■pyoさんへ

コメントありがとうございますーー(^^)
そしてこちら、デザインの方に聞いてみたら、
スタイルシート上でそう設定されているみたいです。

ちょっとむずかしいのですが、ブラウザ間の同期を取るためだとおもいます。

でもそれでは困るので、
もう一回テンプレートを当てなおして、
一番グレーの引用文のスタイルをCSSに追加してみてください。(^^)

そしたら僕のテストブログではOKだったので、大丈夫だとおもいます。
もしできなかったら

>.blockquote を blockquoteにすれば効くのではないでしょうか。
>~

と助言もいただきました。点を消してみてください。
それでも効かなかったら、もう一回ご連絡ください。
しらべてみますね。
Posted by だーしゃ at 2007年12月10日 19:24
うーん、ごめんなさい、やっぱりだめでした~。
Posted by pyopyo at 2007年12月12日 13:22
 
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。