ワードプレス画像の挿入とサイズ、配置の編集方法

ワードプレスの記事本文に画像を表示させる方法はとても簡単に出来ます＾＾
管理画面の赤枠で囲んだアイコンをクリックする事でメディアが表示されますので
記事に表示させたい画像を選択し「記事に挿入」で画像を表示させるタグが自動で
書き込まれます＾＾

すると画像を表示させるタグが書き込まれ
先ほど選んだ画像がサイト上に表示されます＾＾

上記手順でサイト上に簡単に画像を表示させることが出来ます。
では実際に画像を先ほどの手順でサイトに表示さる練習をしてみましょう＾＾
今回は私が準備したバナー画像を使って練習してみます＾＾

↑この画像をあなたのワードプレスで表示させます＾＾
これはキーボード右上にある「prt Sc」キーを使う事で今画面に表示されている
画面をそのままコピーする事が出来ます＾＾

なので上記の画像が画面に表示されている状態で
キーボードの「prt Sc」キーを押します。

一見何も変化が起きていないように感じますが
クリップボードにはきちんと画面がコピーされています。

では「prt Sc」キーでコピーした画面をペイントに貼り付けて加工します＾＾
まず画面左下の「スタート」をクリックし「すべてのプログラム」を選択します。

するとプログラムが表示されますのでその中の「アクセサリー」から
「ペイント」を選択します＾＾

するとペイント画面が表示されますので
先ほど「prt Sc」キーでコピーした画面を貼り付けます。
手順は画面上部の「編集」メニューの中の「貼り付け」を選択する事で貼り付ける事が出来ます。

すると先ほど「prt Sc」キーでコピーした画面がペイントに貼り付けられます

では次に今貼り付けた画像の中のクリックバナーだけを切り取る作業に入ります＾＾
以下画像の左メニューにある切り取りのアイコンをクリックし必要な範囲だけを選択します。
切り取る範囲を選択したらメニューを開き「コピー」します。

次に画面上部の「ファイル」から「新規」をクリックし
新しいペイント画面を開きます。

次に先ほどコピーした画像を「編集」メニュー内の「貼り付け」で貼り付けます。

すると先ほど必用な部分だけを選択した画像が貼り付けられます。
ただ、余計な余白が出来る場合があります。

では、この余計な余白をなくす為にキャンバスの右下にあるアイコンをクリックして
キャンバスの範囲を調整します。

これで必用な部分だけの画像が出来上がります。

ではこの画像を保存しますが今回はわかりやすくデスクトップに保存します。
（マイピクチャーなどお好きな場所に保存されてかまいません）

次に今回はファイル名を「ｂ１」とつけて(お好きな名前で構いません）
ファイルの種類を今回はPNGで保存します。
（ファイルの種類はJPEGがお勧めですが色がうまく出ない時はPNGを使用します）

「保存」をクリックすると画像が保存されますので
保存した画像をはじめにお伝えした手順でワードプレスに表示させます。

すると画像のタグが記事本文に挿入され画面を確認すると
先ほどの画像がサイト上に表示されています。

では今サイトに表示させた画像にアフィリエイトリンクを張ってみましょう＾＾
手順はもうお分かりですよね＾＾

まず画像を表示させているタグ（文字列）をドラッグし「link」をクリックします。

するとリンク先指定のURL画面が表示されますのでアフィリエイトリンクを記入します。

これで先ほどの画像をクリックすると商材の販売ページにリンクされています＾＾

画像のサイズを決めているタグ

では次に画像の大きさを編集する方法を記載しておきます。
これは「width」が横幅「height」が高さを表していますので
それぞれに指定してある数字を変更する事で大きさを変える事が出来ます。

width="446"
height="66"

↑この数字を大きくすれば画像が大きく、小さくすれば画像が小さくなります＾＾

▼画像のサイズ「width="446" height="66" 」▼

▼画像のサイズ「 width="246" height="36" 」▼

画像の位置を決めるタグ

画像が表示される位置を決めるタグが「align=”位置指定文字”」です。

align="left"　　　　←画像を左に表示
align="right" 　　 ←画像を右に表示 

画像の位置「left」が画像の右側に回りこみます。

画像の位置「right」が画像の左側に回りこみます。

画像のタグの構成

簡単に画像を表示しているタグの各それぞれの意味を簡単に記載しておきます＾＾

画像は主に以下のタグで構成されています。

<img src="画像のURL" alt="画像の説明" title="画像のタイトル" width="246(横幅）" height="36（高さ）" align="画像の位置（right　ｏｒ　left）" />

では次にワードプレスでの文字のサイズと色の変更方法を
次の「ワードプレス文字のサイズと色の変更方法」でお話していきます＾＾