Bloggerの引用のデザインをかっこよく!

さっきあげた記事を見返してみたら、引用したところがわかりにくかったので、はっきりを引用とわかるデザインにしてみました。

• • • どうするの?
    • 参考サイト

どうするの?

CSSを使ったブロックデザインのサイトはほんとにたくさんありました。でも白地のサイト用のデザインは意外と少なく、探し出すところから結構苦戦しました。そんな苦労の挙句、たどり着いたのがここのページ。かなり自分のブログサイトに合いそうです。

デザインを調整した結果、下記CSSを追記しました。

/* blockquote style 
----------------------------------------------- */
blockquote {
 position: relative;
 padding: 1.4em 4em 0.5em 4em;
 font-size: .9em;
 border: 1px solid #CCC;
 border-radius: 4px;
 background: #FFF;
 box-shadow: 0px 1px 3px rgba(0,0,0,.2);
}
blockquote:before,
blockquote:after {
 position: absolute;
 font-family: 'sans-serif';
 font-size: 4em;
 opacity: .5;
}
blockquote:before {
 left: 20px;
 content: '"';
}
blockquote:after{
 bottom: 0px;
 right: 20px;
 content: '"';
}

効果はこんな感じです。

参考サイト

変わらぬ感謝を。

• blockquoteタグにCSSだけで引用符つけたりオシャレにしたい (2016-04-26)
  まさにぴったりでした! ありがとうございます! でもBloggerだとcssのcontentに左クォートと右クォートを指定しても、htmlエンティティになってしまって表示できないんです… だれか、表示させる方法、知りませんか?