スポンサーリンク

2014年7月9日水曜日

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点が解決できない…。

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


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


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


追記)1つ解決

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でも「・」が表示されなくなりました。


※あと1つ…。
スポンサーリンク


スポンサーリンク

この記事が気に入ったらいいね!
お願いします(#^.^#)

↓↓↓

最新情報をお届けします

言えないことはTwitterで!!


こんな記事も書いてます



関連性の高い記事


0 コメント:

コメントを投稿

次の投稿 前の投稿 ホーム
Related Posts Plugin for WordPress, Blogger...