＞ ＞ 本文に引用をつける

本文に引用をつける

Posted at October 20,2005 11:59 PM
Tag：[blockquote, CSS, quotetitle]

他のブログ記事や情報を引用する場合に、

これは引用文です

という囲い枠を使っているのを頻繁に見かけると思います。これは「引用」という手法で、当サイトのカスタマイズ記事ではリストを表示する時によく使用しています。

実はブログを始めた当初、この引用の設定方法がわからず（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）の指定が参考になれば幸いです。

Posted by yujiro   このページの先頭に戻る
関連記事
関連記事をもっと読む
トラックバックURL


トラックバック

≫ 引用の方法と色の参考サイト様 from 裏日記･･･気ままに更新･･･備忘録
Movable Type3.2-ja 覚え書き 備忘録？ ◎引用の方法 編集画面右上にこんなアイコン... [続きを読む]

Tracked on February 24, 2006 3:10 PM

≫ 引用したのにインデントみたいになってる。 from 道化師ラッパンのささやき
初めて「引用」を使ってみたのに、インデントしたみたいな感じになってるだけですがな。(T.T) ってことで、またもや検索すると、どうやらＣＳＳに記述すれば解... [続きを読む]

Tracked on March 15, 2006 11:19 PM

≫ blockquoteについて[追加] 自動改行と引用タイトル from 心にうつりゆく由無しごと
前に書いたときに、 また、<blockquote>タグ内で改行すると... [続きを読む]

Tracked on May 24, 2006 9:43 AM

≫ 引用　blockquote　のテスト from KAJIYA.JP LOG
引用を見やすくしたかったので以下のエントリーを参考にさせていただきました。 小粋... [続きを読む]

Tracked on October 5, 2006 1:22 PM

≫ アメブロのカスタマイズに挑戦！！-CSS編集　（不安定） from KINOKO Weblog@群馬
アメブロをカスタマイズしようと思いCSS編集を少ししてみました。今回挑戦したのは ムーバブルタイプなどでよく見かける枠を表示してその中に記事を表示できる... [続きを読む]

Tracked on February 14, 2007 2:09 PM

≫ 囲い枠の作り方 from ディスカバリーネット！ネットビジネス初心者編
皆さん、色々なサイトを見ていると、枠で囲んである文章などを 見ることがありませんか？？ 私のブログでも枠はたま~に登場していますが、 枠で表示を区切る事... [続きを読む]

Tracked on August 10, 2007 11:09 AM
コメント

はじめまして。カスタマイズで、いろいろと参考にさせていただいてます。
あ、あの、＜div class="quotetilte"＞
太字部分の綴りが、どうもクラスタ名の方と違っているようで、、、。
すでにお気づきのようだったらすみません。
どうぞ、このコメントは削除しておいてください。

[1] Posted by やまけろ : October 21, 2005 6:05 PM

＞やまけろさん
こんばんは。
いつもありがとうございます。

ご指摘の typo、修正いたしました。
どうもありがとうございました！

[2] Posted by yujiro : October 22, 2005 1:13 AM

毎回丁寧なサポートほんと感謝しております。yujiroさんのおかげで少しづつMTへの知識がついていくようです。これからも宜しくお願いします。ありがとございました。

[3] Posted by panser : October 22, 2005 10:41 AM

＞panserさん
こんばんは。
ご連絡ありがとうございました。
着々とカスタマイズされているようですね。
こちらこそ今度ともどうぞよろしくお願い致します。

[4] Posted by yujiro : October 22, 2005 9:48 PM

こんにちは。いつもお世話になっています。
ＵＲＬのページを見ていただきたいのですが、引用文を適用したところ、改行が行われている部分と、行われていない部分が発生しました。
コレは何か解決法があるのでしょうか？お願い致します。

エントリー本文には・・
<blockquote>あんな作品でも
私には意味があった
もちろん飢餓を解消したり
地球を救えないけれど

<strong>私には意味があったの</strong>
なぜ現実は
ハッピーエンドにならないの？</blockquote>

と記入してあります。

どうぞ宜しくお願い致します。

[5] Posted by hi-lite&coffee : May 12, 2007 3:59 PM

＞hi-lite&coffeeさん
こんにちは。
＃最初に投稿された[5]のコメントを修正しましたので、後のコメントは勝手ながら削除させていただきました。

ご質問の件ですが、「エントリーにpタグとbrタグが入る仕組み（その2：blockquoteにbrタグを挿入）」が参考になれば幸いです。
それではよろしくお願い致します。

[6] Posted by yujiro : May 14, 2007 1:24 PM
コメントする
greeting

*必須

*必須（非表示）


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります（全て半角文字）