Bloggerレスポンシブデザイン後CSSカスタマイズ備忘録

レスポンシブデザインに変更して、
使っていく内に、

詳細な部分が微妙に調整が必要となることに気づきます。

備忘録として、
とりあえず気づいた部分と、

その対処方法（CSS)を記述しておきたいと思います。

まず、

<ul>でのリスト表示ができない。

よって、
CSSに以下を追加。

div.section ul, div.section ul {
 margin:0.5em 1em 0.5em 50px;
 font-size:100%;
 line-height:130%;
}
ul li {list-style: disc}

それと、

<ol>でのリスト番号表示もできない。

よって、
CSSに以下を追加。

div.section ul, div.section ol {
 margin:0.5em 1em 0.5em 50px;
 font-size:100%;
 line-height:130%;
}
ol li {list-style: decimal}

※追記部分に修正。

他にも、

引用の表示幅などが投稿幅に目一杯になってしまう為、

以下をCSSを追加。

blockquote{position:relative;padding:20px 50px;margin-left: 30px;margin-right: 30px;min-height:20px;font-size: 90%;background:url(http://3.bp.blogspot.com/-px-RVucfs90/UWIfqe2zGMI/AAAAAAAAAD4/bkYfg_92M48/s1600/inyoleft.png) no-repeat 10px 10px #eee;}
blockquote:after{position:absolute;bottom:10px;right:10px;content:url(http://1.bp.blogspot.com/-fVn1Z8gHTC0/UWIfsU9eycI/AAAAAAAAAEA/-dNnFHLP1WI/s1600/inyorite.png);}

また、
<ul>でのリスト表示のCSSを追加したことにより、

ヘッダー下部のドロップダウンメニュー？部分に、

・が付与されるので、

対処として、
以下CSSを追加すれば、

#nav-wrap ul li {list-style: none;}

ヘッダー下部のプルダウン部分には
・が、
表示されなくなる。

※現在は「・」が表示されてもいいかなと元に戻してありますが…。

未解決問題

しかし、
困ったことに、以下2点が解決できない…。

１）
Popular post（人気記事）がなぜか10件でなく、
9件までしか表示されない。

２）
Chromeでは「・」は表示されないが、
IEでは「・」が表示されてしまう…。

※この対処法がわからない…。

追記）１つ解決

IEで「・」が表示されてしまう問題が解決しました。

<ol>リスト表示のCSSの記述がulとolが混じっていた為以下に修正しました。

div.section ol, div.section ol {
 margin:0.5em 1em 0.5em 50px;
 font-size:100%;
 line-height:130%;
}
ol li {list-style: decimal}

その後、

.PopularPosts .widget-content ul li {
list-style: none;}

をCSSに追加でIEでも「・」が表示されなくなりました。

※あと１つ…。