引用・転載文＜blockquote＞をCSSで飾る方法！WordPressで簡単利用法！

ネットサーフィンをしていると良く拝見するのが引用文である。他サイトの情報を転記する場合には引用文であることを明示していることありませんか？

もしくはサイト運営者がネット上の情報を引用したい場合には、引用元を明らかにすることで著作権絡みのトラブルを回避することに繋がります。この引用文を文字だけで引用していることを伝えているサイトから、「“（ダブルコーテーション）」と枠を囲い分かり易くしているサイトまで色々あります。

何が正しいという訳ではないのですが、WordPressには「” 引用」というフォーマットがあるのご存知でしょうか？

この引用フォーマットを利用すると<blockquote>というHTMLタグが付くことになっています。<blockquote>は引用・転載を意味しており、WordPressでなくても引用・転載する場合には<blockquote>を利用することが好ましいのは確かです。

あと<blockquote>は比較的長い文章の引用や転載となりますが、改行がないような短い文の場合には＜Q＞タグを利用するのが好ましいです。これはHTMLの決まりであると思って良いかと思います。HTMLタグの詳細についてはココでは説明をいたしませんが、正しいタグの利用により正確な情報発信となることに繋がりますので注意が必要です。

今回はこの<blockquote>をスタイルシート（CSS）で飾ることで、引用文であることが分かり易くする方法について説明していきたいと思います。

<blockquote>をスタイルシートで飾る方法

<DIV>タグをCSSで装飾する方法を少しばかり応用するようなカタチとなります。正直な話ですが<DIV>タグでも同じようにすることは可能なのですが、HTMLの規則で引用・転載文には<blockquote>を使うことを推奨しています。

敢えて規則に逆らうコトはしない方が良いです。

検索エンジンの巡回においても、ここら辺は意外と見られているような気がします。どうせなら情報を正確に伝える手段を選択しましょう！

細かいことなのですがチョットしたことでサイトの印象は変わりますので、手間を惜しまずコツコツやりたいところです。

実際の完成サンプル例のご紹介！

先ずは完成形のイメージをご紹介します！画像での説明でなく今現在、本サイトで利用している<blockquote>タグのスタイルとなります。もしかする将来的にはスタイルを変えている可能性もあり、実際の説明と完成形がチグハグになっているかもしれません。

Twenty Seventeen は、没入感のあるアイキャッチ画像と繊細なアニメーションを用いて、サイトに命を吹き込みます。ビジネスサイトにフォーカスをあて、ウィジェット、ナビゲーション、ソーシャルメニュー、ロゴ等はもちろんフロントページの複数のセクションを目立たせます。カスタム配色で非対称のグリッドの個性を出し、投稿フォーマットでマルチメディアコンテンツを際立たせます。2017年のデフォルトテーマは、多くの言語において、どんな才能に対しても、どのようなデバイスでも、うまく動作します。
引用元：WordPress.org 日本語

これは「Twenty Seventeen」の配布サイトでの紹介文の引用になります。注目点は引用文章の前後に「“（ダブルコーテーション）」を付加しているトコロです。そして枠の色と背景色、文字フォント等を装飾していくことになります。

スタイルシートのカスタマイズ方法！

なるべく無駄なモノを極力省いた形でのスタイルシートへの記述をご紹介します。実際にこの記事を作成した時点では下のスタイルを本サイトで利用しています。

WordPressでのスタイル修正については子テーマの「style.css」に修正をして頂けるようお願いします。

下記がスタイルシート（CSS）へ追記している内容になります！

/* 引用タグ */
blockquote{
position: relative;
margin: 1.5em 1em 1.5em;
padding: 1em;
border: 1px solid #E6E6E6;
background-color: #FAFAFA;
z-index: 1;
}
blockquote p{
position: relative;
z-index: 1;
}
blockquote:before{
content: "“";
font-size: 500%;
line-height: 1em;
color: #BDBDBD;
position: absolute;
left: 0;
top: 0;
}

blockquote:after{
content: "”";
font-size: 500%;
line-height: 0em;
color: #BDBDBD;
position: absolute;
right: 0;
bottom: 0;
}

ポイントは<blockquote>タグの前後の指定をしている点です！