前回と同じように記事に画像を挿入し、
画像を記事が回りこむように表示させます。
左も右も行うことは同じなので、今回は左のみ開設します。
01.記事の準備、画像のアップロード
前回と同じように、記事を準備し、画像をアップロードします。
今回は、配置を左、サイズをサムネイルにします。
02.ソースの確認
HTMLタグを押下し、ソースの確認をします。
<a href="
http://ranka.sub.jp/taroumatsu/wp-content/uploads/2012/03/paper.jpg">
<img class="alignleft size-thumbnail wp-image-43" title="paper" src="
http://ranka.sub.jp/taroumatsu/wp-content/uploads/2012/03/paper-75x75.jpg" alt="本文の左右に画像を挿入する" width="75" height="75" />
</a>
img要素のclass属性について、
alignleftは、配置が左のクラス、
size-thumbnailは、サイズがサムネイルのクラス
です。
03. 表示の確認、CSS編集
記事を公開後、表示を確認すると、画像は左にありますが、記事は回り込んでいません。
style.cssに下記を記述します。
alignrightは画像の配置を右にした場合の記述です。
.alignleft {float: left;
margin-right: 10px;
margin-bottom: 10px}
.alignright {float: right;
margin-left: 10px;
margin-bottom: 10px}
04.floatの注意
画像が大きい場合、下記のように表示されてしまう場合があります。
このような状態にならないように、CSS（clear:both等）で対処をする必要があります。
[0回]
PR
