≫メルマガにてブログ無料相談OKです。

WordPressブログの画像を最適化する7つの施策【まとめ】

はじめ

  • WordPressブログに挿入する画像を最適化したい。
  • WordPressに挿入するまでの流れや手順がわからない。
  • ブログに適している画像のサイズ・大きさもわからない。

本記事では、上記のようなブログに使う画像に関する様々な疑問を解消することができます。

この記事を読めば、私が普段から心がけて実践している画像の最適化する施策を知ることができますよ。

 

1. WordPressブログにおすすめのフリー画像素材はこの4サイトOK!

WordPressブログにおすすめのフリー画像素材は以下の4つです。

正直、この4つのサイトを覚えておけばブログ運営で画像素材に困ることはないと言っても良いです。

ブログに使えるフリー画像素材

ちなみに、私のこのブログで使用している画像も全て「ODAN」のものです。

アフィリエイト初心者の方は是非参考にしてみてください。

フリー画像サイト・アイコン画像サイトについて以下の記事でお話していますので、詳しく知りたい方は参考にしてみてください。

 

2. WordPressブログの最適な画像サイズを調べる方法

WordPressブログの中に挿入する画像は大きく分けて2種類あり、調べる方法も2つです。

ブログの画像
  1. 文章中に挿入されている画像(デベロッパーツールを使う)
  2. アイキャッチ画像(「function.php」の記述を確認)

こちらの画像のサイズは使用しているWordpressのテンプレートによってサイズが異なるので、

綺麗な画像配置にするためには画像のサイズをしっかりと把握することが大事です。

 

2-1. WordPressブログに挿入する最適な画像のサイズを調べる方法

WordPressブログに挿入する最適な画像のサイズを調べる方法は、Google Chromeに備わっているデベロッパーツールを使い調べていきます。

Google Chromeを使った場合ですと、以下の手順ですぐに最適な画像サイズを調べることができます。

最適な画像のサイズを調べる方法
  1. 調べたいブログにアクセスします
  2. Google Chromeの「検証」を開く
  3. 記事の「Body」の横幅サイズを確認する

WordPressブログに挿入する画像サイズの調べ方は、以下の記事で詳細に解説していますので参考にしてみてください。

 

2-2. WordPressのアイキャッチ画像のサイズを調べる方法

アイキャッチ画像のサイズを調べるためにはWordpress管理画面の「外観→テーマ編集」の「function.php」内の記述を確認することで調べることができます。

アイキャッチ画像のサイズを調べ方は以下の方法です。

アイキャッチ画像のサイズを調べる手順
  1. 「function.php」を開く
  2. サムネイルサイズ(set_post_thumbnail_size)のコードを確認する
  3. 「set_post_thumbnail_size」のコードがない場合

また、先ほど記事内の画像の調べ方でもご紹介したデベロッパーツールを使っても、アイキャッチ画像のサイズを調べることができますので、やりやすい方でOKです。

WordPressのアイキャッチ画像のサイズを調べる方法については、以下の記事で詳しく解説していますので、参考にしてみてください。

 

3. WordPressブログの画像を軽量化・圧縮する方法【必須】

WordPressブログに画像を挿入する際に必須の工程が「リサイズ→圧縮」です。

この作業を飛ばしてしまうと、画像を重たいまま使用することになり、ブログの表示速度が遅くなる最大の原因となります。

なので、Wordpressブログに画像を挿入する際は、必ず「リサイズ→圧縮」を行うようにしましょう。

画像の圧縮におすすめのツール・プラグインは以下の通りです。

画像圧縮のツール・プラグイン
  1. Optimizilla(アップ前の圧縮)
  2. TinyPNG(アップ前の圧縮)
  3. iLoveIMG(アップ前のリサイズ)
  4. EWWW Image Optimizer(アップ後の圧縮)

ブログ画像の軽量化・圧縮はこの4つのツールとプラグインの知っておけばOKです。

こちらの4つの画像を軽量化・圧縮するツール・プラグインの詳しい使い方は、以下の記事で解説していますので参考にしてみてください。

 

4. おしゃれなアイキャッチ画像の作り方とデザインのコツ

ブログの個性・雰囲気・デザインに大きく関わっているのが「アイキャッチ画像」です。

そして、おしゃれなアイキャッチ画像の作り方のコツは「画像の上にテキストを配置する」というものでOKです。

簡単ではありますが、ユーザーに記事の内容が伝わりやすくなり、デザイン性も向上するのでおすすめです。

アフィリエイト初心者のうちは、アイキャッチ画像にそこまで力を入れる必要はありませんが、中級者以上の方は、アイキャッチ画像を自身で作成編集することを私は推奨しています。

1画像の何時間もかけるのは正直無駄な時間ですので、サクッとおしゃれにわかりやすいアイキャッチ画像を目指しましょう。

無料ソフト・ツールで簡単に作ることが可能で、慣れてしまえば非常に簡単です。

そして、おしゃれなアイキャッチ画像を作るのにおすすめのツールは以下の通りです。

おしゃれなアイキャッチ画像の詳しい作り方・編集ソフトの使い方については以下の記事で解説していますので参考にしてみてください。

 

5. WordPressに挿入した画像に枠線を付ける方法

WordPressに挿入した画像に枠線を付けたい時は、CSSで簡単に設定することができます。

全ての画像に枠線をつけることも可能ですし、特定の画像だけにつけることも可能!

画像に枠線をつける方法は以下の手順です。

CSSで枠線を付ける方法
  1. CSSにコードを追記する。
  2. 枠線を付けたい画像のCSSクラスを指定する。

ブログを運営していくと、挿入した画像が背景と同化してわかりづらい、挿入画像を目立たせたいと感じる時があります。

そんな時には、CSSで枠線をつける方法は非常に便利です。

WordPressに挿入した画像に枠線を付ける方法の詳細については、以下の記事で解説していますので参考にしてみてください。

 

6. WordPressのプロフィール画像の設定方法

WordPressのプロフィール画像を設定を簡単にしてくれるプラグインが「Simple Local Avatars」です。

WordPressでプロフィール画像を設定するためには、「Gravatar」というサービスを利用する必要がありますが、英語サイトだし、登録が面倒と感じる人も多いでしょう。

その手間を省いてくれるのがプラグイン「Simple Local Avatars」です。

「Simple Local Avatars」を使ったプロフィール画像の設定方法は以下の手順です。

プロフィール画像の設定方法
  1. プラグイン「Simple Local Avatars」をインストール
  2. WordPress管理画面の「ユーザー一覧」からプロフィール画像を設定したいユーザーを選択
  3. 「プロフィール」の中のUpload Avatarからお好みのプロフィール画像を選択する

ブログのプロフィール画像を軽視している方も多いですが、ユーザーは「このブログは誰が書いているのだろう?」という疑問を持つ可能性が高いです。

その時にプロフィール画像が設定され、著者情報が記載されていることでブログの信頼性につながります。

近年のSEOでは、E-A-T(専門性/権威性/信頼性)が重要であるといわれていることから、ブログの著者情報を示すプロフィール画像の設定は必須なのです。

WordPressのプロフィール画像をプラグインで簡単に設定する方法の詳細については、以下の記事で解説していますので参考にしてみてください。

 

7. 知っていると便利!Wordpressの画像に関する「プラグイン」

その他にWordpressにてブログ運営をしていく中で、知っておくと便利な画像に関するプラグインをご紹介。

ブログ画像に関するプラグイン
  1. WP Pixabay
  2. Easy FancyBox

 

7-1. WordPressに簡単に画像を挿入できるプラグイン「WP Pixabay」の使い方

1つ目が画像の挿入が簡単になるプラグイン「WP Pixabay」です。

「WP Pixabay」を使えば、フリー画像サイト「pixabay.com」にアップされている画像素材をブログの記事内に簡単に挿入することができます。

そのため、画像をPCに保存してからWordpressにアップするという手間を省くことができます。

「WP Pixabay」の使い方は以下の通りです。

プラグイン「WP Pixabay」の使い方
  1. 「WP Pixabay」をインストール→有効化する
  2. 「pixabay.com」で自身のAPI Keyを取得する
  3. 「WP Pixabay」にAPI Keyを入力する
  4. 記事に「WP Pixabay」を使い、画像を挿入する

「WP Pixabay」を使うことで、サーバーに画像ファイルをアップロードしなくて済むため、サーバーの容量節約にもつながるというメリットもあります。

WordPressに簡単に画像を挿入できるプラグイン「WP Pixabay」の使い方の詳細については、以下の記事で解説していますので、参考にしてみてください。

 

7-2. 画像を拡大(ポップアップ)させるプラグイン「Easy FancyBox」の使い方

2つ目がブログに挿入した画像を拡大(ポップアップ)させるプラグイン「Easy FancyBox」です。

例えば「Easy FancyBox」を使えば、ブログの記事内では小さくて見えずらいという画像を拡大することができるようになるので、ユーザビリティも向上します。

「Easy FancyBox」の使い方は以下の通りです。

Easy FancyBoxの使い方
  1. 「Easy FancyBox」をインストールする
  2. 記事に拡大させたい画像を挿入する
  3. 画像のリンク先を「メディアファイル」にする
  4. 画像に説明文を入れる時は「代替えテキスト」に入力

「Easy FancyBox」は、特に解説系記事などで重宝するプラグインです。

画像を拡大(ポップアップ)させるプラグイン「Easy FancyBox」の使い方の詳細については、以下の記事で解説していますので、参考にしてみてください。

 

まとめ

今回は、Wordpressブログの画像を最適化する7つの施策についてお話してきました。

ブログで稼ぐためには、ユーザーに記事を読んでもらう必要があります。

ユーザーの滞在時間が延び、ユーザーからの信頼が高まれば、上位表示される可能性も高まります。

そんなユーザビリティを高めるのに重要な要素が「ブログの画像」です。

なので、文章(コンテンツ)が重要なのは当たり前ですが、ユーザーがより見やすいように画像をしっかりと使うこともブログで稼いでいくためには重要なポイントなのです。