photo credit: World of Good via photopin cc前回、HTMLやCSSコードを記述する時に使う装飾を、divタグの.codeクラスに指定してデザインしてみました。
そこで今回は、意外と利用頻度が高いblockquoteタグの装飾を変更したいと思います。
どんなデザインにするか
blockquoteタグは、Seesaaブログのテンプレート”シンプルホワイト”のCSS内に設定がありました。
デフォルト設定のままだと、この様な表示です。
blockquote {
margin:10px;
border-left:solid 1px #333;
padding:5px;
color:#333;
width:auto;
}CSSの記述では、この様になっています。
このままでは、イマイチなのでかっこ良いデザインに装飾してみます。
こちらのサイトを参考にさせていただきました。
line-height:0em; ...
デザインも紹介されていた引用符付きのものにしました。
ときどき見かけるデザインで、シンプルでありながら引用部分が分かりやすく、以前から気になっていました。
CSSコードの作成
完成したものが、こちらです。
Hello World!
とか何とか言ってみたり・・・
コードは以下の通り。
/* エントリー本文 */
.text{
font-size: 90%;
color: #333S;
padding-left:10px;
padding-top:5px;
padding-right:15px;
margin-top:5px;
line-height:160%;
}
.text a{
color:#006A6A;
}
blockquote{
background-color: #CBE1D0;
padding: 1.5em 1em 1.5em;
position: relative;
border: 3px solid #DAE1CB;
} ・・・ここを変更
blockquote:before{
content: "“";
font-size: 300%;
line-height: 1em;
font-family: "ＭＳ Ｐゴシック",sans-serif;
color: #74A681;
position: absolute;
left: 0;
top: 0;
}
blockquote:after{
content: "”";
font-size: 300%;
line-height: 0em;
font-family: "ＭＳ Ｐゴシック",sans-serif;
color: #74A681;
position: absolute;
right: 0;
bottom: 0; ・・・ここを追加
}色とサイズの調整をしただけで、基本的にはそのまま使わせて頂いています。
”em”という単位が初めてで、最初は意味が分からなかったのですが、”font-size”で指定した大きさを”1em”として計算するモノのようです。
こちらのサイトで詳しく解説されていました。
まとめ
勉強不足でイマイチ狙い通りにはなっていません。
margin指定してないのに何故か左右が開いていたり、サイズの調整も何故かpx指定では上手くいかなかったりします。
原因がわからないから、解決法にたどり着けないでいます。
既存のテンプレートを変更しているから、原因究明にはテンプレートに記述してある内容が全て理解できるようにならないといけないんでしょうね・・・
思い通りのデザインにしたいなら、もっと勉強して自作ののCSSで運用できるくらいにならないと。
