表の中に文字と画像を併記する場合の不具合が発生する場合の改善方法

WORDPRESSの記事を、WINDOWS Live writerを使って下記ような表を投稿する場合

きょうは良い天気です。これはテストです。写真を右記の列に挿入した場合の不具合を調べます。 img_art03_1

 

これを投稿すると、下記のように文字が下に来て、写真が上になってしまいます。

20120527154305

 

これをWORDPRESSダッシュボードより、みてみると

HTMLでは

<p>WORDPRESSの記事を下記ような表を投稿する場合</p>  <table border=”1″ cellspacing=”0″ cellpadding=”2″ width=”400″><tbody>     <tr>       <td valign=”top” width=”200″>きょうは良い天気です。これはテストです。写真を右記の列に挿入した場合の不具合を調べます。</td>        <td valign=”top” width=”200″><a href=”http://dream-kobe.jp/sbn/ac/wp-content/uploads/2012/05/img_art03_1.jpg”><img style=”background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px” title=”img_art03_1″ border=”0″ alt=”img_art03_1″ src=”http://dream-kobe.jp/sbn/ac/wp-content/uploads/2012/05/img_art03_1_thumb.jpg” width=”234″ height=”177″ /></a></td>     </tr>   </tbody></table>  <p>&#160;</p>  <p>

 

となっています。

しばらくの間、悩んでいたのですが、昨日の講習会で、講師の方に質問しますと、黄色の部分が影響しているのではないかとのことでした。

上記の黄色のマーカー部分を削除し、緑色のマーカ部分を追加すればよいとのアドバイスを頂きました。

 

<p>WORDPRESSの記事を下記ような表を投稿する場合</p> <table border=”1″ cellspacing=”0″ cellpadding=”2″ width=”400″><tbody> <tr> <td width=”200″ style=”vertical-align:top;”>きょうは良い天気です。これはテストです。写真を右記の列に挿入した場合の不具合を調べます。</td> <td valign=”top” width=”200″><a href=”http://dream-kobe.jp/sbn/ac/wp-content/uploads/2012/05/img_art03_1.jpg”><img style=”background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px” title=”img_art03_1″ border=”0″ alt=”img_art03_1″ src=”http://dream-kobe.jp/sbn/ac/wp-content/uploads/2012/05/img_art03_1_thumb.jpg” width=”234″ height=”177″ /></a></td> </tr> </tbody></table> <p>&#160;</p> <p>

 

これにより、下記のようにうまく、文字と画像が収まりました。
20120527155805

 

WORD PRESSのテーマによっては、上記のような形にならず、うまく、文字と写真がそろって表示されるケースもありますが、Twenty Eleven や Twenty Tenではうまく表示されません。ダッシュボードの投稿のHTML画面より、上記の緑のマーカ部分を追加しないといけません。

Twenty Eleven や Twenty Tenの開発者側は、かかるような表の中に、文字と画像を併記するような場合の不具合を予め想定しないためと思われますが、よく使うやり方と思いますので、緑のマーカ部分を追加せず、すんなりと表示してほしいもの思いますが。。。。

コメントは受け付けていません。