公開日:2017年2月7日火曜日

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



スポンサーリンク






0 件のコメント :

コメントを投稿