画像のサイズと配置の調整法

投稿日: 2008年8月3日 | カテゴリ:『ワードプレス』>プログラムの開発と改良

WordPressは、2.6にアップグレードされ、画像のアップロードの方法も強化されましたが、画像のサイズと配置の調整には未だ確実性がありません。そこで画像のサイズと配置をHTML方式で確実に設定する方法を紹介しておきます。

1. 画像サイズの調整

画像をアップロードし、記事に挿入するときの画像の調整については「Wordpress 2.5.1 画像アップロードの改善」を参照してください。
ここでは、挿入した画像のサイズを手動で調整する方法を紹介します。
挿入された画像のHTMLスクリプト(中サイズ)は次のようになっています。

<a href="http://hsuzuki.ddo.jp/weblog/wp-content/uploads/2008/05/kappa_s.jpg">
<img src="http://hsuzuki.ddo.jp/weblog/wp-content/uploads/2008/05/kappa_s.jpg" alt="" title="kappa_s" width="400" height="280" class="alignnone size-medium wp-image-94" /></a>

実際の画像は以下のようになります。

これを記事ウィンドウの横幅いっぱいに拡大するには、以下のように書き換えます。

<a href="http://hsuzuki.ddo.jp/weblog/wp-content/uploads/2008/05/kappa_s.jpg">
<img src="http://hsuzuki.ddo.jp/weblog/wp-content/uploads/2008/05/kappa_s.jpg" alt=""  title="kappa_s" width="100%"  /></a>

class="alignnone size-medium wp-image-94" の部分を削除し、widthを "100%" に書き換えます。このようにすると画像のサイズは、次のようにウィンドウの幅100%に拡大されて表示されます。

パーセンテージを調整すれば自由に画像の大きさを変えることができます。このサイズ調整の利点は、①画像の縦横比を気にしなくてすむこと、②ウィンドウの大きさに応じて相対的にサイズが調整できることです。サムネールは固定サイズで挿入するのでWordpressの設定をそのまま踏襲したほうが良いでしょうが、それ以上の画像サイズの調整は、このほうがより確実に調整できます。

2. 画像の配置の調整

画像の挿入の際に配置を中央に指定した場合のスクリプトは以下のようになります。画像の大きさはサムネールで取り込んであります。

<a href="http://hsuzuki.ddo.jp/weblog/wp-content/uploads/2008/05/kappa_s.jpg">
<img src="http://hsuzuki.ddo.jp/weblog/wp-content/uploads/2008/05/kappa_s.jpg" alt=""  title="kappa_s" width="142" height="100" class="aligncenter size-thumbnail wp-image-94" /></a>

実際の表示は次のようになります。class= ="aligncenter…. "の部分が中央指定のスクリプトです。

[追記](2017年4月13日)
上記のスクリプトを挿入しても実際には効力を発揮しない場合があります。その原因は、使用しているテーマのstyle.cssにこの定義がないからです。この記事を書いたのは古いテーマを使用していた時(当時のテーマには、class= ="aligncenter…. " の適当な定義が記述されていませんでした)なので効果を発揮しませんでした。現在のテーマ(Wordpress公式テーマ=twenty-eleven)には定義されていますので上部画像のようにセンターに位置しているはずです。

中央にそろえるもう一つの方法を次に紹介しておきます。classの部分を削除し、段落用のHTMLタグでイメージの部分を囲んでやります。

<div align="center">
<a href="http://hsuzuki.ddo.jp/weblog/wp-content/uploads/2008/05/kappa_s.jpg">
<img src="http://hsuzuki.ddo.jp/weblog/wp-content/uploads/2008/05/kappa_s.jpg" alt=""  title="kappa_s" width="142" height="100"  /></a>
</div>

実際には次のように表示されます。center を right に変えれば右寄せ、left に変えれば左寄せになります。

文章を回り込ませる場合には以下のように、align="left" を加えてやります。次の例は、図を左寄せにして文章を右に配置するタグです。hspaceは、図と文字列の間の横方向のスペースをピクセルで指定します。最後の<br clear="left">は、回り込みを終了させるタグです。回り込ませる文章を限定する場合には必ず挿入してください(文章を引き続き下部に回りこませたい場合には不必要)。

<a href="http://hsuzuki.ddo.jp/weblog/wp-content/uploads/2008/05/kappa_s.jpg">
<img src="http://hsuzuki.ddo.jp/weblog/wp-content/uploads/2008/05/kappa_s.jpg" alt=""  title="kappa_s" width="142" height="100" align="left" hspace="10" /></a>
<div style="font-size:14px;line-height:1.6em">この写真は、上高地の河童橋と穂高岳の写真です。左のピークが奥穂高岳、右のピークが前穂高岳、その間の稜線は吊尾根と呼ばれています。1995年の9月に撮影したものです。</div>
<br clear="left">

この写真は、上高地の河童橋と穂高岳の写真です。左のピークが奥穂高岳、右のピークが前穂高岳、その間の稜線は吊尾根と呼ばれています。1995年の9月に撮影したものです。


3. サムネールを3列に配置する方法

次にサムネールを3列に配置しそれぞれにコメントを加える方法を紹介します。
まず、3種類の画像のサムネールを文章に挿入します。挿入したスクリプトは以下のようになります。

<a href="http://hsuzuki.ddo.jp/weblog/wp-content/uploads/ref_turugi.jpg"><img src="http://hsuzuki.ddo.jp/weblog/wp-content/uploads/ref_turugi301.thumbnail.jpg"
 alt="ref_turugi301.jpg" /></a>
<a href="http://hsuzuki.ddo.jp/weblog/wp-content/uploads/sekkei.jpg"><img src="http://hsuzuki.ddo.jp/weblog/wp-content/uploads/sekkei301.thumbnail.jpg"
 alt="sekkei301.jpg" /></a>
<a href="http://hsuzuki.ddo.jp/weblog/wp-content/uploads/senninyu.jpg"><img src="http://hsuzuki.ddo.jp/weblog/wp-content/uploads/senninyu301.thumbnail.jpg"
 alt="senninyu301.jpg" /></a>

実際には次のように表示されます。
ref_turugi301.jpgsekkei301.jpgsenninyu301.jpg

これを適当な間隔に配置し、コメントを付けるには表形式を使用します。

<table>
<tr>
<td width="150">
<div style="line-height:1.5em; font-size:10pt;color:#0000ff">仙人池に映る裏剣</div>
</td>
<td width="150">
<div style="line-height:1.5em; font-size:10pt;color:#0000ff">阿曽原への途中の
スノーブリッジ</div>
</td>
<td width="150">
<div style="line-height:1.5em; font-size:10pt;color:#0000ff">仙人湯</div>
</td>
</tr>
<tr>
<td width="150">
<a target="_self" href="http://hsuzuki.ddo.jp/weblog/wp-content/uploads/ref_turugi.jpg">
<img src="http://hsuzuki.ddo.jp/weblog/wp-content/uploads/ref_turugi301.thumbnail.jpg" /></a>
</td>
<td width="150">
<a target="_self" href="http://hsuzuki.ddo.jp/weblog/wp-content/uploads/sekkei.jpg">
<img src="http://hsuzuki.ddo.jp/weblog/wp-content/uploads/sekkei301.thumbnail.jpg" /></a>
</td>
<td width="150">
<a target="_self" href="http://hsuzuki.ddo.jp/weblog/wp-content/uploads/senninyu.jpg">
<img src="http://hsuzuki.ddo.jp/weblog/wp-content/uploads/senninyu301.thumbnail.jpg" /></a>
</td>
</tr>
</table>

実際には以下のように表示されます。

仙人池に映る裏剣
阿曽原への途中の
スノーブリッジ
仙人湯
ref_turugi301.jpg sekkei301.jpg senninyu301.jpg

[追記](2017年4月13日)
上記の図に、罫線が入ってしまう場合があります。これは、使用中のテーマのstyle.cssファイルにおいてデフォルトで表に罫線を入れる設定がなされているからです。
この罫線を消去するには、①style.cssにおいてデフォルトで罫線を入れる設定を無効にするか、②以下のように罫線を消すcssコマンド(style="border:none;")
をtableタグとtdタグ部分に挿入してやります。以下のスクリプトを参考にしてください。

<table style="border:none;">
<tr>
<td style="border:none;" width="150"><div style="line-height:1.5em; font-size:10pt;color:#0000ff;">仙人池に映る裏剣</div></td>
<td style="border:none;" width="150"><div style="line-height:1.5em; font-size:10pt;color:#0000ff;padding-bottom:5px;">阿曽原への途中の
スノーブリッジ</div></td>
<td style="border:none;" width="150"><div style="line-height:1.5em; font-size:10pt;color:#0000ff;">仙人湯</div></td>
</tr>
<tr>
<td style="border:none;" width="150"><a target="_self" href="http://hsuzuki.ddo.jp/weblog/wp-content/mydata/uratsurugi.jpg"><img src="http://hsuzuki.ddo.jp/weblog/wp-content/uploads/ref_turugi301.thumbnail.jpg" alt="ref_turugi301.jpg" /></a></td>
<td style="border:none;" width="150"><a target="_self" href="http://hsuzuki.ddo.jp/weblog/wp-content/uploads/sekkei.jpg"><img src="http://hsuzuki.ddo.jp/weblog/wp-content/uploads/sekkei301.thumbnail.jpg" alt="sekkei301.jpg" /></a></td>
<td style="border:none;" width="150"><a target="_self" href="http://hsuzuki.ddo.jp/weblog/wp-content/uploads/senninyu.jpg"><img src="http://hsuzuki.ddo.jp/weblog/wp-content/uploads/senninyu301.thumbnail.jpg" alt="senninyu301.jpg" /></a></td>
</tr>
</table>

次の画像のように罫線は消えているはずです。

仙人池に映る裏剣
阿曽原への途中の
スノーブリッジ
仙人湯
ref_turugi301.jpg sekkei301.jpg senninyu301.jpg


画像のサイズと配置の調整法” への1件のコメント

  1. 画像の配置が判りやすくて助かりました。
    また、参考にさせて頂きます。

    ありがとうございました。

コメントを残す




空欄に計算式を満たす数値を記入してください(必須)