【CSSコピペ】おしゃれな引用（blockquote）デザイン10選

記事を書く時に、他のホームページやブログの文章を一部紹介したいことって、けっこうありませんか？

この記事ではコピペで使えるCSSのサンプルを10種類用意しました。

ブログやWordPressで引用（blockquote）のデザインを変える方法もご紹介します。

HTMLとCSSのコピペで使えるので、ぜひご活用ください。

まずはコピペ：シンプルなblockquoteのCSS#

左にラインを付けた、シンプルな引用デザインです。Font Awesomeなどの外部ライブラリは不要です。
HTMLを記事のHTML編集欄に、CSSをブログやテーマの追加CSS欄に貼り付けて使ってください。

1
<blockquote class="simple-quote" cite="https://example.com/source/">
2
  <p>引用する文章をここに入れます。</p>
3
  <cite>引用：<a href="https://example.com/source/">引用元の記事タイトル</a></cite>
4
</blockquote>

1
blockquote.simple-quote {
2
  margin: 1.5em 0;
3
  padding: 1em 1.25em;
4
  border-left: 4px solid #da8596;
5
  background: #fff5f8;
6
  color: #333;
7
}
8

9
blockquote.simple-quote p {
10
  margin: 0 0 0.5em;
11
}
12

13
blockquote.simple-quote cite {
14
  display: block;
15
  font-size: 0.875em;
16
  font-style: normal;
17
  text-align: right;
18
}

https://example.com/source/ は実際の引用元URLに、引用文と記事タイトルも引用元に合わせて差し替えてください。
ほかの引用と分けて使えるよう、simple-quote というクラス名を付けています。

blockquoteの色と形を選んでCSSコードをつくる#

好きな色とデザインを選ぶと、コピペ用のCSSができます。
見本を探すより早く使いたい方は、こちらからどうぞ。

JavaScriptを有効にすると、色と形を選んでコードをつくれます。下の見本のコードをコピーして使うこともできます。

blockquoteで引用文をわかりやすく見せるポイント#

Webで文章を引用をする際には著作権のルール上、他の文と区別して、「これが引用文だよ」ってわかりやすくするために表現する必要があります。

お使いのブログエディターの「”（引用符マーク）」ボタンを探してみてくださいね。

WordPressのエディタだと、これが引用ボタンです。

ブロックエディターで引用を追加

WordPressのブロックエディターだと、これが引用ボタンです。

【HTML】blockquoteとciteの書き方#

<blockquote>というタグを使います。
<blockquote>タグで囲んだ文章は引用・転載文だと、読者にも検索ロボットにも伝えることができます。

1
<blockquote cite="引用元URL">
2
    <p>引用文</p>
3
    <cite>引用：<a href="引用元URL">引用元の記事タイトル</a></cite>
4
</blockquote>

WordPressでblockquoteのCSSデザインを変える方法#

ここではCocoon（親テーマCocoon, 子テーマCocoon childを使用）を例に説明しますね。

外観からテーマ編集にいく

外観＞テーマ編集にいきます。
CSSのコードはstyle.cssに書かれていることがおおいです。
（テーマによって、どのCSSファイルに書かれているか変わることがあるので確認してみてください。）

WordPressのstyle.cssを変更する

まず「Cocoon」のstyle.cssからblockquoteのCSSコードを探します。

一式をコピーして、子テーマのstyle.cssにコードを貼り付けます。
このコードを書き換えればOK！！

blockquoteの引用符にFont Awesome（Webフォント）を使う方法#

今回のデザインでは、引用符「“」と「”」にWebフォントのFont Awesomeを使っています。
Webフォントを使うと機種によって文字の表示がブレずに、引用符のマークが綺麗に表示できます。
Font Awesomeを使う場合は、以下のように`~`内に、Font Awesomeの読み込みコードを貼り付けてください。

1
<head>
2
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
3
</head>

Webフォントなしで引用符の記号を使う場合#

Webフォントを使わずに引用符の記号を使うこともできます。
その場合はコードの以下の2行を

1
font-family:'FontAwesome';
2
content:'\f10d';

こちらに変更してください。（「\f10d」は、「“」のことです）

1
content:'“';

また、このコードの以下の2行も同じように

1
font-family:'FontAwesome';
2
content:'\f10e';

こちらに変更してください。（\f10eは、「”」を示しています。）

1
content:'”';

※Webフォントに適したサイズや余白に設定しているので、文字を変えた場合は表示がずれてしまうと思います。padding（枠内の余白）やfont-size（文字の大きさ）を調整してくださいね。

blockquoteのCSSデザインサンプル10選#

引用文のCSSデザインを紹介していきます。
中の文章はいろんな名言を使っていますが、どれもこちらのHTMLをベースにしています。

1
<blockquote>
2
    <p>引用文</p>
3
    <cite>引用：引用元の記事タイトル</cite>
4
</blockquote>

左にラインと引用符をいれる#

引用符サンプル1

1
blockquote{
2
    position:relative;
3
    border-left:3px solid #DA8596;
4
    padding-left:10px;
5
}
6
blockquote:before{
7
    position:absolute;
8
    font-family:'FontAwesome';
9
    content:'\f10d';
10
    font-size: 20px;
11
    color:#DA8596;
12
}
13
blockquote p{
14
    position:relative;
15
    padding-left:30px;
16
}
17
blockquote cite{
18
    display: block;
19
    font-size:0.8rem;
20
    color:#F8C8B2;
21
    text-align:right;
22
}

左に2本ライン#

引用符デザイン：左に2本ラインを入れる

1
blockquote{
2
  position:relative;
3
  border-left:3px double #997bad;
4
  padding-left:10px;
5
  background:#e5e6f4;
6
}
7
blockquote:before{
8
  position:absolute;
9
  font-family:'FontAwesome';
10
  content:'\f10d';
11
  font-size: 18px;
12
  color:#997bad;
13
  padding-top:10px;
14
}
15
blockquote p{
16
  position:relative;
17
  padding: 30px 10px 0px;
18
}
19
blockquote cite{
20
  display: block;
21
  font-size:0.8rem;
22
  color:#997bad;
23
  text-align:right;
24
  padding:10px;
25
}

ボックスの左上と右下に引用符をつける#

引用符サンプル2

1
blockquote{
2
    position:relative;
3
    border:1px solid #8BC0B8;
4
    border-radius:10px;
5
    padding:20px;
6
}
7
blockquote:before{
8
    position:absolute;
9
    font-family:'FontAwesome';
10
    content:'\f10d';
11
    font-size: 20px;
12
    color:#8BC0B8;
13
    top:10px;
14
    left:10px;
15
}
16
blockquote:after{
17
    position:absolute;
18
    font-family:'FontAwesome';
19
    content:'\f10e';
20
    font-size: 20px;
21
    color:#8BC0B8;
22
    right:10px;
23
    bottom:10px;
24
}
25
blockquote cite {
26
    display: block;
27
    font-size: 0.8rem;
28
    text-align: right;
29
    color: #D4DED7;
30
    padding-right:20px;
31
}

左右のラインと、左上と右下に引用符#

引用符デザイン

1
blockquote{
2
  position:relative;
3
  border-left:2px solid #A5CC80;
4
  border-right:2px solid #A5CC80;
5
  padding:20px;
6
  background:#DDE8C2;
7
}
8
blockquote:before{
9
  position:absolute;
10
  font-family:'FontAwesome';
11
  content:'\f10d';
12
  font-size: 28px;
13
  color:#A5CC80;
14
  top:5px;
15
  left:10px;
16
}
17
blockquote:after{
18
  position:absolute;
19
  font-family:'FontAwesome';
20
  content:'\f10e';
21
  font-size: 28px;
22
  color:#A5CC80;
23
  right:10px;
24
  bottom:5px;
25
}
26
blockquote cite {
27
  display: block;
28
  font-size: 0.8rem;
29
  text-align: right;
30
  color: #808080;
31
  padding-right:20px;
32
}

上下のラインに引用符をつける#

引用符サンプル3

1
blockquote{
2
    position:relative;
3
    border-top:1px solid #7A87B0;
4
    border-bottom:1px solid #7A87B0;
5
    padding:10px;
6
}
7
blockquote:before{
8
    position:absolute;
9
    background-color:#FFFFFF;
10
    color:#7A87B0;
11
    font-family:'FontAwesome';
12
    content:'\f10d';
13
    line-height:1;
14
    text-align:center;
15
    top:-20px;
16
    left:-10px;
17
    padding:10px;
18
    font-size:20px;
19
}
20
blockquote:after{
21
    position:absolute;
22
    right:-10px;
23
    bottom:-20px;
24
    background-color:#FFFFFF;
25
    padding:10px;
26
    color:#7A87B0;
27
    font-family:'FontAwesome';
28
    content:'\f10e';
29
    line-height:1;
30
    text-align:center;
31
    font-size:20px;
32
}
33
blockquote cite {
34
    display: block;
35
    padding-right:30px;
36
    font-size: 0.8rem;
37
    text-align: right;
38
    color: #808080;
39
}

引用符を丸で囲む#

引用符サンプル4

1
blockquote{
2
    position:relative;
3
    background:#FBDFDF;
4
    border-radius:10px;
5
    padding:20px;
6
}
7
blockquote:before{
8
    position:absolute;
9
    left:45%;
10
    top:-24px;
11
    background-color:#FFFFFF;
12
    color:#808080;
13
    border:2px solid #FBDFDF;
14
    box-sizing:border-box;
15
    font-family:'FontAwesome';
16
    content:'\f10e';
17
    line-height:1;
18
    padding-top:12px;
19
    text-align:center;
20
    width:48px;
21
    height:48px;
22
    font-size:20px;
23
    border-radius:24px;
24
}
25
blockquote p {
26
    color:#808080
27
}
28
blockquote cite {
29
    display: block;
30
    border-top:1px solid #808080;
31
    padding-top:10px;
32
    font-size: 0.8rem;
33
    text-align: center;
34
    color: #808080;
35
}

四角い枠と丸い引用符#

引用符デザイン

1
blockquote{
2
  position:relative;
3
  border:1px solid #a3c7db;
4
  background:#FFFFF;
5
  padding:20px;
6
}
7
blockquote:before{
8
  position:absolute;
9
  left:45%;
10
  top:-24px;
11
  background-color:#a3c7db;
12
  color:#FFFFFF;
13
  border:2px solid #a3c7db;
14
  box-sizing:border-box;
15
  font-family:'FontAwesome';
16
  content:'\f10d';
17
  line-height:1;
18
  padding-top:12px;
19
  text-align:center;
20
  width:48px;
21
  height:48px;
22
  font-size:20px;
23
  border-radius:24px;
24
}
25
blockquote p {
26
  color:#808080
27
}
28
blockquote cite {
29
  display: block;
30
  padding-top:10px;
31
  font-size: 0.8rem;
32
  text-align: right;
33
  color: #808080;
34
}

上下のラインと中央に引用符をつける#

引用符サンプル5

1
blockquote {
2
    position: relative;
3
    background-color: #f9fbf9;
4
    border-top: 1px solid #B7D7B7;
5
    border-bottom: 1px solid #B7D7B7;
6
    box-shadow: 0 0 0 10px #f9fbf9;
7
    padding: 20px;
8
}
9
blockquote p {
10
    margin-top: 20px;
11
}
12
blockquote p::before {
13
    font-family:'FontAwesome';
14
    content:'\f10d';
15
    font-size: 24px;
16
    color: #B7D7B7;
17
    position: absolute;
18
    top: 10px;
19
    left: 50%;
20
}
21
blockquote cite {
22
    display: block;
23
    font-size: 0.8rem;
24
    text-align: right;
25
    color: #B7D7B7;
26
}

左上に引用符を重ねる#

【引用符デザイン】左上に引用符を重ねる

1
blockquote{
2
  position:relative;
3
  background:#F9eada;
4
  border-radius:10px;
5
  padding:20px;
6
}
7
blockquote:before{
8
  position:absolute;
9
  left:5%;
10
  top:-24px;
11
  color:#808080;
12
  box-sizing:border-box;
13
  font-family:'FontAwesome';
14
  content:'\f10d';
15
  line-height:1;
16
  padding-top:12px;
17
  text-align:left;
18
  font-size:40px;
19
}
20
blockquote p {
21
  color:#808080
22
}
23
blockquote cite {
24
  display: block;
25
  border-top:1px solid #808080;
26
  padding-top:10px;
27
  font-size: 0.8rem;
28
  text-align: right;
29
  color: #808080;
30
}

左上と右下に引用符を重ねる#

引用符デザイン：左上と右下に重ねる

1
blockquote{
2
  position:relative;
3
  background:#CDE7EE;
4
  padding:20px;
5
}
6
blockquote:before{
7
  position:absolute;
8
  left:5%;
9
  top:-24px;
10
  color:#3CAAB1;
11
  box-sizing:border-box;
12
  font-family:'FontAwesome';
13
  content:'\f10d';
14
  line-height:1;
15
  padding-top:12px;
16
  text-align:left;
17
  font-size:40px;
18
}
19
blockquote p {
20
  color:#808080
21
}
22
blockquote cite {
23
  display: block;
24
  border-top:1px dashed #FFFFFF;
25
  padding-top:5px;
26
  padding-bottom:5px;
27
  font-size: 0.8rem;
28
  text-align: right;
29
  color: #808080;
30
}
31
blockquote:after{
32
  position:absolute;
33
  right:5%;
34
  bottom:-25px;
35
  color:#3CAAB1;
36
  box-sizing:border-box;
37
  font-family:'FontAwesome';
38
  content:'\f10e';
39
  line-height:1;
40
  padding-bottom:10px;
41
  text-align:left;
42
  font-size:40px;
43
}

まとめ#

サンプルのコードは、.sample1〜.sample10とクラス名を分けて設定しています。
HTMLのコードを貼り付けるときは<div class="sample1">と</div>は省いてOKですよ。同様に、CSSのコードも.sample1〜.sample5のクラス名は除いて使ってください。

次に読む#

【CSSコピペ】おしゃれな囲み枠（ボックス）デザイン48選｜シンプルで女性らしい

【CSSコピペ】箇条書きリスト（ul・li）をおしゃれにするデザイン10選