[Blogger]記事投稿ページの引用ボタンを活用する。(blockquot引用スタイルの変更）

Bloggerで記事を書く時に、メニューに並んでいるアイコンが気になって、順番に見ていると「引用ボタン」というのが有りました。試しに押してみると、インデントが付いたように文章が下がる。

でも、それだけ？

これ、どういう時に使うんだろう？と気になって調べてみると、他の人が書いた文章などを引用する時には「”」を付けて引用文だと明示するのがいいらしい・・・。

引用のスタイルは、CSSの追加で変更可能。

これだ！・ｗ・

と言うことで、

blockquote(引用部分)をCSSでデザインするサンプル集 | CSS Lecture
ブログを書いていると他のサイトから文章などを引用してきたりする事もあるかと思います。 そういう時に使えそうな blockquote のデザインとサンプルを作ってみました。 ...

[N] 「blockquote」を「“”」で囲ったようなデザインにする方法
今回はそのblockquoteを、CSSと画像を使ってクリーンなHTMLを維持しつつ「引用符（“”）」で囲ったようなデザインにする方法を紹介します。 ...

主にこの2つのサイトを参考にさせて頂いて、引用時のスタイルを作ってみました。

HTMLよく分かってないので、どうしてもこのコードなんだろう？って分からないまま、不具合はなさそうだしいいかとした部分もありますので、ご容赦下さい。

まずは、テンプレートで「blockquote」の場所をページ内検索で探す、とあったんですが・・・。
Bloggerの場合、ブログ管理のページからテンプレートタグで、HTMLの編集が行えますが、わたしの使っているテンプレートだと、その「blockquote」が見つかりませんでした。
どうしようかな？と思いながら、えいっとテンプレートタグのカスタマイズ。
カスタマイズ画面から「アドバンス」タグの一番下のCSSの追加に、試しのコードをそのまま貼り付けてみると、見事適用してくれました・ｗ・

さて、わたしがお試しで貼ったのが【blockquote(引用部分)をCSSでデザインするサンプル集 | CSS Lecture】(Click New Tab)から、サンプル２のCSSコードです。

/* サンプル2要素 ----------------------------------------------------------- */   .sample2 blockquote {
 background: url(image/blockquote2.gif) no-repeat 2% 6%;
 padding: 10px 20px;
 border-top: 1px solid #CCC;
 border-bottom: 1px solid #CCC;
 color: #212121;
 }
 .sample2 p {
 margin-bottom: 12px;
 }
 .sample2 .origin {
 text-align: right; margin-bottom:0;
 }
 .sample2 .origin a {
 color: #2D88B3;
 }

赤字にした部分ですが、こちらのコードは背景画像が入るようになっていて、前もって画像をアップロードしておく必要がありました。画像もダウンロード出来るようにして頂けているので、参考ページのままのスタイルにするなら、画像をダウンロードして・・・、例えばBloggerの下書き状態（公開してない状態）の記事に画像を貼り付けると、自動的にPicasaにアップロードされることになりますので、そのURLを取得して変更するようにします。

ここからは、テスト用に引用を使った記事を貼り付けて公開、その後再びCSS追加の画面に戻ってくれば、変更した箇所を随時確認しながらコードを調整することが出来ますので、思い思いにためしてみるのがいいと思います。

■例えば、【background: url(image/blockquote2.gif) no-repeat 2% 6%;】の「％」部分は、画像の表示位置を引用スタイル全体から何％の位置にするかです。

これは、【5px 10px;】などの用にピクセル単位でも指定出来ました。

■【padding: 10px 20px;】は【padding: 10px 20px 10px 20px;】と増やすと、「上、右、下、左」というように、文章の余白を調整することが可能でした。

■【border-top: 1px solid #CCC;】は「上側の線の、太さ、スタイル、色」を変更可能です。
スタイルに関しては・・・

solid・・・1本線で表示されます。
double・・・2本線で表示されます。
groove・・・立体的に窪んだ線で表示されます。
ridge・・・立体的に隆起した線で表示されます。
inset・・・上と左のボーダーが暗く、下と右のボーダーが明るく表示され、ボーダーで囲まれた領域全体が立体的に窪んだように表示されます。上下左右の一部だけに指定しても立体感は出ません。
outset・・・上と左のボーダーが明るく、下と右のボーダーが暗く表示され、ボーダーで囲まれた領域全体が立体的に隆起したように表示されます。上下左右の一部だけに指定しても立体感は出ません。
dashed・・・破線で表示されます。
dotted・・・点線で表示されます。

色は【日本の伝統色 和色大辞典 - Traditional Japanese Color Names】(Click New Tab)あたりを参考に設定できるかなと思います。

■その下の【color: #212121;】とあるのは、引用文のテキストの色設定です。

こんな風にして、調整をしていって。ついでに、画像もブログに合わせた物が欲しかったので、作成して、結果がこれ↓

【設定後のサンプル】

友人シャーロック・ホームズを、昨年の秋、とある日に訪ねたことがあった。すると、ホームズは初老の紳士と話し込んでいた。でっぷりとし、赤ら顔の紳士で、頭髪が燃えるように赤かったのを覚えている。私は仕事の邪魔をしたと思い、詫びを入れてお暇しようとした。だがホームズは不意に私を部屋に引きずり込み、私の背後にある扉を閉めたのである。
「いや、実にいい頃合いだ、ワトソンくん。」ホームズの声は、親しみに満ちていた。
「おや、もしかして仕事中だったかな。」
「その通り。真っ最中だ。」
「では、私は奥で待つとするか。」
「まあ待ちたまえ。この紳士は、ウィルソンさん、長年、僕のパートナーでして。僕はこれまで数々の事件を見事解決してきましたが、その時にはいつも、彼が助手を務めています。あなたの場合にも、彼が大いに役に立つことは間違いありません。」
でっぷりとした紳士は軽く腰を上げただけで、申し訳程度の会釈をしつつも、脂肪のたるみに囲まれた小さな目で、私を疑わしげに見るのであった。

-【赤毛連盟 | アーサー・コナン・ドイル】より

『追記。すみません・・・この後、引用スタイルの変更をしたため、説明のコードとは見た目が違う状態になっています。こんな感じにも出来ますよ、という感じで見て頂けると嬉しいです。』
【設定後のCSS】

blockquote {
background: url(http://3.bp.blogspot.com/-Zujz-gT4sFw/T5VnsztNYpI/AAAAAAAAAxs/0JRX1YDFG_0/s1600/blocklogo.png) no-repeat 0px 5px;
padding: 5px 10px 5px 50px;
border-top: 2px dotted #852e19;
border-bottom: 2px dotted #852e19;
color: #333631;
font-size: 90%;
}

どうしても分からなかった部分というのが、サンプルの方の

.sample2 p {
 margin-bottom: 12px;
 }
 .sample2 .origin {
 text-align: right; margin-bottom:0;
 }
 .sample2 .origin a {
 color: #2D88B3;
 }

この部分。多分HTMLを勉強すればすぐ出てくるんでしょうけど・・・。
今回の設定でどうも必要なさげだったので省いたんですが、それで良かったのかどうか。

問題があればまた足そうとは思うんですが、HTMLで直接書く場合は使ったりするのでしょうか？
細かい疑問が残るので、分かる方に教えて欲しいところですが、とりあえずは思ったデザインにできたので、幕とします・ｗ・

まぁ、問題ないかって思う方は設定後のCSS拾って下さってもOKです。

あ、画像はこちら・・・