エントリー本文
本文に引用をつける
他のブログ記事や情報を引用する場合に、
これは引用文です
という囲い枠を使っているのを頻繁に見かけると思います。これは「引用」という手法で、当サイトのカスタマイズ記事ではリストを表示する時によく使用しています。
実はブログを始めた当初、この引用の設定方法がわからず（CSSもよく分かっていなかった）、調べるのに結構苦労した記憶があります。この表示方法を何という単語で検索して良いのかさえ分かりませんでした。
ということで、このエントリーでは引用の設定方法について説明します。
１．引用文を blockquote 要素で囲む
HTMLでは引用を明示する意味的なタグとして blockquote 要素が用意されています。
上記の例では本文中に
<blockquote><p>これは引用です。</p></blockquote>という指定を行うだけです。blockquote 要素の子要素として p 要素等のブロック要素が構造上必要ですが、表示についてはブラウザ依存と思われます。
blockquote のデフォルトスタイルは上下左右にインデントが付与されますので、CSSの設定を行わなくてもそれなりの表示になります。余談ですが、短い引用（テキストの両端に「"」をつける）の場合は q 要素を使って、
<q>これは引用です。</q>とします。
Movable Type 3.1x 以降の編集画面であれば、編集画面右上にある
というリンクアイコンを使うと便利です。使い方は、引用したいテキストをマウス等で選択状態にしてからこのアイコンをクリックすると、選択状態のテキストの両端に blockquote タグが付与されます。
２．スタイルを設定する
blockquote に任意のスタイル（枠線・背景等）を与えるために、CSS（styles-site.css）に下記のように blockquote のタイプセレクタを作ります。
blockquote {
}この中に「プロパティ」と呼ばれるものを設定して、フォントや背景・枠線等の装飾を行います。下記に設定のサンプルを示します。各プロパティの意味は右側のコメント（/* */ の部分）を参考にしてください。
これは当サイトの blockquote に近い設定内容になっています。
blockquote {
margin: 15px; /* 枠線を表示する上下左右の空白 */
padding: 10px; /* 枠線から文字までの上下左右の空白 */
background: #fffff6; /* 背景色 */
border: 1px solid #999999; /* 文字色 */
font-size: 10px; /* フォントサイズ */
line-height: 150%; /* 改行幅 */
}枠線（border）については、以前書いた枠線（border）の指定が参考になれば幸いです。
≫ 引用の方法と色の参考サイト様 from 裏日記･･･気ままに更新･･･備忘録
Movable Type3.2-ja 覚え書き 備忘録？ ◎引用の方法 編集画面右上にこんなアイコン... [続きを読む]
≫ 引用したのにインデントみたいになってる。 from 道化師ラッパンのささやき
初めて「引用」を使ってみたのに、インデントしたみたいな感じになってるだけですがな。(T.T) ってことで、またもや検索すると、どうやらＣＳＳに記述すれば解... [続きを読む]
≫ blockquoteについて[追加] 自動改行と引用タイトル from 心にうつりゆく由無しごと
前に書いたときに、 また、<blockquote>タグ内で改行すると... [続きを読む]
≫ 引用 blockquote のテスト from KAJIYA.JP LOG
引用を見やすくしたかったので以下のエントリーを参考にさせていただきました。 小粋... [続きを読む]
≫ アメブロのカスタマイズに挑戦！！-CSS編集 （不安定） from KINOKO Weblog@群馬
アメブロをカスタマイズしようと思いCSS編集を少ししてみました。今回挑戦したのは
ムーバブルタイプなどでよく見かける枠を表示してその中に記事を表示できる... [続きを読む]
はじめまして。カスタマイズで、いろいろと参考にさせていただいてます。
あ、あの、＜div class="quotetilte"＞
太字部分の綴りが、どうもクラスタ名の方と違っているようで、、、。
すでにお気づきのようだったらすみません。
どうぞ、このコメントは削除しておいてください。
＞やまけろさん
こんばんは。
いつもありがとうございます。
ご指摘の typo、修正いたしました。
どうもありがとうございました！
毎回丁寧なサポートほんと感謝しております。yujiroさんのおかげで少しづつMTへの知識がついていくようです。これからも宜しくお願いします。ありがとございました。
＞panserさん
こんばんは。
ご連絡ありがとうございました。
着々とカスタマイズされているようですね。
こちらこそ今度ともどうぞよろしくお願い致します。
こんにちは。いつもお世話になっています。
ＵＲＬのページを見ていただきたいのですが、引用文を適用したところ、改行が行われている部分と、行われていない部分が発生しました。
コレは何か解決法があるのでしょうか？お願い致します。
エントリー本文には・・
<blockquote>あんな作品でも
私には意味があった
もちろん飢餓を解消したり
地球を救えないけれど
<strong>私には意味があったの</strong>
なぜ現実は
ハッピーエンドにならないの？</blockquote>
と記入してあります。
どうぞ宜しくお願い致します。
＞hi-lite&coffeeさん
こんにちは。
＃最初に投稿された[5]のコメントを修正しましたので、後のコメントは勝手ながら削除させていただきました。
ご質問の件ですが、「エントリーにpタグとbrタグが入る仕組み（その2：blockquoteにbrタグを挿入）」が参考になれば幸いです。
それではよろしくお願い致します。
