jQueryを用いたGoogle画像検索風表示について

Question

こんにちは。
現在以下のサイトを参考にGoogle画像検索風のアコーディオン表示を実装しようとしているのですが、２点うまくいかない点があります。
http://black-flag.net/jquery/20130918-4799.html

１点目は画像のサイズが変えられないことです。
CSSで.listCover .listItem imgのwidthを変更しても変わりません。

２点目は画像の左上に謎の黒い点が入ることです。
おそらくli要素であることによるものだと思うのですが、list-style-type:none;を指定しても消すことができませんでした。

http://hit-tsumami.com/writers/
こちらのページになります。

宜しくお願い致します。

Answer 1

おそらく、ブログに元から入っているCSS（WordPressのテーマ）のせいだと思います。

１点目の画像サイズについては、
.entry-content img が max-width: 100%;となっていますので、
.listItem imgに直接classをつけて指定するといいかもしれません。

２点目の黒い点については、
.entry-content ul liのbefore要素にスタイル指定されているため、

.entry-content ul li:before {
    display:none;
}

これで打ち消せると思います。

---

*追記・修正です。

すみません。
imgにclass追加より、そのimgが入っているliの横幅を変更したほうが良いですね。
jQueryのスクリプトの listBaseWidth の値を変えるとできると思います。

Comments

[hiro5797]

２点目についてはそちらで解決できました！ありがとうございます。
ただ１点目についてはクラスを直接指定してもダメでした。。。

[hiro5797]

listBaseWidthの変更でできました！！ありがとうございます。