Blogger の引用をそれらしく

Blogger のシンプル テンプレートを使っていましたが、どうも、引用部分の画面表示がぱっとしないなぁ～と。
そこで、また、お勉強です！ 色々なサイトを訪ねては、情報を漁りました。
ＣＳＳで追加指定すれば、どうやら、実現可能と分かり、パラメータの指定の試行錯誤を繰り返しました。
ここでは、その覚書を残しておきましょう。


その手順は テンプレート > カスタマイズ > アドバンス > ＣＳＳを追加 と選んで行くと、 カスタム ＣＳＳ を追加  の画面になります。
私のは今までほとんど手を入れていないので、空白で表示されました。
ここで、以下のコードを挿入します。

blockquote {
margin:10px 2px 10px; /* 枠の外側の余白(上 右 下 左) */
padding:10px 20px 10px 20px; /* 枠の内側の余白(上 右 下 左) */
border:#cccccc 1px solid; /* 枠線 */
border-left:#cccccc 5px solid; /* 枠線(左) */
background:#c1c1c1; /* 背景色 */
}

引用枠の背景色は　HTML の 16進表記で指定します。 :#c1c1c1 の部分を書き換えて下さい。
採用しているテンプレートの配色との兼ね合いから、表示・変更の試行錯誤を繰り返します。
余白に指定する数値もカスタマイズして見て下さい。

色を調べるなら次のサイトが簡単で良いでしょう。
HTML 色番と色の一覧を閲覧できます。　ここで、大凡の見当を付けておくと良いでしょう。
でも、配色って難しいですね、いじればいじるほど下品になりそうで ... 脱線。

パステルカラー http://www.colordic.org/p/
原色大辞典　http://www.colordic.org/



使い方は、今迄と同じです。　投稿中に普通に引用を作成すると、投稿の編集画面では変化がありせん。
実際の表示時点で、ＣＳＳが適用され、色付の枠が表示されます。

やっと、うちのブログも体裁が整って来ました ... か？