引用、リストまわりのデザイン変更

引用やリストのタグを使ってもちょっとインデントされたりマージンが確保されたりする程度で
視覚的に気付きにくいので変更します。
本ブログの目的は技術的なモノの自分用のメモなのでその辺がわかりやすくないとあとで見直したりしにくい。

引用(blockquote)

番号付リスト(ol)

意識的にblockquoteとolしか使わないようにしているのでこの2つに色をつけます。
両方とも同じ色、線幅にするので共通のものを先に定義。
marginも同じなのでここで定義。

div.post-body blockquote,
div.post-body ol
{
border: 1px dotted #741B47;
background-color: #EAD1DC;
margin:0em 3.5em;
}

paddingは、olは数字ではなくて本文の場所がpaddingの対象になってて微妙に違うので別々に。

数字がない引用はそのまま定義。

div.post-body blockquote
{
padding:0.5em 1.5em;
}

数字の部分を考慮するとだいたい1.5文字分なので引用より+1.5emに。

div.post-body ol
{
padding:0.5em 3em;
}

引用(blockquote)

番号付リスト(ol)

コメント