blockquoteの装飾をCSSでデザインしてみた


photo credit: World of Good via photopin cc

前回、HTMLやCSSコードを記述する時に使う装飾を、divタグの.codeクラスに指定してデザインしてみました。

そこで今回は、意外と利用頻度が高いblockquoteタグの装飾を変更したいと思います。

どんなデザインにするか

blockquoteタグは、Seesaaブログのテンプレート”シンプルホワイト”のCSS内に設定がありました。

blockquote_before

デフォルト設定のままだと、この様な表示です。

blockquote {
margin:10px;
border-left:solid 1px #333;
padding:5px;
color:#333;
width:auto;
}

CSSの記述では、この様になっています。

このままでは、イマイチなのでかっこ良いデザインに装飾してみます。

こちらのサイトを参考にさせていただきました。

blockquoteタグをCSSだけで格好良いデザインにする【画像不要】 | おーとえすとさいと
line-height:0em; …

引用タグ(blockquote)をCSSのみで装飾する | 賢威カスタマイズ研究所

デザインも紹介されていた引用符付きのものにしました。

ときどき見かけるデザインで、シンプルでありながら引用部分が分かりやすく、以前から気になっていました。

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: "MS Pゴシック",sans-serif;
color: #74A681;
position: absolute;
left: 0;
top: 0;
}
blockquote:after{
content: "”";
font-size: 300%;
line-height: 0em;
font-family: "MS Pゴシック",sans-serif;
color: #74A681;
position: absolute;
right: 0;
bottom: 0;              ・・・ここを追加
}

色とサイズの調整をしただけで、基本的にはそのまま使わせて頂いています。

”em”という単位が初めてで、最初は意味が分からなかったのですが、”font-size”で指定した大きさを”1em”として計算するモノのようです。

em単位 – 値の単位と記述方法 – スタイルシート入門

こちらのサイトで詳しく解説されていました。

まとめ

勉強不足でイマイチ狙い通りにはなっていません。
margin指定してないのに何故か左右が開いていたり、サイズの調整も何故かpx指定では上手くいかなかったりします。

原因がわからないから、解決法にたどり着けないでいます。

既存のテンプレートを変更しているから、原因究明にはテンプレートに記述してある内容が全て理解できるようにならないといけないんでしょうね・・・

思い通りのデザインにしたいなら、もっと勉強して自作ののCSSで運用できるくらいにならないと。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする