記事に画像を挿入します。
01.準備
画像サイズの設定をします。
設定 ＞ メディア ＞ 画像サイズ ＞ サムネイルのサイズ
サムネイルのサイズを75x75に設定します。
02.記事を書く
投稿 ＞ 新規追加 より記事を書きます。
03. 画像をアップロードする
画面上のアップロード挿入のアイコンをクリックし、
画像をアップロードします。
04.画像を挿入する
アップロード後の画面で、代替テキスト、配置、サイズを設定します。
ここでは、配置を中央、サイズを中とします。
投稿に挿入を押下します。
画像が記事に挿入されます。
05. ソースの確認
HTMLタブをクリックし、ソースを確認します。
<a href="
http://ranka.sub.jp/taroumatsu/?attachment_id=37" rel="attachment wp-att-37">
<img class="aligncenter size-medium wp-image-37" title="flower" src="
http://ranka.sub.jp/taroumatsu/wp-content/uploads/2012/03/flower-300x225.jpg" alt="フラワー" width="300" height="225" />
</a>
img要素のclass属性の、
aligncenterが配置の中央を指定したときのクラス
size-mediumがサイズの中を指定したときのクラス
となります。
wp-image-37は、この画像固有のクラスです。
06.表示の確認、CSS編集
公開を押下し、記事を公開します。
この段階では、画像は中央に表示されていません。
style.cssに下記記述を追加します。
/* 記事内の画像 */
.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
中央に表示されましたが、IEで確認すると、画像に枠が表示されています。
下記記述をstyle.cssに追加し、枠を非表示にします。
div.post img {border: none}
[0回]
PR
