【コピペでOK】引用ボックスのデザイン【CSS】

引用ボックスのデザイン

今回はブログで使える引用ボックスのデザインを紹介していきます。

引用ボックスは文章を引用する際に見やすくしてくれるもので、デザイン次第でブログの見た目が変わります。

それでは、さっそくいきましょう!

スポンサーリンク

引用する際のHTMLコード

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

<blockquote>
<p>引用文</p>
<cite>引用元タイトル</cite>
</blockquote>

上記のコードを使うことで、引用することができます。

[code_balloon position=”left” name=”ゆうが” text=”WordPressの場合このまま貼ればOKです!
” img=”https://yuuuugablog.com/wp-content/uploads/2020/11/yuga_Original-1.jpg”]

それでは、次に引用ボックスのデザインを紹介していきます。

スポンサーリンク

引用ボックスのデザイン

デザイン例とCSSコードのセットで紹介します。
※順次追加していきます。m(_ _)m

シンプルな引用ボックス

シンプルな引用ボックス

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;
}

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

大きめの引用符が背景に

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;
}

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

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

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;
}

それでは、今回は以上です!
記事が参考になれば幸いです。