記事に画像を表示させてみよう! | 圧倒的な作業効率と差別化を生み出す!~EFFICIENTアフィリエイト~

エフィシェントアフィリエイト~圧倒的な作業効率と差別化を生み出す!~

EFFICIENTアフィリエイト

記事に画像を表示させてみよう!

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

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

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

アップローダーをクリック

ファイルを選択

表示させたい画像を選択

画像のタイトルを記入

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

画像挿入後のサンプル画像

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

サンプル画像

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

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

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

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

ペイント軌道手順

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

ペイントをクリック

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

画像を貼り付ける

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

画像貼り付け後の画面画像

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

画像編集手順

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

新規ペイントを立ち上げる

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

画像の貼り付け手順

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

不要な部分の参考画像

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

キャンパス範囲の指定手順

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

完成サンプル画像

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

名前をつけて保存

マイピクチャーに保存

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

保存方法参考画像

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

アップローダーをクリック

ファイルを選択する

表示させる画像を選択する

画像の詳細設定参考画像

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

完成サンプル画像

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

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

クイックタグのリンクをクリック

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

リンク入力場所参考画像

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

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

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

width="446"
height="66"

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

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

サイズサンプル

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

サイズサンプル2

画像の表示位置の指定

ワードプレスで画像が表示される位置を決めるタグが「class="位置指定文字"」です。

class="alignleft"    ←画像を左に表示
class="alignright"    ←画像を右に表示

画像を左に表示させテキストを画像の右に表示させる

位置指定設定場所参考画像

表示位置サンプル
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト

class=”alignleft”指定で画像を左に表示させテキストが右に回り込みます↓

<img src="画像のURL" alt="画像説明文" title="画像タイトル" width="180" height="160" class="alignleft"/>
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト

画像を右に表示させテキストを画像の左に表示させる

アップローダー表示位置指定参考画像

表示位置サンプル2
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト

class=”alignright”で画像が右に表示されテキストが左に回り込みます↓

<img src="画像のURL" alt="画像説明文" title="画像タイトル" width="180" height="160" class="alignright"/>
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト

画像のタグの構成

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

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

<img src="画像のURL" alt="画像の説明" title="画像のタイトル" width="246(横幅)" height="36(高さ)" class="画像の位置(alignright or laligneft)" />

基本的にはclass=画像の位置指定タグを覚える必要はなく
ワードプレスのアップローダーで画像の位置指定をチェックし
記事に挿入すれば自然とそれぞれの配置で画像が表示されます^^

ここでお伝えした画像タグについては
「HTMLタグ辞典」内の「<img>タグ(画像表示タグ) 」でも
お伝えしておりますので後々必要な情報が出てきましたら「HTMLタグ辞典」をご利用ください^^

HTMLタグ辞典

では次にワードプレスでの記事作成で「投稿」とは違い
「ページ」と言う編集画面でも記事を作成する事が出来ます。

この「投稿」と「ページ」の違いについてや「ページ」での記事の作成手順について
次の「「ページ」で記事を作成してみる」でお伝えしていきます^^

  • Yahoo!ブックマークに登録する
  • はてなブックマークに登録する
  • livedoorクリップに登録する
  • newsingブックマークに登録する
  • del.icio.usブックマークに登録する
  • ニフティクリップに登録する
  • RSSを購読する
  • このページをブックマーク!

次の記事 »
前の記事 »
トップページへ » 圧倒的な作業効率と差別化を生み出す!~EFFICIENTアフィリエイト~

もっと詳しく知りたい事や
理解できなかった事などございましたらお気軽にご連絡下さい。

お問い合わせはこちらからどうぞ

この記事のコメント

この記事へのコメント

次の記事 »
前の記事 »
トップページへ » 圧倒的な作業効率と差別化を生み出す!~EFFICIENTアフィリエイト~

お問い合わせはこちらからどうぞ

圧倒的な作業効率と差別化を生み出す!~EFFICIENTアフィリエイト~ TOP » 一般コンテンツ, 3章:ワードプレス基本設定と操作 » 記事に画像を表示させてみよう!