記事に画像を挿入する方法

WordPressサイトの記事に画像を挿入する方法について説明します。画像をアップロードする前にやっておきたい設定や、アップロードできないときの対処法もご紹介しています。

WordPressで画像ファイルを挿入する

ブログやホームページに画像が掲載されていると、記事の内容が理解しやすいですよね。

Webページ上で画像を表示させるためには、画像ファイルをアップロードしなければなりません。

WordPressの管理画面では、簡単な操作で画像ファイルをアップロードすることができます。アップロードした画像は、使用する「ブロック」によって表示のされ方が異なります。

画像を挿入できるブロック

WordPressの記事編集機能「ブロックエディタ」では、文章や画像などのコンテンツをブロック単位で管理し、組み合わせることによって記事を作ります。60種類以上あるブロックの中で、画像を挿入するのによく使われるのは以下のブロックです。

---

この記事ではWordPressで画像を挿入する方法について学びますが、その前に、次の「画像サイズの設定」を済ませておくと効率的です。

自動生成される画像サイズを設定しておく

WordPressでは、画像ファイルをアップロードすると、異なるサイズの画像ファイルを自動的に生成する機能があります。記事に画像を挿入するときには、これらのサイズの中から選択できる仕組みになっています。

（ ）内は、各サイズの初期値です。これらの数値は、メディア設定画面で変更することができます。よく使う画像のサイズが、あらかじめ分かっている場合に指定しておくと便利です。

記事に画像を挿入する

WordPressで記事に画像を挿入するための基本的な手順は、次のとおりです。

画像を挿入するためのブロックを追加する

投稿（または固定ページ）の編集画面で、画像を挿入するためのブロックを追加します。画像を挿入できるブロックには、画像ブロック、ギャラリーブロック、メディアとテキストブロックなどがあります。

画像をアップロードまたは選択する

画像を挿入できるブロックを追加すると、以下のような画面が表示されます。

アップロード	パソコンなどに保存されている画像ファイルを転送できる
メディアライブラリ	すでにアップロードしている画像ファイルから選択できる
URL から挿入	他サイトに掲載されている画像ファイルのURLを指定できる

今回は「初めて画像を挿入する」ことを想定しているので、アップロードをクリックしました。下の画面で画像を選択して、開くをクリックします。

画像の設定をする

記事に挿入した画像ファイルは、［ブロックツールバー］や［パネル］を使ってさまざまな設定をすることができます。また、［キャプション］を追加することで、画像ファイルの簡単な説明文を表示することができます。

ブロックツールバーを使った設定

ブロックツールバーは、各ブロックの上部（またはブロックエディタ画面左上）に表示されます。下のように、ブロックによって設定できる内容が異なります。

パネルを使った設定

パネルも同様に、ブロックによって設定できる内容が異なります。

キャプションの入力

画像ブロックやギャラリーブロックに挿入した画像ファイルは、その下部をクリックすると「キャプション」を入力することができます。画像について説明を表示させたい場合に入力してください。

文章の途中に画像を挿入する

「段落」や「見出し」などテキスト系のブロックや画像のキャプションでは、「インライン画像」機能を使って、文章の途中に画像を挿入することができます。

詳しい手順は、文章中に画像を挿入する｜段落ブロックの使い方を参考にしてください。

画像をアップロードできない理由と解決策

WordPressで画像ファイルをアップロードできない理由はいくつか考えられますが、ここでは初心者さんにありがちな理由と、その解決策についてご紹介します。

画像ファイルのサイズが大きすぎる

アップロードできる画像ファイルのサイズには、上限があります。サイズの上限を確認するには、管理画面［メディア］→［新規追加］を開きます。

画像ファイルのサイズが原因でアップロードできない場合の解決方法として、次の2つをご紹介します。

解決策① 画像ファイルを圧縮する

画像ファイルのデータ量を小さくすることを、画像を「圧縮」するといいます。圧縮すると、画質をほとんど劣化させることなくサイズを小さくすることができます。

画像を圧縮するには、

• TinyPNGなどの無料オンラインツール
• WordPressのプラグイン

を利用する方法があります。おすすめのプラグインについては、のちほどご紹介します。

解決策② サイズの上限を変更する

サイズ上限の変更は、サーバーの管理画面で設定します。

当サイトでも使用している「エックスサーバー」の場合、サーバーパネルのphp.ini設定画面を開き、次の値を変更します。

画像ファイル形式が対応していない

WordPress管理画面からアップロードできる画像ファイルの形式（拡張子）は、セキュリティの観点から、以下のように制限されています。

上記以外の形式の画像ファイルをアップロードしようとすると、エラーになります。

画像ファイル形式が原因でアップロードできない場合の解決方法として、次の2つをご紹介します。

解決策① ファイル形式を変換する

Windowsの「ペイント」のような画像編集ソフトなどを利用して、アップロード可能なファイル形式に変更して保存しなおします。

解決策② プラグインを利用する

「WP Add Mime Types」プラグインを利用すると、アップロード可能なファイル形式を追加することができます。

管理画面からログアウトしてしまっている

何らかの理由で、WordPress管理画面に正常にログインできていない可能性があります。再度ログインを試したり、インターネット接続が切断されていないか確認してみてください。

画像の挿入に便利なプラグイン

画像をよく使うブログ・WebサイトをWordPressで運用する場合は、次にご紹介するプラグインの利用を検討してみてください。

画像を圧縮・軽量化するプラグイン

この記事の「画像をアップロードできない理由と解決策」でも書きましたが、画像ファイルは圧縮することによって軽量化され、ページ表示速度の向上につながります。

「EWWW Image Optimizer」プラグインを使うと、WordPress管理画面からアップロードした画像ファイルを自動的に圧縮・軽量化することができます。

スライドショーを作成できるプラグイン

スライドショーを設置すると、複数の画像を1か所にまとめて表示し、クリック操作や時間の経過によって画像を切り替えることができます。

「Meta Slider」プラグインを使うと、簡単にスライドショーを作成することができます。デザインや機能が豊富な、人気のプラグインです。

画像を拡大ポップアップ表示できるプラグイン

WordPressの標準機能では、画像を拡大表示した後に再び記事を読むために、その都度ブラウザの［戻る］を押さなければなりません。訪問者にとって、少々手間ですよね。

「Easy FancyBox」プラグインを使えば、記事内の画像をクリックしたときに拡大ポップアップ表示させることができ、かつ簡単に拡大画像を閉じることが可能になります。

まとめ

WordPressの管理画面では、簡単な操作で画像ファイルをアップロードすることができます。画像ファイルをアップロードすると、異なるサイズの画像ファイルを自動的に生成する機能があります。事前に自動生成される画像サイズを設定しておくと、効率的です。

画像を挿入できるブロックはいくつかの種類があり、それぞれ画像の表示のされ方や、設定・編集できる内容が異なります。記事における画像の役割に応じて、適切なブロックを選択することが必要です。

画像ファイルは、テキストに比べてデータ量が大きいため、ページ表示速度に影響します。画像は、オンラインツールやプラグインによって圧縮し、軽量化したうえで記事に掲載するのがおすすめです。