iPhone 研究室（iPadもね）

iPhone 用 WordPress アプリで投稿した画像にテキストを回り込ませる

WordPress for iPhone でブログ記事を投稿する際、画像の位置を上・中・下の好みの場所に調整する方法を前回紹介しましたが（iPhone用Wordpressアプリで画像の位置を調整1）、そのままではテキストが画像の上か下に表示されて、画像の左右どちらかに回り込むように表示することはできません。サイトのデザイン上、テキストを左右のどちらかに回り込ませたい場合があると思います。その場合、一カ所だけHTMLタグを書き換えます。

WordPress for iPhone で、投稿に含める画像を選択して下書き保存すると、下記のようなタグになっていると思います。

<p><a href=”http://〜.jpeg”><img src=”http://〜.jpeg” alt=”" width=”225″ height=”300″ class=”alignnone size-full wp-image-364″ /></a></p>

この中の、「alignnone」の部分を好みに合わせて書き換えます。

画像が左で、テキストを右側に回り込ませたい: alignleft
画像が右で、テキストを左側に回り込ませたい: alignright

これだけで、iPhone で記事を投稿する場合も、画像の左右にテキストを回り込ませることができるようになります。Wordpress for iPhone で画像の位置を調整する二つのチップスで、投稿記事のデザインがほぼ自由自在になりますので、iPhone だけでブログを運営することも難しくはありません。

使用しているテーマによっては、画像の下端部にテキストの1行目が表示されて、ほとんど回り込みにならない場合があります。その場合、事前準備としてサイトのデザインを司るテーマに含まれる、「style.scc」に下記の項目を追加します。

.alignleft {float: left; margin:0 10px 5px 0;}

.alignright {float: right; margin:0 0 5px 10px;}

margin の後ろの数字は、スペースで区切って 上 右 下 左 の空白になります。画像横の空白は、たいていは10pxくらいでちょうどいいだろうと思いますが、デザインや好みに合わせて調節します。最近のテーマの場合、ほとんどはあらかじめこの設定があると思いますので、この作業は不要だと思います。