Single Post
blockquoteをcssで魅力的にデザイン
ブログを掲載していると「引用文」などを記載する事があります。そんな時に役立つのがhtml5のblockquoteタグです。WordPressでは、挿入が簡単でブログ初心者のクライアント様でも使用できるので重宝しています。今回は、fontawesomeの引用符を使用しcssでオシャレにデザインしたblockquoteを紹介します。
基本となるHTML
[html]
<blockquote>
<p>ここに引用する文を書きます。ここに引用する文を書きます。ここに引用する文を書きます。ここに引用する文を書きます。ここに引用する文を書きます。</p>
</blockquote>
[/html]
デモ & CSS
ここに引用する文を書きます。ここに引用する文を書きます。ここに引用する文を書きます。ここに引用する文を書きます。ここに引用する文を書きます。
[css]
.blockquote {
position: relative;
padding: 30px 15px 8px 15px;
background: #efefef;
color: #555;
width: 500px;
margin: 60px auto;
}
.blockquote:before{
display: inline-block;
position: absolute;
top: 13px;
left: 15px;
vertical-align: middle;
content: "\f10d";
font-family: FontAwesome;
color: #009FB7;
font-size: 25px;
line-height: 1;
}
.blockquote p {
padding: 0;
margin: 20px 0 10px;
font-size: 15px;
line-height: 1.5;
}
[/css]
ここに引用する文を書きます。ここに引用する文を書きます。ここに引用する文を書きます。ここに引用する文を書きます。ここに引用する文を書きます。
[css]
.blockquote {
position: relative;
padding: 10px 15px 10px 60px;
background: #f5f5f5;
color: #555;
border-left: 4px solid #009FB7;
width: 500px;
margin: 60px auto;
}
.blockquote:before{
display: inline-block;
position: absolute;
top: 15px;
left: 15px;
vertical-align: middle;
content: "\f10d";
font-family: FontAwesome;
color: #009FB7;
font-size: 25px;
line-height: 1;
}
.blockquote p {
padding: 0;
margin: 20px 0 10px;
font-size: 15px;
line-height: 1.5;
}
[/css]
ここに引用する文を書きます。ここに引用する文を書きます。ここに引用する文を書きます。ここに引用する文を書きます。ここに引用する文を書きます。
[css]
.blockquote {
position: relative;
padding: 10px 15px 10px 50px;
border: solid 3px #333;
color: #555;
width: 500px;
margin: 60px auto;
}
.blockquote:before{
display: inline-block;
position: absolute;
padding: 5px;
top: 20px;
left: 15px;
vertical-align: middle;
content: "\f10d";
font-family: FontAwesome;
color: #fff;
font-size: 20px;
line-height: 1;
border-radius: 50%;
background: #FA8334;
}
.blockquote p {
padding: 0;
margin: 20px 0 10px;
font-size: 15px;
line-height: 1.5;
}
[/css]
ここに引用する文を書きます。ここに引用する文を書きます。ここに引用する文を書きます。ここに引用する文を書きます。ここに引用する文を書きます。
[css]
.blockquote {
position: relative;
padding: 10px 10px 10px 32px;
color: #555;
background: #efefef;
width: 500px;
margin: 60px auto;
}
.blockquote:before{
display: inline-block;
position: absolute;
top: 5px;
left: 5px;
vertical-align: middle;
content: "\f10d";
font-family: FontAwesome;
color: #ffffff;
font-size: 20px;
line-height: 1;
z-index: 2;
}
.blockquote:after{
position: absolute;
content: ”;
left: 0;
top: 0;
border-width: 0 0 50px 50px;
border-style: solid;
border-color: transparent #009FB7;
}
.blockquote p {
position: relative;
padding: 0;
margin: 20px 0 10px;
font-size: 15px;
line-height: 1.5;
}
[/css]
ここに引用する文を書きます。ここに引用する文を書きます。ここに引用する文を書きます。ここに引用する文を書きます。ここに引用する文を書きます。
[css]
.blockquote {
position: relative;
padding: 10px 20px;
color: #555;
background: #efefef;
width: 500px;
margin: 60px auto;
}
.blockquote:before{
display: inline-block;
position: absolute;
top: 5px;
left: 8px;
vertical-align: middle;
content: "\f10d";
font-family: FontAwesome;
color: #93D2FF;
font-size: 25px;
line-height: 1;
}
.blockquote:after{
display: inline-block;
position: absolute;
bottom: 8px;
right: 18px;
vertical-align: middle;
text-align: center;
content: "\f10e";
font-family: FontAwesome;
color: #93D2FF;
font-size: 25px;
line-height: 1;
}
.blockquote p {
position: relative;
padding: 0;
margin: 10px 0;
z-index: 3;
font-size: 15px;
line-height: 1.5;
}
[/css]
まとめ
今回は、引用符でFontAwesomeを使用しておりますが、各cssのcontent内を画像urlに置き換えれば画像素材を使用する事も可能です。blockquoteを使用する事で記事にメリハリを作る事ができユーザーが閲覧し易くなるという利点があります。
