こんにちは。ブログ拝見いたしました。
「うまく反映するもの、しないものがでてきます。」とのことですが、全てアイキャッチは表示されているように見えます。どの状態がうまく反映していて、どの状態が反映されていないと考えてらっしゃるのか、教えて頂けますか？
回り込みさせたい、という意味では？
まず、アイキャッチが300×200に固定されているようですが、CSSで.excerpt imgの幅は40％になってます。親(祖先)要素に対しての40%であり、この場合は.containerのmax-widthが1000pxなので最大でその65%である650pxが.contentsの幅、更にその40％がアイキャッチのサイズになっているのが現状です。
アイキャッチにはfloat:leftが設定されているため、回り込みが効きます。
一方、本文を覆う要素はサイズが指定されていません。
なら本文に60％つければいいじゃないか、と思いきやアイキャッチには30pxのマージンがあるためもう少し工夫しなきゃいけなくなるのです…
また、コンテナが次のようになってます
現状のTree:
div.excerpt
|p-img
|p-抜粋
|p-More button
このままwidthを指定しても、回り込みがおかしくなるかと思われます。
理想の例１：
div.excerpt
|div.thumb
|-img.thumbnail
|div.content
|-p
|-p more
あとは適当にCSSを当てる感じで…
ちなみに日本語だとうまく回り込みできてるのは日本語のような単語間のスペースがない言語では折り返しがどこでも行われるのに対し、英語のような言語では単語間でのみおりかえされるようになってるから、でしょうね。
excerptはWordpressでは単語数で(multibyte patchを当てているとも字数で)トリムされます。そのためか…で終わってますが、試しにこれを倍ぐらいにのばしてみるとどうなるでしょうか。
コンテンツエリアからはみ出ますね。
デフォルトでは単語間以外では折り返さないため、はみ出た部分が見えなくなりました。
word-wrap: break-word;
や
word-break: break-all;
のようなCSSを当てると、最大幅(この場合は.contentsで指定されている幅)で折り返します。
このCSSを当ててやれば折り返せるのではと思いきや、もちろん幅が指定されていないものはこちらが思うような折り返しはしてくれません。
参考になるテーマがあったと思うけど忘れてしまった…
