引用部分ということがわかりやすいデザインにする

blogなどをしていると、他サイトの文章を引用したいときがあります。その際、自分が書いた文章なのか引用した文章なのかを、見た目的にわかりやすくする必要があります。

また、引用元のサイト名やURLも明記しておくべきでしょう。

引用元をcontentプロパティで表示

cite 属性やtitle属性の値をcontentプロパティで呼び出せるので、それをblockquoteの前後に表示させる技です。

サンプル

(X)HTMLコード

<blockquote cite="URI" title="引用先サイトのタイトル">
<p>
引用文引用文引用文引用文引用文引用文引用文引用文引用文
</p>
</blockquote>

CSSコード

@charset "utf-8";

blockquote {
   margin:0;
   background:url(qs.gif) 0 2em no-repeat;
}

blockquote p {
   padding: 10px 40px;
   background:url(qe.gif) 100% 100% no-repeat;
}

blockquote[title]:before {
   display: block;
   border-bottom: 1px solid #999;
   content: "｢"attr(title)"｣より引用";
}

blockquote[cite]:after {
   display: block;
   border-top: 1px solid #999;
   text-align: right;
   content: attr(cite);}

ここでの注意点は、｢:before｣｢:after｣擬似要素はIE7以前のブラウザは有効ではないということです。IE8からは使えるとのことです。Firefoxなどのモダンブラウザには有効です。また、Firefoxでは:before擬似要素や:after擬似要素のテキストを選択してコピーできません。Operaではできるようです。

あとは、CSSファイルの中で日本語を使用しているのできちんとエンコード指定をしておかないと文字化けします。

引用元を別に用意する

上記方法ではブラウザによって動作が異なったり、引用元のテキストにリンクをはることができません。そこで少し手間がかかりますが、引用元はテキストにアンカーをはって表示しようと思います。

サンプル

(X)HTMLコード

<blockquote cite="URI" title="引用先サイトのタイトル">
<p>
引用文引用文引用文引用文引用文引用文引用文引用文引用文
</p>
</blockquote>
<p class="resource"><a href="URI">引用先サイトのタイトル</a>より引用</p>

CSSコード

@charset "utf-8";

blockquote{
margin:0;
background:url(qs.gif) 0 0 no-repeat;
border:1px solid #ddd;
}

blockquote p {
padding: 10px 40px;
background:url(qe.gif) 100% 100% no-repeat;
}

p.resource {
margin:0;
padding:3px;
text-align: right;
background:#ddd;
}

画像はご自由にお使いください

サンプルで使用したダブルクォーテーションマークの画像はご自由にお使いください。商用サイトでもお使いいただけます。提供元の表示などは不要です。

Windowsであれば右クリックをして｢名前をつけて画像を保存｣でダウンロードしてください。

引用テキストをワンクリックで作る方法

引用のためのHTMLタグをいちいち組んでいたらblogの書くスピードも落ちてしまいますよね。そこで、簡単にHTMLタグが成型できるツールを紹介します。

Make Link :: Firefox Add-ons

これはFirefoxのアドオンで、引用したい文章をドラッグして右クリックで型を選ぶと成型したかたちでコピーできるという優れものです。ここでは詳しく説明しませんが、以下のサイトが参考になると思います。

新、ブロガー御用達貼り付けツール Make Link - えむもじら

ちなみに上記2番目で説明した引用方法の成型文は以下のように設定します。

<blockquote cite="%url%"title="%title%">
<p>%text%</p>
</blockquote>
<p class="resource"><a href="%url%">%title%</a>より引用</p>

その他にも同様のツールはたくさんあるので試してみてください。