先日の記事で、 zenback の JavaScript コードを貼った箇所より後ろに記述しないとスタイルの変更ができないと書きました。
で、気になったのでちょっと調べてみたら案の定、zenback の JavaScript コードのあとにスタイルシートを読み込んでおりました。（ jQuery も読み込んでいたのね… ）
それじゃぁ、いくらブログパーツのid／class構造とcssについてを参考にして、<head> 内に <link> タグで読み込ませてもダメですよね。
それと、zenback の『関連リンク』にある zenback を貼っているサイトの半分くらいが、zenback ニュースの表示がおかしい。
どこかというと zenback の『関連リンク』と『Twitter』に挟まれた緑色の矢印がグルッとひと回りしている部分です。
zenback のロゴと『NEW』のアイコンが重なっているサイトがあると思います。
当サイトもそうでした。
もちろん、本家のzenbackブログでは、ロゴとアイコンは重なっていない。
これも気になったので調べてみたら、おそらく表示のおかしいサイトは、ブラウザのスタイルをリセットするスタイルシートを使っているのではないかと…
リセット CSS と呼ばれているスタイルシートです。
そこで、
[css]
dl {
margin: 0;
}
[/css]
というようにしているとおかしくなるのではないでしょうか？
上記のブログパーツのid／class構造とcssについてを見ると該当部分の dl にはスタイルを設定していないようです。
dt と dd は設定してあるのにね。
当サイトでもリセットしておりましたので、
[css]
dl {
margin: 10px 0;
}
[/css]
と記述すると zenback のロゴと『NEW』アイコンにアキができました。
だからといって、すべてリセットCSS が原因だとは言い切れないでしょうが、気になる方はお試しあれ。
でも、リセット CSS を変更したら他の部分に影響があるかも知れないので、慎重にね。
シックス・アパートさん、できたら『 .zenback #zenback-news dl 』にスタイルを設定していただけたらありがたい。
と、いうわけでちょっと気になることがひとつ解決。 😀
でも、根本的な解決になっているのだろうか…
