WordPressブログの画像の入れ方と効果的な使い方【実はかなり重要です】

 

わかば
ブログの画像に入れたい時って、どうやってやるんですかね?

山本
ブログで画像を使う場所って色々あるよね
わかばちゃんが言ってるのってどこの画像のことかな?

わかば
そうですねー できれば全部教えてもらえると助かります!

山本
じゃあ今回はブログの画像の設置方法と、使い方について解説していくよ

 

WordPress ブログの画像の入れ方(設置方法)と

その効果的な使い方について解説していきます。

 

画像の設置方法がわからない方はもちろん

画像をあまり効果的に使えていない、といった方も参考にしてください。

 

この記事を読んでわかること
  • WordPress ブログに画像を設置する方法
  • ブログで画像を使うべき場所
  • 効果的な画像の使い方

 

WordPress ブログで画像を使う場所は、主に以下の3ヶ所です。

  • アイキャッチ画像
  • 各見出しの下の画像
  • 記事内の解説用画像

 

それぞれ解説していきます。

 

1.アイキャッチ画像

アイキャッチ画像は、「アイ」(目を)「キャッチ」(捕まえる)という和製英語です。

その名の通り、ブログ読者の目を引くために設置する画像です。

 

わー研。だと、以下の部分がアイキャッチ画像になります。

アイキャッチ画像

 

それぞれの記事の「顔」とも言える画像なので、重要度は高め。

ひと目で、何の記事なのかがわかる画像を使うと効果的です。

 

アイキャッチ画像の入れ方

アイキャッチ画像は、投稿編集画面から入れることができます。

 

投稿編集画面の右下、アイキャッチ画像を設定 をクリックします。

アイキャッチ画像

 

アイキャッチ画像の追加画面が表示されるので、ファイルを選択 から画像をアップロードするか、この画面に 直接画像をドラッグ&ドロップ することで、アイキャッチ画像を設定することができます。

アイキャッチ画像

 

アイキャッチ画像が設定されると、このように画像が表示されます。

アイキャッチ画像

 

アイキャッチ画像のサイズについて

最適なアイキャッチ画像のサイズは、使っているテーマや表示方法によって

変わってくるので、一概に「このサイズがベスト」と言うことはできません。

 

ですが基本的には、

正方形よりも少し横長のものを使うと、綺麗に表示されることが多いです。

山本
わー研。では「600×350px」サイズのアイキャッチ画像を使っています。参考までに。

 

2.各見出しの下の画像

ブログのメインコンテンツは文章だということは間違いないのですが

文章ばかりだと、どうしても読みにくく感じてしまうものです。

 

例えば、Wikipedia の記事なんかが、いい例です。

(※Wikipedia:ウィキペディアについてページより画像を引用)

わかば
情報量はものすごそうだけど、なんか読む気がしませんね...

 

Wikipedia というサイトの性質上、これはこれで成立していますが

私達のブログがこんな状態だったら、読者はすぐに離脱してしまうことでしょう。

 

そうならないためにも有効なのが、見出しの下で使う画像 です。

 

わー研。でもこんな感じで設置しています。

各見出しの下の画像

 

この画像を入れおくことで、記事全体の見栄えも良くなりますし

文章を読んで疲れた読者が、一休みできるポイントにもなります。

 

さらに、記事に関連した画像にしておくと、

読者が記事の内容をイメージしやすくなる、というメリットもあります。

 

見出し下の画像の入れ方

見出し下の画像の入れ方は、ブログの記事内に画像を設置する方法と同じです。

 

まず、画像を設置した場所にカーソルを持っていき、メディアを追加 ボタンをクリックします。

各見出しの下の画像

 

あとは、さきほどとまったく同じやり方で、画像を追加するだけでOKです。

各見出しの下の画像

 

見出し下画像のリンクは ”なし” が推奨

見出し下の画像については、特に拡大表示する必要もないので

画像のリンクをなしにしておくようにしましょう。

 

やり方は、メディアを追加画面の右下にある、リンク先なし を選択するだけです。

各見出しの下の画像

 

こうしておくことで、誤クリックによる画像拡大で

無駄に読者をイラつかせる心配もなくなります。

 

見出し下画像のサイズについて

見出し下画像のサイズも、ブログの表示サイズによって変わってくるので

これがベスト!とは言えませんが、正方形に近いと記事のスペースを余計にとってしまうので

やはりこちらも ”やや横長” くらいのものを使うと良いでしょう。

 

山本
わー研。の見出し下画像は「1000×600px」サイズを使っています。

 

無料で使える画像加工ソフトがあります。

参考リンク画像加工用ソフトの決定版「PhotoScape」の使い方

 

3.記事内の解説用画像

基本的には文章での解説がメインとなるブログですが

文章だけではどうしても、説明しづらいこともありますよね。

 

そんな時に超有効なのが、この解説用画像です。

 

わー研。で使用している例だと「ブログの収益化に必須のアフィリエイトASP 15選」

のページで使っている、アフィリエイトの仕組みを解説したこのような画像です。

記事内の解説用画像

 

自分で作成しないといけない分、上記2つの画像よりも使用の難易度は上がりますが

説明しづらい部分に設置しておくことで、抜群の効果を発揮してくれます。

 

最初は無理に使う必要はありませんが、こういう使い方もあるということを覚えておいて

ブログの記事作成に余裕が出てきたら、積極的に使っていきたい画像です。

 

記事内の解説用画像の入れ方

解説用画像は記事内に入れるので、見出し下画像とやり方は同じです。

 

記事内の解説用画像のリンクは ”メディアファイル” が推奨

解説用画像は、読者の閲覧環境によっては画像を拡大して詳細を確認

することもあるので、リンク先メディアファイル に設定しておきましょう。

山本
この設定にしておくことで、画像がクリックされたときに拡大表示されるようになります

記事内の解説用画像

 

画像をふわっとポップアップ表示できるプラグインもあります。

参考リンク画像をポップアップ表示してくれるプラグインEasy FancyBoxの設定方法

 

4.ブログで画像を使うときのコツ

ブログで画像を使うときのコツ

その1:記事と関係のある画像を使う

ブログで画像を使う時のコツは、その記事に関係のある画像を使うことです。

 

アイキャッチ、見出し下画像ともに、記事と関係のある画像を使うことで

記事が読みやすくなるだけでなく、読者が内容をイメージしやすくなります。

 

転職の記事なのに、突然「猫」の画像があったら、えっ?ってなりますよね。

 

例えば、

転職の記事なら「スーツ姿の男性」や「転職の雑誌」

金融に関する記事なら「クレジットカード」や「お金に関連した画像」など

関係の深い画像を使うことで、記事全体のクオリティーが一気に上がります。

 

たまに、まったく関係のない画像を使っているブログも見かけますが

画像を効果的に使いたいなら、「記事の内容と関係の深いものを使う」ということを覚えておきましょう。

 

その2:alt属性を設定する

alt属性とは、メディアを追加画面の右側にある「代替テキスト」の項目のことです。

ブログで画像を使うときのコツ

 

この欄にテキストを入力しておくことで、少しだけですが SEO 効果が期待できます。

ブログで画像を使うときのコツ

 

本来なら、その画像の意味を説明するテキストを入力しておくのがベストなのですが

全ての画像を説明するのは大変なので、僕の場合は「見出し2」をそのままコピペしています。

 

alt属性を設定しておくことで、このように画像検索結果に表示されるようになります。

ブログで画像を使うときのコツ

 

さいごに

ブログで使う画像の入れ方と、その効果的な使い方について解説しました。

 

画像選びから alt属性の設定など、最初は面倒に感じるかもしれませんが

このような小さな事を積み重ねることで、SEO にも「グッと」いい影響が現れてきます。

 

慣れてくるともうこんなの当たり前って感じで、面倒にも感じなくなるので

最初の内から、しっかりとできるようになっておくようにしましょう。

 

さいごに、この記事のまとめです。

  • アイキャッチ画像の入れ方
  • 各見出しの下の画像の入れ方
  • 記事内の解説用画像の入れ方
  • ブログで画像を使うときのコツ

 

わかば
ブログの画像一つとっても色々あるもんなんですね~

山本
画像って思っている以上に効果が高いものだから
最初のうちから、しっかりと使えるようになっておこうね!

 

注目の記事超手軽にスクショが撮れる「Screenpresso」の使い方とおすすめの設定方法

注目の記事Diver の入力補助機能のすべてを徹底解説

 

Twitterでフォローしよう

おすすめの記事