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

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

ここではワードプレスで作成するサイトに画像を表示させる方法や、サイズの変更、画像にリンクを貼る手順などを記載しておきます。

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

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

ワードプレス画像の挿入手順参考画像1

ワードプレス画像の挿入手順参考画像2

ワードプレス画像の挿入手順参考画像3

ワードプレス画像の挿入手順参考画像4

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

ワードプレス画像の挿入手順参考画像5

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

ワードプレス画像の挿入手順参考画像6

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

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

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

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

ワードプレス画像の挿入手順参考画像7

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

ワードプレス画像の挿入手順参考画像8

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

ワードプレス画像の挿入手順参考画像9

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

ワードプレス画像の挿入手順参考画像10

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

ワードプレス画像の挿入手順参考画像11

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

ワードプレス画像の挿入手順参考画像12

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

ワードプレス画像の挿入手順参考画像13

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

ワードプレス画像の挿入手順参考画像14

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

ワードプレス画像の挿入手順参考画像15

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

ワードプレス画像の挿入手順参考画像16

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

ワードプレス画像の挿入手順参考画像17

ワードプレス画像の挿入手順参考画像18

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

ワードプレス画像の挿入手順参考画像19

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

ワードプレス画像の挿入手順参考画像1

ワードプレス画像の挿入手順参考画像2

ワードプレス画像の挿入手順参考画像20

ワードプレス画像の挿入手順参考画像21

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

ワードプレス画像の挿入手順参考画像22

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

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

ワードプレス画像の挿入手順参考画像23

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

ワードプレス記事投稿手順7

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

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

では次に画像の大きさを編集する方法を記載しておきます。
これは「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 or left)" />

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

« アフィリエイトリンクの貼り方(テキスト) ←前に戻る | 次に進む→ ワードプレス文字のサイズと色の変更方法 »