[Blogger]記事投稿ページの引用ボタンを活用する。CustomAboutNAVER2012/04/24[Blogger]記事投稿ページの引用ボタンを活用する。カスタマイズBloggerで記事を書く時に、メニューに並んでいるアイコンが気になって、順番に見ていると「引用ボタン」というのが有りました。試しに押してみると、インデントが付いたように文章が下がる。それだけ?これ、どういう時に使うんだろう?と気になって調べてみると、他の人が書いた文章などを引用する時には「”」を付けて引用文だと明示するのがいいらしい・・・。引用のスタイルは、CSSの追加で変更可能。Lectureブログを書いていると他のサイトから文章などを引用してきたりする事もあるかと思います。デザインとサンプルを作ってみました。今回はそのblockquoteを、CSSと画像を使ってクリーンなHTMLを維持しつつ「引用符(“”)」で囲ったようなデザインにする方法を紹介します。...主にこの2つのサイトを参考にさせて頂いて、引用時のスタイルを作ってみました。HTMLよく分かってないので、どうしてもこのコードなんだろう?って分からないまま、不具合はなさそうだしいいかとした部分もありますので、ご容赦下さい。テンプレートで「blockquote」の場所をページ内検索で探す、とあったんですが・・・。Bloggerの場合、ブログ管理のページからテンプレートタグで、HTMLの編集が行えますが、わたしの使っているテンプレートだと、その「blockquote」が見つかりませんでした。しようかな?と思いながら、えいっとテンプレートタグのカスタマイズ。Tab)から、サンプル2のCSSコードです。}赤字にした部分ですが、こちらのコードは背景画像が入るようになっていて、前もって画像をアップロードしておく必要がありました。画像もダウンロード出来るようにして頂けているので、参考ページのままのスタイルにするなら、画像をダウンロードして・・・、例えばBloggerの下書き状態(公開してない状態)の記事に画像を貼り付けると、自動的にPicasaにアップロードされることになりますので、そのURLを取得して変更するようにします。ここからは、テスト用に引用を使った記事を貼り付けて公開、その後再びCSS追加の画面に戻ってくれば、変更した箇所を随時確認しながらコードを調整することが出来ますので、思い思いにためしてみるのがいいと思います。6%;】の「%」部分は、画像の表示位置を引用スタイル全体から何%の位置にするかです。10px;】などの用にピクセル単位でも指定出来ました。いうように、文章の余白を調整することが可能でした。#CCC;】は「上側の線の、太さ、スタイル、色」を変更可能です。スタイルに関しては・・・solid・・・1本線で表示されます。double・・・2本線で表示されます。groove・・・立体的に窪んだ線で表示されます。ridge・・・立体的に隆起した線で表示されます。inset・・・上と左のボーダーが暗く、下と右のボーダーが明るく表示され、ボーダーで囲まれた領域全体が立体的に窪んだように表示されます。上下左右の一部だけに指定しても立体感は出ません。outset・・・上と左のボーダーが明るく、下と右のボーダーが暗く表示され、ボーダーで囲まれた領域全体が立体的に隆起したように表示されます。上下左右の一部だけに指定しても立体感は出ません。dashed・・・破線で表示されます。dotted・・・点線で表示されます。Tab)あたりを参考に設定できるかなと思います。#212121;】とあるのは、引用文のテキストの色設定です。こんな風にして、調整をしていって。友人シャーロック・ホームズを、昨年の秋、とある日に訪ねたことがあった。すると、ホームズは初老の紳士と話し込んでいた。し、赤ら顔の紳士で、頭髪が燃えるように赤かったのを覚えている。私は仕事の邪魔をしたと思い、詫びを入れてお暇しようとした。ホームズは不意に私を部屋に引きずり込み、私の背後にある扉を閉めたのである。「いや、実にいい頃合いだ、ワトソンくん。」ホームズの声は、親しみに満ちていた。「おや、もしかして仕事中だったかな。