画像の配置

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


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

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


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

 

画像配置 580x300



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


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

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

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


下記の画像は1200ピクセルもありますが、コンテンツエリアからはみ出る事はなく収まっています。
記述例:<img class="alignnone wp-image-907" title="画像配置 1200x400" src="http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-1200x4002.jpg" alt="画像配置 1200x400" width="1200" height="400">

画像配置 1200x400

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


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

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

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


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


画像配置 580x300

キャプション


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




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


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


画像配置 150x150

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


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




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


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


画像配置 1200x400

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




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


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


画像配置 300x200

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


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


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

亜里 下岡

Author profile

広島県出身。株式会社○○所属。ウェブデザイン好きの1988年生まれ。
ここに好きな文章を入れることが出来ます。

Author recent post

Related post

  1. 2017-8-21

    勇者登録が解禁になりました。

    司令部所属の司令官秘書のゆいです。 野田市防衛軍の勇者登録がはじまります。 2017年8月2…

おすすめ記事

  1. 記事投稿をする際のHTML書式集 記事投稿をする際に、見出しはどうすればできるのか?表組はどうする…
  2. 観光にかんする投稿 観光にかんする投稿 観光にかんする投稿 観光にかんする投稿 …
  3. 観光にかんする投稿 観光にかんする投稿 観光にかんする投稿 観光にかんする投稿 …

話題をチェック

  1. 司令部の研究班よりお知らせです。 「大魔王」が野田市内に放出する「スポット」10か所が、研究班…
  2. ひさしぶりじゃのネット爺じゃ。 大魔王軍が動き始めたと言うことで、昨日は第一次防衛2個小隊が出撃し…
  3. 野田市防衛軍、司令部秘書官のゆりなです。 2017年9月10日の第一次防衛「作戦名:ディアブロ」作戦…

アーカイブ

Return Top