Warning: count(): Parameter must be an array or an object that implements Countable in /home/c2847790/public_html/noda-information.com/wp-includes/post-template.php on line 284

画像の配置

画像をいろいろな位置に配置してみよう。

ここでは、いろいろな位置に画像を配置する方法を解説します。

画像を中央寄せで表示してみよう。

記述例:<p style=”text-align: center;> <img class=”size-full wp-image-906 aligncenter” title=”画像配置 580×300″ src=”http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-580×300.jpg” alt=”画像配置 580×300″ width=”580″ height=”300″></p>

 

画像配置 580x300

画像を左寄せし、その周りに文章を書いてみよう。

記述例:<img class=”size-full wp-image-904 alignleft” title=”画像配置 150×150″ src=”http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-150×150.jpg” alt=”画像配置 150×150″ width=”150″ height=”150″>
このパラグラフの残り画像を左寄せしたとき、文章が150ピクセルの画像の周りを囲むようになるかどうか見るためのものです。
ご覧のとおり、画像の上・下・右にスペースが空いている事がわかると思います。テキストは画像にこっそりと忍びよってはいません、忍び寄ることは良くない事です。画像だって十分に呼吸ができるスペースが必要なのです。画像が文章にイライラさせられることなく役割を果たせるようにしてあげてください。次の文章では、テキストが画像の右から下へとシームレスに途切れることなく続いている事がわかりますね。これで完了です !

画像配置 150x150このパラグラフの残り画像を左寄せしたとき、文章が150ピクセルの画像の周りを囲むようになるかどうか見るためのものです。
ご覧のとおり、画像の上・下・右にスペースが空いている事がわかると思います。テキストは画像にこっそりと忍びよってはいません、忍び寄ることは良くない事です。画像だって十分に呼吸ができるスペースが必要なのです。画像が文章にイライラさせられることなく役割を果たせるようにしてあげてください。次の文章では、テキストが画像の右から下へとシームレスに途切れることなく続いている事がわかりますね。これで完了です !

とても大きな画像を表示してみよう。(この画像には配置の指定がありません)

下記の画像は1200ピクセルもありますが、コンテンツエリアからはみ出る事はなく収まっています。

記述例:<img class=”alignnone wp-image-907″ title=”画像配置 1200×400″ src=”http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-1200×4002.jpg” alt=”画像配置 1200×400″ width=”1200″ height=”400″>

画像配置 1200x400

画像を右寄せで表示してみよう。

記述例:<img class=”size-full wp-image-905 alignright” title=”画像配置 300×200″ src=”http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-300×200.jpg” alt=”画像配置 300×200″ width=”300″ height=”200″>

画像配置 300x200
今度は画像の右寄せに移りたいと思います。
左寄せの時と同様、画像の上、下、左に十分な余白があると思います。
そして、テキストが右寄せの画像の下に回り込んで、ちょうど良い具合に収まっているのが分かると思います。
ひきつづきちょうど良い具合にスペースが残されていて、すべてがきれいに表示されているはずです。

画像にキャプションをいれてみよう。

記述例:[caption id=”attachment_906″ align=”aligncenter” width=”580″]<img class=”size-full wp-image-906 ” title=”画像配置 580×300″ src=”http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-580×300.jpg” alt=”画像配置 580×300″ width=”580″ height=”300″>キャプション[/caption]
画像配置 580x300

キャプション

上記の画像は中央寄せになるはずです。おかしな表示になっていないか確認しましょう。

画像にキャプションをいれてみようその2(左寄せ画像)

記述例:[caption id=”attachment_904″ align=”alignleft” width=”150″]<img class=”size-full wp-image-904 ” title=”画像配置 150×150″ src=”http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-150×150.jpg” alt=”画像配置 150×150″ width=”150″ height=”150″>ちょっとしたキャプション[/caption]
画像配置 150x150

ちょっとしたキャプション

このパラグラフの残りの部分は、150×150 サイズの左寄せ画像の回り込みをテストするためのつなぎです。
ご覧の通り、画像の上・下・右にスペースが必要です。テキストが画像に近すぎないようにする必要があります。画像だって十分にスペースが必要なのです。次の文章では、テキストが画像の右から下へとシームレスに途切れることなく続いている事がわかりますね。これで完了です !

画像にキャプションをいれてみようその3(大きな画像)

記述例:[caption id=”attachment_907″ align=”alignnone” width=”1200″]<img class=” wp-image-907″ title=”画像配置 1200×400″ src=”http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-1200×4002.jpg” alt=”画像配置 1200×400″ width=”1200″ height=”400″>とても大きな画像のキャプション[/caption]
画像配置 1200x400

とても大きな画像のキャプション

画像にキャプションをいれてみようその4(右寄せ画像)

記述例:[caption d=”attachment_905″ align=”alignright” width=”300″]<img class=”size-full wp-image-905 ” title=”画像配置 300×200″ src=”http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-300×200.jpg” alt=”画像配置 300×200″ width=”300″ height=”200″>右寄せ画像のキャプション[/caption]
画像配置 300x200

右寄せ画像のキャプション

最後に右寄せ画像にキャプションをつけたいと思います。また今度も、画像の上、下、左に十分な余白があると思います。
このへんでテキストが右寄せの画像の下に回り込んで、ちょうど良い具合に収まっているのが分かると思います。ひきつづきちょうど良い具合にスペースが残されていて、すべてがきれいに表示されているべきです。そうです…。右画像に回り込むのって気持ちいいですね。

画像の配置のテストはこれで終わりです。