URA.hetarena.comAmazon アフィリエイト (商品リンクイメージ版) を複数並べる時の話ね。WPtouch フリー版ならば BR タグの件を対処すれば横に並んだのだけど、WPtouch Pro だとそれでも縦に並んでしまう。Classic の子テーマを作ってカスタマイズしているんだけど、調べてみると iphone/style.css に以下の記述がある。
.post object, .post embed, .post video, .post iframe, .evp-video-wrap { width: 100% !important;
結論から言うとここの「.post iframe,」を削除して対処した。 この「!important」というのはスタイルを優先させるためのキーワードで、これがあるといくら Amazon のコードに「style="width:120px;height:240px;"」とか書いてあっても「width: 100%」が優先されてしまう。 ならばと、子テーマのスタイルシートに下の様に書いてみたのだけれど、今度は何故か幅 300px になってしまう。
.content iframe { width: auto !important; }
「width: 120px !important」じゃないとうまくいかなそう。もう面倒くさくなったので親スタイルを直接いじって「.post iframe,」を削除。だったら子テーマでなくコピーテーマをカスタマイズすべきだったとも思ったけどもういいことにする。 !important は邪悪ってことだ。 追記： 2011.10.26 にリリースされた WPtouch Pro 2.4 だとこのような記述はなくなっていて、手を入れる必要はなし。