Bloggerで引用タグをカスタマイズ


 引用タグ(blockquote)のCSSコードとサンプルを掲載しています。

引用タグコード


blockquote {
background-color:#EEEEEE;
position: relative;
margin: 2em 0;
padding: 3em;
border: 1px solid #CCC;
border-radius: 6px;
}

blockquote:before,
blockquote:after{
font-family:"MS Pゴシック",sans-serif;
color:#A9A9A9;
position: absolute;
font-size: 4em;
}

blockquote:before{
font-size:600%;
line-height:1.2em;
position:absolute;
left:0;
top:0;
content: '\201C';
}

blockquote:after{
font-size:600%;
line-height:0em;
position:absolute;
right:0;
bottom:0;
bottom: 0px;
right: 0px;
content: '\201D';
}

@media only screen and (max-width: 780px) {
blockquote {
padding: 3em 0.5em;
}
}


 上記のCSSを、既存のblockquoteに上書きしてください。

 上書きするべきコードが見つからない場合は、]]></b:skin>の上にペーストしてください。

サンプル

これはサンプルです。

 上下に引用符がつき、全体に余白を作っています。スマホだと左右の余白を少なめにして、より見やすく設定しています。デザインもシンプルかつ分かりやすい見た目にしました。

参考文献


blockquoteタグをCSSだけで格好良いデザインにする【画像不要】 | おーとえすとさいと
↑の項目「上左と下右に引用符」のをカスタマイズしました。

 BloggerではCSSのcontent属性に、普通の文字列を使うことはできません。数値文字参照でないといけないので、カスタマイズする時は注意してください。


この記事を書いた人

運営者:クロスグリ


 小説家志望の元ライター。
 プロの小説家になるべく、日々勉強しながらサイト運営しています。
 作品の下読み依頼や、個別相談(創作カウンセリング)等も受け付けています。
 気になったらTwitterフォローお願い致します。

このサイトについて 欲しいものリスト


スポンサーリンク

引用タグ(blockquote)のCSSコードとサンプルを掲載しています。

コメントを投稿

[disqus][facebook]

Author Name

{picture#https://4.bp.blogspot.com/-1zLucze5Byg/WA1R7mlH4hI/AAAAAAAAAYU/2gibmrPA7AITohNOUcfZi0ZYmNEt9UM1gCPcBGAYYCw/s320/S_4860987874792.jpg} YOUR_PROFILE_DESCRIPTION {twitter#https://twitter.com/crosgre}

連絡フォーム

名前

メール *

メッセージ *

© 2016 Project "Crosgre" Self employed. Powered by Blogger.