今回はblockquoteを使った引用のデザインをおしゃれに表現したCSSデザインを10選紹介します。
HTMLとCSSをコピペするだけで反映されます。コピペした後に自分なりに編集してオリジナルのデザインにしてみて下さい。
使い方
- 基本形のHTMLをbodyの好きな箇所にコピペ
- headタグ内にFontawesomeのリンクを記述
- CSSをスタイルシートにコピペ
注意点
CSSをコピペして表示が崩れる部分がありましたら、blockquoteに任意のclassを振って記述して下さい。
引用の基礎知識と重要性に関してを先に知っておくとデザインを良くする意味が理解出来ます。
以下の記事で予習しときましょう。
引用の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をスタイルシートにコピペして下さい。
*サイトによっては微調整は必要になる場合もあります。
シンプルな引用
まずはシンプルでどんなサイトにも合う引用デザインです。これが基本形になります。
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;
}色を付けたバージョン
基本形に色を付けたバージョンです。
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;
}スマートなイメージ
引用符を横に移動させて、枠を斜めにしてスマートな印象に。
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;
}白抜き背景色あり
背景色を付けて引用符を白抜きにしたバージョン。
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のデフォルト風に。
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;
}引用符を背景に（色付き）
引用符を背景に入れて、背景色も入れたバージョン。
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;
}折り込みっぽく
引用符の入った付箋の様なものを折り込んでる風。
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;
}線と両端に引用符
線で区切り両端に引用符を置いたスタイル。
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;
}立体的
上部に引用符を置いて、さらに立体的に。
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
<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;
}
以上が「【コピペOK】おしゃれな引用デザイン10選！！」でした。
引用はブログ運用に置いて非常に大事な要素なのでデザインも多少は凝っても良いのでは無いでしょうか。
デザイン見本まとめ
他のデザイン見本もいくつか用意しています。合わせてどうぞ。
