Webサイトを運営していくにあたり、他のサイトのやCSSコードやプログラムコードを利用させてもらい、「引用」という形で紹介することも多いかと思います。
wrodPressであればblockquoteをクリックすることでタグが表示され手軽に引用部分を作成することが可能です。

そんなblockquoteを少しでもおしゃれにしたい!という方々のためにまさしく参考にさせてもらっているサイトをご紹介いたします。

引用(blockquote)デザイン参考サイト

css-lecture

blockquote引用CSSのパターンが4種類用意されており、好みのデザインを選ぶことが可能です。もちろん提供されているソースコードをカスタマイズしてオリジナルに仕上げることも可能ですよ
css-lecture

css-tricks.com

blockquote海外サイトのCSS-Tricksで公開されている引用符です。非常にシンプルですが、わかりやすいですよね。
サンプルソースは以下になります。

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "201C""201D""2018""2019";
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}

左上にあるダブルクォーテーションもCSSで設定されておりますので、無理に画像を読み込む必要もありません。
Simple and Nice Blockquote Styling

Webクリエイターズボックス

クォーテーションwebクリエイターの中でも有名なブログWebクリエイターズボックスさんでも紹介されております。htmlにspanを利用し、デザインをする方法です。

htmlのサンプルコードは以下です。

<blockquote>
  <span>
    引用部分のデザイン。最初と最後にクォーテーションの画像を使いました。ちょこんと、ポイントになっていいのでは?
  </span>
</blockquote>

CSSのサンプルコードは以下です。
背景画像を利用しておりますが、ダブルクォーテーションの変更を行うときは、この画像を変更してください。

blockquote {
    background: #cbf5ff url(http://www.sample.com/sample/img/sample_open.gif) no-repeat 10px 10px;
    padding: 20px;
    text-indent: 15px;
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Meiryo,"メイリオ",Helvetica,Sans-Serif;
}
blockquote span{
    background: url(http://www.sample.com/sample/img/sample_close.gif) no-repeat bottom right;
    display: block;
}

Webクリエイターズボックス

おーとえすとさいと

blockquotecssで疑似要素とか言われている

:after

とか

:before

とかを使う方法でのカスタマイズ方法を紹介してあります。
サンプルコードは以下になります。

blockquote{
background-color:#ddd;
padding:3em 1em;
position:relative;
}
blockquote:before{
content:"“";
font-size:600%;
line-height:1em;
font-family:"MS Pゴシック",sans-serif;
color:#999;
position:absolute;
left:0;
top:0;
}
blockquote:after{
content:"”";
font-size:600%;
line-height:0em;
font-family:"MS Pゴシック",sans-serif;
color:#999;
position:absolute;
right:0;
bottom:0;
}

他にもたくさんのCSSがサンプルで紹介されております。
おーとえすとさいと

SEO的に注意すること

GoogleのMatt Cutts氏が引用に関してもコメントを残しております。
複数の外部サイトの文章をつなげて一つのコンテンツを作る事はGoogleのガイドライン違反となるようです。つまりSEO的に考えるとNGとなり圏外対象になる確率が非常に高いです。

ペナルティと見なされない正しい引用(たぶん・・・)

Matt Cutts氏の発言から、私が考えるに

  • blockquoteタグとともに引用元へリンクを付けてあげる事でGoogle
  • オリジナルの意見をしっかり掲載する
  • コピペのオンパレードにしない

をしっかり守ることで、各個人のコンテンツに昇華されると考えております。

その他・まとめ

引用符のデザインはある程度同じになるかもしれませんが、背景のダブルクォーテーションやフォントサイズ、余白等で好みが分かれると思います。その場合はCSSをちょいちょいいじっていただければサイトテイストに合わせることができます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です