引用府の無料アイコン | フリー素材

引用府アイコンのフリー素材です。曲線型でおたまじゃくしのような形をしている、ダブルクォーテーションマーク系の引用府のイラスト（無料）になっています。

引用府はその名の通り文章や文言をどこかから引用していることを表すための記号です。ブログで使用する機会も多く、他のサイトやブログ等から文章を引用し、その内容について自分の考えなどを自分のブログ上で言及するときに、他サイト等から引用してきた文章全体をこのような引用府のアイコンで囲んで自分の文章と明確に区別します。
ブログで引用文を区別するときにはこのようなダブルクォーテーション型の引用府を使っているサイトが多いですが、日本語における「」（鉤括弧）も引用府として使われることがあります。また、メールを返信するときに、相手からの前メールの文章に対し、メーラー（メールソフト）が＞のような記号を各行の左側に付与します（メーラーの設定によります）がこれも引用府のひとつです。

ホームページやブログで引用文を扱うときには、blockquoteというHTMLタグで文章を囲みます。HTMLタグには、見出し、箇条書き、本文、表組、などなど、それぞれのタグに意味がありますが、blockquoteというタグはまさに引用文であることを示しているタグです。そのため、HTMLの文法上、このタグで引用文を囲むのは正しい使い方になります。blockquoteで囲んで文章に文法的な意味を持たせますが、それをブラウザーで表示するときの見た目のスタイルはCSSを使って定義します。ちなみにブラウザーのデフォルトスタイルでは引用文は左に広めのインデントが設けられることが多いようです（ブラウザーによります）が、デザインをカスタマイズするときには基本的には自分でCSSファイルを編集することになります。
CSSではフォントサイズ、マージン（余白）、行間の広さなどを定義しますが、このときバックグラウンドイメージ（背景画像）についても自分で決めてカスタマイズすることが可能です。この背景画像に、このページに掲載しているフリーの引用府アイコン素材を設定するのはいかがでしょうか。
このサイトで配布しているフリーのアイコン素材はすべてepsやpng形式のファイルになっています。epsはもちろんですが、pngについても背景が透過（透明）になっている素材ですので色の変更がとても簡単にできます。
blockquoteというタグに対してCSSファイルでバックグラウンドイメージを左上あたりに設定し、画像の大きさの分だけ左側にパディングを設定します。すると、このタグを使ったときには自動的にこのイラスト素材が表示されて引用文であることがすぐに分かりやすくなります。ちなみに背景画像を文章の左側に表示させ、文章は背景画像にかぶらないように表示させたいのであればマージンではなくてパディングを使用します。マージンで余白をとると、背景画像アイコン素材は文章の下にかぶって表示されてしまいます。パディングなら文章の外側に表示されますので大丈夫です。
blockquoteにcssスタイルを定義すればblockquote全部に自動的にそのスタイルが適用されますが、複数のスタイルを使い分けたい場合などにはクラスを用意してスタイルを定義しておくのがよいでしょう。

引用文をサイトに表示させるときは引用元のサイト名やURLをちゃんと掲載しておきます。このとき、普通に掲載しておいても特に問題はありませんが、正式なhtml文法にこだわりたいならciteというタグを使うのがよいでしょう。前述したようにblockquoteは引用文を表すためのタグですが、citeは引用元を表すという意味を持つタグになります。そのため引用文の上か下あたりで分かりやすいところにこの引用元を示すタグでURLを掲載し、aタグでリンクしておくとよいでしょう。