Blogger css 引用符　画像なし

テンプレートを変えた際に引用符などが変わりましたが、基本的なやり方は変わっていないと思います。

2015年9月16日大幅に変更

参考URL http://o-ands.net/blockquote-css-design-temple/

blockquote{
background-color:#f9f9f9;
border-left: 10px solid #ccc;
margin: 1.5em 10px;
padding:3em 1em;
position:relative;
}
blockquote:before{
content:"\201C";
font-size:600%;
line-height:1em;
font-family:"ＭＳ Ｐゴシック",sans-serif;
color:#999;
position:absolute;
left:0;
top:0;
}
blockquote:after{
content:"\201D";
font-size:600%;
line-height:0em;
font-family:"ＭＳ Ｐゴシック",sans-serif;
color:#999;
position:absolute;
right:0;
bottom:0;
}

画像いる・いらない

引用符の画像が必要な場合と、必要ない場合があるらしい。

著作権がない引用符の画像がうまく見つけられなかったので、今回は画像なしでやってみました。

うまく表示されないとき

「Blogger 引用符」などで検索していろいろやってみたが、画像なしの場合うまく表示されない。

※ 引き続き調べたところ。このサイトhttps://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/のcssでうまく表示されるよう。

※左のラインと背景色、margin、padding:の値のみ参考にしました。