見やすい！引用ボックスのデザイン3選

こんにちは、ゆうが(@yuuuugablog)です。
今回はブログで使える引用ボックスのデザインを紹介していきます。

[imgfuki src=”https://cyberprogress.net/wp-content/uploads/2020/12/image-2-1-5.png” alt=”【コピペでOK】引用ボックスのデザイン【CSS】”]引用ボックスは文章を引用する際に見やすくしてくれるもので、デザイン次第でブログの見た目が変わります。
[/imgfuki]

引用をすることでサイトやブログの権威性を高められるので信頼のあるサイトだと読者に認識されますよ。
また、こちら伝わるデザイン｜研究発表のユニバーサルデザイン にもある通り、配色や余白にもこだわって見やすくしてあります。なので「3つかよ！すくな！」と思うかもですが、みやすさにこだわったらこれだけになりました。許して下さい。。。

[box class=”box30″ title=”本記事のもくじ”]

1. 引用する際のHTML
2. シンプルな引用ボックスデザイン
3. 大きめの引用符が背景にあるデザイン
4. 左に大きい引用符があるデザイン

[/box]

この記事を書いた人

滝田裕雅

ゆうがブログ運営者・ブロガー

「正しい知識を正しく届ける。」を理念にサイトを運営しています。その分野の専門家の記事や論文、私の実体験をもとに情報に誤りのない記事を作成しています。プロフィールの詳細＆記事編集ポリシーはこちら

引用する際のHTML

まず、引用する際のHTMLコードを紹介します。

[codebox title=”HTML”]

<blockquote>
<p>引用文</p>
<cite><a href="引用先のURL">引用元のタイトル</a></cite>
</blockquote>

[/codebox]
上記のコードを使うことで、引用することができます。WordPressの場合このまま貼ればOKです。

FontAwesomeの準備もお忘れなく

[imgfuki src=”https://cyberprogress.net/wp-content/uploads/2020/12/image-4-1.png” alt=”FontAwesomeの準備もお忘れなく！”]
あと、今回紹介する引用ボックスのデザインはFontAwesomeというwebフォントを使用するのでそちらの準備もしておいてください。
[/imgfuki]

詳しいやり方はこちら【保存版】Font Awesomeの使い方：Webアイコンフォントを使おうが大変わかりやすいので参考にしてください。

[sanko href=”https://saruwakakun.com/html-css/basic/font-awesome” title=”【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう” site=”サルワカ | サルでも分かる図解説明マガジン”]

① シンプルな引用ボックスデザイン

[codebox title=”CSS”]

blockquote {
position: relative;
padding: 40px 20px 20px 20px;
background: #fff;
border: 3px solid #63acb7;
color: #777777;
}

blockquote:before {
font-family: "Font Awesome 5 Free";
content: "\f10d";
display: inline-block;
position: absolute;
top: 15px;
left: 15px;
color: #63acb7;
font-size: 28px;
font-weight: 900;
}

blockquote:after {
font-family: "Font Awesome 5 Free";
content: "\f10e";
display: inline-block;
position: absolute;
bottom: 15px;
right: 15px;
color: #63acb7;
font-size: 28px;
font-weight: 900;
}

blockquote p {
padding: 0;
margin: 20px;
font-size: 18px;
}

blockquote cite {
font-size: 13px;
text-align: left;
color: #888888;
font-style: italic;
}

[/codebox]

シンプルなデザインのため、どのブログやサイトにも馴染みます。また囲んであるので「引用」としてメリハリがあるのが特徴です。

② 大きめの引用符が背景にあるデザイン

[codebox title=”CSS”]

blockquote {
position: relative;
padding: 40px 20px 20px 20px;
background: #fff;
border-radius: 10px;
box-shadow: 0 3px 5px rgba(6, 5, 5, 0.14);
color: #777777;
background: #f5f5f5;
}

blockquote:before {
font-family: "Font Awesome 5 Free";
content: "\f10d";
display: inline-block;
font-style: italic;
position: absolute;
top: 18px;
left: 15px;
opacity: 0.5;
color: #63acb7;
font-size: 70px;
font-weight: 900;
}

blockquote:after {
font-family: "Font Awesome 5 Free";
content: "\f10e";
display: inline-block;
font-style: italic;
position: absolute;
bottom: 18px;
right: 25px;
color: #63acb7;
opacity: 0.5;
font-size: 70px;
font-weight: 900;
}

blockquote p {
position: relative;
padding: 0;
margin: 20px;
font-size: 18px;
}

blockquote cite {
font-size: 13px;
text-align: left;
color: #888888;
font-style: italic;
}

[/codebox]

マテリアルデザインで「ふわっ」と浮き出ているデザインです。優しい感じが特徴です。

③ 左に大きい引用符があるデザイン

[codebox title=”CSS”]

blockquote {
position: relative;
padding: 25px;
background: #fff;
border-radius: 10px;
border-left: solid 100px #fff;
box-shadow: 0 3px 5px #06050524;
color: #777777;
background: #f5f5f5;
}

blockquote:before {
font-family: "Font Awesome 5 Free";
content: "\f10d";
display: inline-block;
position: absolute;
top: 30px;
left: -84px;
color: #63acb7;
font-size: 70px;
font-weight: 900;
}

blockquote p {
position: relative;
padding: 0;
margin: 20px;
font-size: 18px;
}

blockquote cite {
font-size: 13px;
text-align: left;
color: #888888;
font-style: italic;
}

[/codebox]

引用符を大きくすることでハッキリと引用しているということを強調できます。そのためユーザーにとって見やすくなります。

当サイトでは引用ボックス以外にも、いろいろなデザインを紹介しているので気になった方は読んでみてください。