2017年2月1日水曜日

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: '"';
}

効果はこんな感じです。

参考サイト

変わらぬ感謝を。

0 件のコメント:
コメントを投稿

気づいたこと、不具合、ご意見など、コメント待ってます!