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

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

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

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

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

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

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

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

ポイント：引用文は読者にわかるようなデザインにする#

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

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

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

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

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

【HTML】blockquoteとciteの書き方#

というタグを使います。
タグで囲んだ文章は引用・転載文だと、読者にも検索ロボットにも伝えることができます。
1
<blockquote cite="引用元URL">
2
    <p>引用文</p>
3
    <cite>引用：<a href="引用元URL">引用元の記事タイトル</a></cite>
4
</blockquote>

WordPressで引用デザインを変える方法#

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

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

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

wordpressのstyle.cssを変更する

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

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

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

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

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フォントを使わずに引用符の記号を使うこともできます。
その場合はコードの以下の２行を

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

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

1
content:'“';

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

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

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

1
content:'”';

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

引用(blockquote)のCSSデザインサンプル#

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

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

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

引用符サンプル１

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
}

左に２本ライン#

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

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
}

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

引用符サンプル２

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
}

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

引用符サンプル３

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
}

引用符を丸で囲む#

引用符サンプル４

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
}

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

引用符サンプル５

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
}

まとめ#

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

See the Pen blockquote sample by Emi (@filledforest) on CodePen.