【コピペOK】お洒落な引用デザイン10選！！

今回はblockquoteを使った引用のデザインをおしゃれに表現したCSSデザインを10選紹介します。

HTMLとCSSをコピペするだけで反映されます。コピペした後に自分なりに編集してオリジナルのデザインにしてみて下さい。

使い方

基本形のHTMLをbodyの好きな箇所にコピペ
headタグ内にFontawesomeのリンクを記述
CSSをスタイルシートにコピペ

注意点

CSSをコピペして表示が崩れる部分がありましたら、blockquoteに任意のclassを振って記述して下さい。

引用の基礎知識と重要性に関してを先に知っておくとデザインを良くする意味が理解出来ます。
以下の記事で予習しときましょう。

引用のHTML基本形
おしゃれな引用デザイン10選！！
デザイン見本まとめ

引用のHTML基本形

以下のHTMLが引用の基本的なコードです。以下のHTMLをCSSで装飾していきます。

▼引用のHTML基本形

<blockquote>
<p>引用デザイン01</p>
<cite>引用元</cite>
</blockquote>

blockquoteは引用を示すタグです。citeは引用元を示すタグです。

また今回紹介するデザインではFontawesomeのアイコンを使用しますので以下のコードを<head>タグの任意の場所に必ず記述して下さい。

▼Fontawesome読み込み用コード

<!--最新バージョンの場合-->
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<!--旧バージョンの場合-->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

おしゃれな引用デザイン10選！！

ここからおしゃれな引用デザイン10選を紹介します。
先に紹介したHTMLをbodyの任意の場所にコピペして、次のCSSをスタイルシートにコピペして下さい。
*サイトによっては微調整は必要になる場合もあります。

シンプルな引用

まずはシンプルでどんなサイトにも合う引用デザインです。これが基本形になります。

CSS

blockquote {
  position: relative;
  padding: 30px 15px 8px 15px;
  box-sizing: border-box;
  font-style: italic;
  background: #eee;
  color: #777;
  border-radius: 5px;
}
blockquote:before{
  display: inline-block;
  position: absolute;
  top: 13px;
  left: 15px;
  content: "\f10d";
  font-family: FontAwesome;
  color: #ccc;
  font-size: 28px;
  line-height: 1;
  font-weight: 900;
}
blockquote p {
  padding: 0;
  margin: 10px 0;
  line-height: 1.7;
}
blockquote cite {
  display: block;
  text-align: right;
  color: #bbb;
  font-size: 0.9em;
}

色を付けたバージョン

基本形に色を付けたバージョンです。

CSS

blockquote {
  position: relative;
  padding: 30px 15px 8px 15px;
  box-sizing: border-box;
  font-style: italic;
  background: #efefef;
  color: #555;
  border-radius: 5px;
  border-left: 3px solid orange;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.10);;
}
blockquote:before{
  display: inline-block;
  position: absolute;
  top: 13px;
  left: 15px;
  content: "\f10d";
  font-family: FontAwesome;
  color: orange;
  font-size: 28px;
  line-height: 1;
  font-weight: 900;
}
blockquote p {
  padding: 0;
  margin: 10px 0;
  line-height: 1.7;
}
blockquote cite {
  display: block;
  text-align: right;
  color: #888888;
  font-size: 0.9em;
}

スマートなイメージ

引用符を横に移動させて、枠を斜めにしてスマートな印象に。

CSS

blockquote {
  position: relative;
  padding: 10px 15px 10px 50px;
  box-sizing: border-box;
  transform: skewX(-15deg);
  border: solid 2px #777;
  color: #464646;
}
blockquote:before{
  display: inline-block;
  position: absolute;
  top: 20px;
  left: 15px;
  content: "\f10d";
  font-family: FontAwesome;
  color: rgb(132, 187, 197);
  font-size: 25px;
  line-height: 1;
  font-weight: 900;
}
blockquote p {
  padding: 0;
  margin: 10px 0;
  line-height: 1.7;
}
blockquote cite {
  display: block;
  text-align: right;
  color: #999;
  font-size: 0.7em;
}

白抜き背景色あり

背景色を付けて引用符を白抜きにしたバージョン。

CSS

blockquote {
  position: relative;
  padding: 10px 15px 10px 50px;
  box-sizing: border-box;
  background:rgb(253, 181, 72, .6); ;
  color: #464646;
}
blockquote:before{
  display: inline-block;
  position: absolute;
  top: 20px;
  left: 15px;
  content: "\f10d";
  font-family: FontAwesome;
  color: #fff;
  font-size: 25px;
  line-height: 1;
  font-weight: 900;
}
blockquote p {
  padding: 0;
  margin: 10px 0;
  line-height: 1.7;
}
blockquote cite {
  display: block;
  text-align: right;
  color: #777;
  font-size: 0.7em;
}

引用符を背景に

引用符を背景に設置してWordPressのデフォルト風に。

CSS

blockquote {
  position: relative;
  padding: 10px 20px;
  box-sizing: border-box;
  font-style: italic;
  color: #333;
  background: rgb(243, 243, 243);
  box-shadow: 2px 4px 2px #eee;
}
blockquote:before{
  display: inline-block;
  position: absolute;
  top: 7px;
  left: 10px;
  content: "\f10d";
  font-family: FontAwesome;
  color: #ddd;
  font-size: 58px;
  line-height: 1;
  font-weight: 900;
}
blockquote p {
  position: relative;
  padding: 0;
  margin: 10px 0;
  z-index: 100;
  line-height: 1.7;
}
blockquote cite {
  position: relative;
  z-index: 100;
  display: block;
  text-align: right;
  color: #555;
  font-size: 0.9em;
}

引用符を背景に（色付き）

引用符を背景に入れて、背景色も入れたバージョン。

CSS

blockquote {
  position: relative;
  padding: 10px 20px;
  box-sizing: border-box;
  font-style: italic;
  color: #333;
  background: rgb(252, 210, 96, .6);
}
blockquote:before{
  display: inline-block;
  position: absolute;
  top: 7px;
  left: 10px;
  content: "\f10d";
  font-family: FontAwesome;
  color: rgb(252, 210, 96, .8);
  font-size: 58px;
  line-height: 1;
  font-weight: 900;
}
blockquote::after{
  display: inline-block;
  position: absolute;
  bottom: 10px;
  right: 10px;
  content: "\f10e";
  font-family: FontAwesome;
  color: rgb(252, 210, 96, .8);
  font-size: 28px;
  line-height: 1;
  font-weight: 900;
}
blockquote p {
  position: relative;
  padding: 0;
  margin: 10px 0;
  z-index: 100;
  line-height: 1.7;
}
blockquote cite {
  position: relative;
  z-index: 100;
  display: block;
  text-align: right;
  color: #555;
  font-size: 0.9em;
}

折り込みっぽく

引用符の入った付箋の様なものを折り込んでる風。

CSS

blockquote {
  position: relative;
  padding: 5px 10px 5px 32px;
  box-sizing: border-box;
  font-style: italic;
  background: rgb(160, 241, 85, .3);
  border-bottom: solid 3px #9bee4f;
}
blockquote:before{
  display: inline-block;
  position: absolute;
  top: 10px;
  left: -15px;
  width: 40px;
  height: 30px;
  text-align: center;
  content: "\f10d";
  font-family: FontAwesome;
  color: #FFF;
  font-size: 18px;
  line-height: 30px;
  background: #9bee4f;
  font-weight: 900;
}
blockquote:after{
  position: absolute;
  content: '';
  top: 40px;
  left: -15px;
  border: none;
  border-bottom: solid 8px transparent;
  border-right: solid 15px #9bee4f;
}
blockquote p {
  position: relative;
  padding: 0;
  margin: 10px 0;
  z-index: 3;
  line-height: 1.7;
}
blockquote cite {
  display: block;
  text-align: right;
  color: #aaa;
  font-size: 0.9em;
}

線と両端に引用符

線で区切り両端に引用符を置いたスタイル。

CSS

blockquote{
  position:relative;
  border-top:1px solid #1d3026;
  border-bottom:1px solid #1d3026;
  padding:10px;
}
blockquote:before{
  position:absolute;
  background-color:#FFFFFF;
  color:#2f5e45;
  font-family:'FontAwesome';
  content:'\f10d';
  line-height:1;
  text-align:center;
  top:-20px;
  left:-10px;
  padding:10px;
  font-size:20px;
}
blockquote:after{
  position:absolute;
  right:-10px;
  bottom:-20px;
  background-color:#FFFFFF;
  padding:10px;
  color:#2f5e45;
  font-family:'FontAwesome';
  content:'\f10e';
  line-height:1;
  text-align:center;
  font-size:20px;
}
blockquote cite {
  display: block;
  padding-right:30px;
  font-size: 0.8rem;
  text-align: right;
  color: #aaa;
}

立体的

上部に引用符を置いて、さらに立体的に。

CSS

blockquote{
  position:relative;
  background:#bef5f7;
  border-radius:10px;
  padding:20px;
  box-shadow: 1px 3px 5px #777;
}
blockquote:before{
  position:absolute;
  left:45%;
  top:-24px;
  background-color:#FFFFFF;
  color:#808080;
  border:2px solid #bef5f7;
  box-sizing:border-box;
  font-family:'FontAwesome';
  content:'\f10e';
  padding-top:12px;
  text-align:center;
  width:48px;
  height:48px;
  font-size:20px;
  border-radius:50%;
}
blockquote p {
  color:#555;
  text-align: center;
  font-style: italic;
}
blockquote cite {
  display: block;
  border-top:1px solid #808080;
  padding-top:10px;
  font-size: 0.8rem;
  text-align:center;
  font-style: italic;
  color: #777;
}

画像付き

人物の発言を引用してる場合などによくあるパターン。シンプルに画像を上に配置しているだけ。
*HTMLの追記あり

HTML/CSS

HTML

<div class="blockquote-div">
<img src="test.jpg">
</div>
<blockquote>
<p>引用デザイン10</p>
<cite>引用元</cite>
</blockquote>

CSS

blockquote {
  position: relative;
  padding: 10px 20px;
  box-sizing: border-box;
  font-style: italic;
  color: #333;
}
blockquote:before{
  display: inline-block;
  position: absolute;
  top: 0px;
  left: 10px;
  content: "\f10d";
  font-family: FontAwesome;
  color: #eee;
  font-size: 40px;
  line-height: 1;
  font-weight: 900;
}
blockquote::after{
  display: inline-block;
  position: absolute;
  bottom: 0px;
  right: 10px;
  content: "\f10e";
  font-family: FontAwesome;
  color: #eee;
  font-size: 40px;
  line-height: 1;
  font-weight: 900;
}
blockquote p {
  position: relative;
  padding: 0;
  line-height: 1.7;
}
blockquote cite {
  position: relative;
  z-index: 100;
  display: block;
  text-align: right;
  color: #999;
  font-size: 0.9em;
}
.blockquote-div {
  text-align: center;
  border-top: solid #aaa 2px;
  border-bottom: solid #aaa 2px;
}
img {
  border-radius: 50%;
  width: 100px;
}