画像配置

図をパラグラフ右(左)に配置
図のみ表示

sample image Worepressに定義してあるクラスalignleft、alignrightを使用すれば、文字の回り込みも自動的に処理してくれます。表示例では原画のサイズは320×240ですが、imgタグ内で「width=”200″ height=”auto”を」指定して縮小しています。説明文が短く次のタイトル部と画像が重なるときや、文の回り込みを止めたいときにはfloatをclearする必要があります。回り込みを停止したい場所に<div class=”clear”></div>を挿入してください。

	<img class="alignright size-medium" src="http://robotcare.jp/wp-content/uploads/2017/04/sample320.png" alt="sample image" width="200" height="240">
キャプションを図の下につける
fig1

Fig.1 図の左よせ例
 本例では、画像とキャプション文を含むdiv要素にクラスalignleftを使用しています。画像サイズはimg要素にクラスsize-fullを適用し元々の画像サイズで表示しています。
	<div class="alignleft" style="text-align:center">
 <img class="size-full" src="http://robotcare.jp/wp-content/uploads/2017/04/sample320.png" alt="fig1"></br>
 <b>Fig.1 図の左よせ例</b></div>
<div>
図を縦に並べて片寄せ

fig1
fig1
 図が一つの場合と同じ指定を繰り返せば良い。

画像とキャプションを中央に配置

 比較的大きな画像を一枚だけ中央に配置したい場合の方法です。

fig1
図1 幅は表示領域幅の50%に指定した場合
	<div class="mb30" style="text-align:center; margin-left:auto; margin-right:auto;">
 <img src="http://robotcare.jp/wp-content/uploads/2017/04/sample320.png" width="50%" height="auto" alt="fig1">
 <b>図1 幅は表示領域幅の50%に指定した場合</b>
</div>
複数の画像を水平に並べて表示

 種々の方法が考えられますが、ここでは画像位置の上揃え、下揃えなどの調整が容易と思われるtabelタグを利用する方法を示します。

Fig1
Fig.1
Fig2
Fig.2
	<table class="note">
 <tr style="text-align:center;">
  <td width="4%"></td>
  <td>
   <img src="http://robotcare.jp/wp-content/uploads/2017/04/sample240.png" alt="Fig1" width="200px" height="auto" />
   </br><b>Fig.1</b></td>
  <td style="vertical-align:top;">
   <img src="http://robotcare.jp/wp-content/uploads/2017/04/sample320.png" alt="Fig2" width="300px" height="auto" />
   </br><b>Fig.2</b></td>
  <td width="4%"></td>
 </tr>
</table>

tableのクラスnoteは枠線を消すために既存クラスを利用したもの。画像の両端の<td width=”4%”></td>は画像間隔の調整用です。

galleryの利用

 Wordpressに備わっているギャラリー機能を利用して簡単に画像一覧を表示できます。いくつか表示オプションがありますが、きめ細かな指定はできません。スナップ写真等を機械的に表示すれば良い場合などに使えます。

	[gallery size="medium" captiontag="p" ids="5849,5885"]
	[gallery size="thumbnail" captiontag="p" ids="5849,5885"]