画像の配置テスト

index.html

<div class="entry-inner"><p>画像の配置テストへようこそ ! 画像をいろいろな位置に配置してみるのに一番良い方法は、言葉の海の中に画像をそっとうずめてみることです。さあ、はじめましょう。</p>
<p>画像の配置では、ユーザーが「指定なし」「右寄せ」「左寄せ」「中央揃え」の中から自分の好きなものを選べるようにする必要があります。さらに、「サムネイル」「中サイズ」「大サイズ」「フルサイズ」という選択肢の中から大きさを選べるようにするべきです。</p>
<p style="text-align: center;"><img class="size-full wp-image-906 aligncenter" title="画像配置 580x300" alt="画像配置 580x300" src="https://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-580x300.jpg" width="580" height="300"></p>
<p>上記の画像は<strong>中央寄せ</strong>になるはずです。</p>
<p><strong><img class="size-full wp-image-904 alignleft" title="画像配置 150x150" alt="画像配置 150x150" src="https://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-150x150.jpg" width="150" height="150"></strong>このパラグラフの残り画像を左寄せしたとき、文章が150ピクセルの画像の周りを囲むようになるかどうか見るためのものです。<strong></strong></p>
<p>ご覧のとおり、画像の上・下・右にスペースが空いている事がわかると思います。テキストは画像にこっそりと忍びよってはいません、忍び寄ることは良くない事です。画像だって十分に呼吸ができるスペースが必要なのです。画像が文章にイライラさせられることなく役割を果たせるようにしてあげてください。次の文章では、テキストが画像の右から下へとシームレスに途切れることなく続いている事がわかりますね。これで完了です !</p>
<p>次は、<strong>とても大きな画像</strong>のテストです。そして、この画像には<strong>配置の指定がありません</strong>。</p>
<p><img class="alignnone  wp-image-907" title="画像配置 1200x400" alt="画像配置 1200x400" src="https://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-1200x4002.jpg" width="1200" height="400"></p>
<p>上記の画像は1200ピクセルもありますが、コンテンツエリアからはみ出る事はなく収まっています。</p>
<p><img class="size-full wp-image-905 alignright" title="画像配置 300x200" alt="画像配置 300x200" src="https://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-300x200.jpg" width="300" height="200"></p>
<p>そして今後は右寄せに移りたいと思います。また今度も、画像の上、下、左に十分な余白があると思います。ほら、あっちにいる彼を見てください ! 右側の方にいるあの画像 ! 左寄せ画像がなんて言うかなんてどうでもいいんです、美しい配置ですよ。他の人の意見なんて気にしないでいいんです。</p>
<p>そしてこのへんでテキストが右寄せの画像の下に回り込んで、ちょうど良い具合に収まっているのが分かると思います。ひきつづきちょうど良い具合にスペースが残されていて、すべてがきれいに表示されているべきです。そうです…。右画像に回り込むのって気持ちいいですね。</p>
<p>さて、これで終わりと思ったかもしれませんが、これからキャプションのテストに入ります !</p>
<figure id="attachment_906" style="width: 580px" class="wp-caption aligncenter"><img class="size-full wp-image-906  " title="画像配置 580x300" alt="画像配置 580x300" src="https://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-580x300.jpg" width="580" height="300"><figcaption class="wp-caption-text">580×300 画像の<a title="画像設定" href="https://en.support.wordpress.com/images/image-settings/">キャプション</a>例。</figcaption></figure>
<p>上記の画像は<strong>中央寄せ</strong>になるはずです。キャプションにはリンクが含まれていますが、おかしな表示になっていないか確認しましょう。</p>
<figure id="attachment_904" style="width: 150px" class="wp-caption alignleft"><img class="size-full wp-image-904  " title="画像配置 150x150" alt="画像配置 150x150" src="https://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-150x150.jpg" width="150" height="150"><figcaption class="wp-caption-text">ちょっとしたキャプション</figcaption></figure>
<p>このパラグラフの残りの部分は、150×150 サイズの<strong>左寄せ</strong>画像の回り込みをテストするためのつなぎです。&nbsp;</p>
<p>ご覧の通り、画像の上・下・右にスペースが必要です。テキストは画像にこっそりと忍びよってはいません、忍び寄ることは良くない事です。画像だって十分に呼吸ができるスペースが必要なのです。画像が文章にイライラさせられることなく役割を果たせるようにしてあげてください。次の文章では、テキストが画像の右から下へとシームレスに途切れることなく続いている事がわかりますね。これで完了です !</p>
<p>それでは、<strong>とても大きな画像</strong>のテストです。そして、この画像にも<strong>配置の指定はありません</strong>。</p>
<figure id="attachment_907" style="width: 1200px" class="wp-caption alignnone"><img class=" wp-image-907" title="画像配置 1200x400" alt="画像配置 1200x400" src="https://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-1200x4002.jpg" width="1200" height="400"><figcaption class="wp-caption-text">とても大きな画像のコメント</figcaption></figure>
<p>上記の画像は1200ピクセル幅ですが、コンテンツエリアからはみ出すべきではありません。コンテンツのフローを視覚的に邪魔しないかたちで、指定のエリア内に収まっている必要があります。</p>
<figure id="attachment_905" style="width: 300px" class="wp-caption alignright"><img class="size-full wp-image-905 " title="画像配置 300x200" alt="画像配置 300x200" src="https://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-300x200.jpg" width="300" height="200"><figcaption class="wp-caption-text">右側いるのほ良い気分です。</figcaption></figure>
<p>そして今後は<strong>右寄せ</strong>画像に移りたいと思います。また今度も、画像の上、下、左に十分な余白があると思います。ほら、あっちにいる彼を見てください ! 右側の方にいるあの画像 ! 左寄せ画像がなんて言うかなんてどうでもいいんです、美しい配置ですよ。他の人の意見なんて気にしないでいいんです</p>
<p>そしてこのへんでテキストが右寄せの画像の下に回り込んで、ちょうど良い具合に収まっているのが分かると思います。ひきつづきちょうど良い具合にスペースが残されていて、すべてがきれいに表示されているべきです。そうです…。右画像に回り込むのって気持ちいいですね。</p>
<p>それでは、これで終わりです。画像配置のテスト、お疲れ様でした !</p>
</div>