ワードプレスの記事に画像を挿入する方法｜おすすめのプラグイン6選

ワードプレスの記事に画像を挿入する5つの手順

ワードプレスの記事に画像を入れる手順を紹介します。

ワードプレスでは、画像を挿入する際に画像ブロックを使用します。画像を入れたい位置に画像ブロックを挿入し、入れたい画像をアップロードしましょう。

1. 「画像ブロック」を選択して挿入したい画像を選ぶ

記事に画像を挿入する際は、画像ブロックを使用して画像を選びます。画像ブロックは、ワードプレス標準のブロックエディタで使える機能です。

投稿画面で「/（半角スラッシュ）」を入力する、もしくは画面上の「＋」をクリックしましょう。表示されたブロックの一覧から「画像」アイコンをクリックすると、画像ブロックが投稿画面に挿入されます。

画像ブロックを使用し画像を記事に挿入する方法は「アップロードして挿入する方法」と「メディアライブラリから選択して挿入する方法」の2つがあります。

以下でくわしく解説します。

画像をアップロードして挿入

画像をアップロードして挿入する方法は、画像を選択してアップロードするか、ドラッグ＆ドロップするかのどちらかです。画像ブロックの「アップロード」ボタンをクリックしましょう。画像を選び「開く」をクリックすると、画像を挿入できます。

画像をワードプレスの画面上にドラッグ＆ドロップする方法でもアップロードが可能です。パソコンのフォルダを開いて挿入したい画像を選択し、そのまま投稿画面上の挿入したい場所へと移動させましょう。

メディアライブラリから選択して挿入

ワードプレス内のメディアライブラリから画像を選択します。画像ブロックで「画像を選択」をクリック、続いて「メディアライブラリ」をクリックしましょう。画像にカーソルを当て、画面右下の「選択」ボタンをクリックしてください。

メディアライブラリに画像をアップロードする場合は「ファイルをアップロード」タブを開きましょう。「ファイルを選択」のボタンをクリック、または、ドラッグ＆ドロップで画像がアップロードできます。

2. 代替テキストを選択する

代替テキストとは画像の説明文を付与する機能のことです。代替テキストを使うことで、どのような画像なのかを検索エンジンが判断しやすくなります。画像が何らかの原因で表示されないときに、その位置に何があるのかをユーザーに伝えられるのもメリットです。

投稿画面に挿入した画像をクリックすると、右側にブロックの内容が表示されるため、代替テキストの欄に入力しましょう。メディアライブラリでも代替テキストを設定できます。画像を選択して右側に表示される入力欄に書き込みましょう。

3. キャプションを設定する

キャプションとは、画像の下に表示される短い説明文のことです。画像を引用した場合、引用元のサイト名を記載するときに使います。写真やイラストに文章を添えることで画像をユーザーにわかりやすく伝え、理解の手助けとなります。

メディアライブラリで画像を選び、右側のキャプションの枠内に文章を入力しましょう。キャプションは、画像の内容を端的に表す短い言葉がおすすめです。挿入済みの画像にも直接追加するには、画像の下の「キャプション」をクリックして書きましょう。

4. リンクを設定する

画像にリンクを貼りたいときは、リンクボタンを使います。外部リンクも内部リンクも同じ操作です。挿入した画像をクリックすると、画像の付近にメニューパネルが表示されます。「リンク」のボタンをクリックし、入力欄にリンクURLを入力しましょう。

記事内の別の場所にもリンク可能です。あらかじめリンクしたい場所にアンカーを設定しておき、リンクのURLに「＃」をつけて指定する方法です。アンカーは右側のブロックの最下部にある「高度な設定」のHTMLアンカーの欄に任意の英数字を入力して設定してください。

5. 画像の位置とサイズを設定する

記事内の画像の配置は「左寄せ」「中央揃え」「右寄せ」のいずれかを選択します。画像をクリックし、表示されたメニューパネルの中から、配置のアイコンをクリックして画像の位置を設定しましょう。

画像サイズは「サムネイル」「中」「大」「フルサイズ」のいずれかです。挿入した画像をクリックすると、右側にメニューが表示されます。画像サイズのプルダウンで選んでください。

画像をトリミングする方法

挿入した画像は、ワードプレス上で切り抜きが可能です。画像ブロック内のメニューパネルから「切り抜き」アイコンをクリックします。トリミングの縦横比のアイコンをクリックしてサイズを指定しましょう。

メディアライブラリ内でもトリミングができます。ライブラリで画像を選択し「画像を編集」ボタンをクリックしてください。画面上に表示される「切り抜き」のアイコンをクリックすると画像の枠が表示されます。任意の大きさに変更して、エンターキーを押しましょう。

ワードプレスの記事に画像を「横並び」で挿入する方法

ワードプレスの記事に、画像を横並びで表示したいときの挿入方法を解説します。横並びに挿入する方法は「ギャラリー」と「カラム」の2種類です。表示したい画像のサイズによって使い分けましょう。

自動的に画像のサイズを均等に表示したい場合は「ギャラリー」を使い、画像の縦横比をそのままで表示したい場合は「カラム」を使います。画像を横に並べることで、ユーザーに複数の画像をまとめて見せられるのがメリットです。

1. ギャラリーを使用する

ブロックの選択画面で「ギャラリー」をクリックしましょう。ギャラリーブロックの「アップロード」ボタンをクリックして、画像を直接挿入できます。ギャラリーでは1つひとつの画像の大きさは均一です。

複数の画像を1度に挿入したいときは、メディアライブラリを使いましょう。使いたい画像を複数選択し「ギャラリーを作成」ボタンをクリックします。編集画面で画像の入れ替えやキャプションの追加が可能です。「ギャラリーを挿入」ボタンで投稿画面に挿入します。

2. カラムを使用する

カラムは1つのブロックを分割する機能です。カラムを使うことで表示する画像の大きさを指定できます。ブロック選択画面で「カラム」を選択後、レイアウトを選びます。画面分割の割合指定で、好みの大きさで表示することが可能です。

カラムの「＋」をクリックし、画像をアップロードします。またはメディアライブラリから選択しましょう。カラムの挿入後に幅を変更したいときは、右側のメニューの「カラム設定」を使います。スライダーを左右に動かして幅を変更しましょう。

ワードプレスで画像の挿入ができないときの6つの対処法

ワードプレスで画像の挿入ができないときには6つの対処法があります。

万が一画像の挿入ができなくても、慌てずにこの方法を試してみましょう。6つの対処法について詳しく解説します。

1. ワードプレスに再ログインする

画像が挿入できないときは、ワードプレスに再ログインすることで改善することが多いです。挿入できない状態を一旦リセットするつもりで、ワードプレスからログアウトし、再度ログインしてみましょう。

ワードプレスの管理画面の右上に「こんにちは、（ユーザー名）さん」という箇所があります。マウスカーソルを置き「ログアウト」のリンクが表示されたらクリックしましょう。ログアウトするとログインの画面が開き、再びログインが可能です。

2. ブラウザのキャッシュを消去する

ブラウザにたまったキャッシュの影響で、画像が挿入できないことがあります。キャッシュとはブラウザで表示したWebページの情報を、一時的にパソコンやスマホに保存することです。消去すればワードプレスの画像の問題が解決する可能性があります。

Google Chromeを例にブラウザのキャッシュの消去方法を紹介します。ブラウザの右上の3点のメニューをクリックし「その他のツール」から「閲覧履歴を消去」を選択してください。「キャッシュされた画像とファイル」にチェックを入れて「データを消去」で完了です。

3. プラグインを停止する

画像の挿入に失敗するときは、プラグインが問題になっている可能性もあります。プラグインを1つひとつ停止して確認しましょう。1度にすべて停止すると、原因となっているプラグインがわからないため、必ず1つひとつ確認して停止してください。

ワードプレスの管理画面の「プラグイン」から「インストール済みのプラグイン」を開きます。プラグインの名前の下の「無効化」をクリックして停止しましょう。「プラグインを1つ停止するごとに画像の挿入を試す」の操作を繰り返して原因を探します。

4. メディアライブラリに直接アップロードする

投稿画面に画像を挿入するのではなく、メディアライブラリを使うことで解決する可能性があります。投稿画面から離れて管理画面のメディアライブラリを開き、画像を直接アップロードする方法です。

管理画面の左側にある「メディア」を選択し、メディアライブラリを開きます。「新規追加」ボタンをクリックして、ファイルを選択するか、画像をドラッグ＆ドロップしてください。投稿画面での画像挿入の際に、メディアライブラリから選択します。

5. 画像ファイルの容量を圧縮する

画像ファイルの容量を圧縮することでアップロードが出来るようになります。画像の容量が、ワードプレスの最大アップロードサイズより大きい場合はアップロードができません。メディアライブラリのファイル選択画面に容量が記載されているため、確認してください。

画像を右クリックし、プロパティで画像のサイズを確認しましょう。詳細タブを開くとサイズがわかります。容量が大きい場合は画像ソフトやプラグインなどで圧縮して使いましょう。

最適な画像サイズ（横）は800px〜1200px

ワードプレスで使う画像の最適なサイズは800px〜1200pxです。画像が小さすぎると幅が足りなくなり、記事の表示が崩れる可能性があります。

画像が大きすぎると、読み込み速度が遅くなるため注意が必要です。画像の読み込みが遅いとSEOにも影響するため、最適なサイズの画像を使用しましょう。

6. 画像の拡張子を確認する

ワードプレスの初期設定では、使える画像の拡張子が決まっています。対応している拡張子は次の6つです。

画像ソフトの拡張子やPDF・音声ファイルなど、非対応の拡張子がついた画像はアップロードができません。

画像をアップロードする前に、パソコンのフォルダ内のファイルを確認しましょう。拡張子が見えない場合はフォルダの表示メニューで「ファイル名拡張子」を選べば表示されます。

対応している拡張子ではない場合は、フォーマットを「jpg」や「png」などに書き替えてからアップロードしましょう。

ワードプレスで役に立つ画像系プラグイン5選

ワードプレスで役立つ画像系のプラグインは次の5つです。

ワードプレスで画像を扱う際には、プラグインを使うと効率よく作業できます。ワードプレス上で、画像の処理やユーザビリティの高い投稿をできるのがメリットです。

1. EWWW Image Optimizer

EWWW Image Optimizerは、画像を圧縮して軽量化するときに便利なプラグインです。わかりやすさを意識して記事を書いていると、想定以上に画像が増えてしまいます。画像が多い記事は表示に時間がかかり、ユーザーにとってストレスです。

EWWW Image Optimizerを導入し設定すると、新規アップロードの画像がすべて指定した大きさに圧縮します。すでにアップロード済みの画像も一気に圧縮が可能です。容量の軽い画像を使うことで、枚数を減らすことなく読みやすい記事となります。

2. Imsanity

Imsanityは、画像を自動でリサイズするプラグインです。画像をアップロードするときに毎回、指定した大きさに変更します。プラグインを有効化し、ワードプレスに最適な画像の横幅を指定しておけば、縦横比を変えずにリサイズが可能です。

画像ソフトを使用し毎回リサイズする必要がなく、サイズの変更とともに容量の圧縮もします。新規画像だけではなくアップロード済みの画像も一括でリサイズ・圧縮できるのも優れた特徴です。また、PNG画像をまとめてJPG画像への変換もできます。

3. Easy FancyBox

Easy FancyBoxは画像ギャラリーを簡単に作れるプラグインです。記事にはギャラリーのサムネイルが表示されます。サムネイルをクリックすることで見せたい画像を別のウィンドウで表示可能です。記事上に大きな画像を挿入せずに済むため、記事の表示速度に影響が出ません。

別のウィンドウで表示した画像は、左右にある矢印でページをめくるように見られます。プラグインの設定画面上でカラムや表示サイズの指定が可能です。画像だけではなく、動画やPDFもサムネイルでリンクできるため、記事で表現できることが増えます。

4. Pixabay Images

Pixabay Imagesは、写真の素材サイトPixabayの画像をワードプレスの管理画面上で直接選び、挿入できるプラグインです。Pixabayの写真やイラスト素材は、著作権フリーで商用と非商用どちらにも使えます。

記事の投稿画面上の「Pixabay」ボタンをクリックして、画像を検索し、大きさや配置・代替テキストを指定して記事に挿入するのみです。Pixabayから画像をダウンロードしてワードプレスにアップロードする手順がなく、時間が大きく短縮できます。

5. Meta Slider

Meta Sliderは、ワードプレスの記事にスライドショーを作れるプラグインです。複数の画像をドラッグ＆ドロップで追加するだけでスライドショーを挿入できます。

画像の選択画面で、スライダーのサイズ選択、矢印、ナビゲーションの追加も可能です。画像を並べるよりも、大きな画像を表示できるため、情報量が増えるのがメリットです。

まとめ

わかりやすい記事には画像の使用は不可欠です。文字ばかりの記事では、ユーザーが離脱する可能性は否めません。画像を自由に扱えると、伝えられる情報の幅が広がるでしょう。

ワードプレスでは、画像ブロックを使うことで容易に画像を挿入できます。カラムやギャラリーを使用し、思いどおりの表示も可能です。

比較ビスは、多数のWebメディア制作会社の中から自社にぴったりの業者を探せる無料の比較サイトです。必要な情報を入力すれば、全国各地のWebメディア制作会社を比較できます。ワードプレスでサイト制作を考えている方は、ぜひ1度比較ビズを利用してください。

監修者のコメント

tenicom合同会社

代表者　新井田　禎治

鎌倉・藤沢を拠点にWEBに関わる支援を行っているtenicom合同会社の代表。WEBプログラマー、WEBディレクターを経て5年前に起業。現在は神奈川県の中小企業様を中心にWEBまわりを支援中。tenicomでは、「コンテンツの力で、Businessを支援」というキャッチコピーをもとにメディア事業の他、WEBサイト制作を安価に試せるサービスを展開中。

詳しく見る

ワードプレスで画像を入れる方法は簡単ですが、記事にある通り代替テキストを入れ忘れる方も多いかと思います。SEOだけでなく、視覚障害のある人に向けたHTMLの仕様でもあるため、ユーザビリティーを考えると入れたほうがいいでしょう。

また、画像を入れる事で、記事にメリハリがつき、読者が記事を読み進めるストレスが軽減されるため、出来る限り画像を入れていく事が必要です。

画像の配置もどこでも良いわけではなく、ユーザーがスクロールの手をとめて見てくれる確率があがるため、重要な内容の前後に入れるようにしましょう。

なお、画像に関してもしっかり内容に沿ったものにする事も重要です。アイキャッチについてはとても重要なので、出来れば素材のままではなくて、少し加工して目立つようにしたらいいでしょう。

執筆者

比較ビズ編集部では、BtoB向けに様々な業種の発注に役立つ情報を発信。「発注先の選び方を知りたい」「外注する際の費用相場を知りたい」といった疑問を編集部のメンバーが分かりやすく解説しています。