ロリポップでホームページをはじめよう ロリポップでホームページをはじめよう

wordpress 画像挿入完全ガイド! 配置・リンク設定から軽量化のコツまで

「せっかく書いた記事、読み返してみたら文字ばかりでちょっと読みにくいかも」「画像を入れたほうがいいのはわかるけど、どこから追加すればいいの」記事を書きながら、そんなふうに感じたことはないでしょうか。

結論から言うと、WordPressでは画像ブロックを使えばわずか数クリックで記事に画像を挿入できます。さらにalt属性や配置、サイズまで整えれば、記事の読みやすさとSEOの両面でプラスに働くでしょう。

WordPressに画像を挿入する基本手順から、配置・リンク先・サイズの設定方法、複数枚の画像をきれいに並べる方法、そしてよくあるトラブルの対処法までを解説します。

レンタルサーバーでホームページをはじめよう。まずは10日間無料お試し
目次

WordPressに画像を挿入する基本の3ステップ

ロリポップ!レンタルサーバーWordPressに画像を挿入する基本の3ステップ

このセクションでは、WordPressに画像を挿入する際の全体の流れを3つのステップで確認します。細かい操作は解説するので、まずは大まかな流れをつかんでおきましょう。

ステップ1:画像をアップロードする

記事にまだ使われていない新しい画像を使うときは、まずWordPressの管理画面に画像ファイルをアップロードします。編集画面にある「画像ブロック」(記事に画像を配置するための部品)から、パソコン内の画像を選んで直接アップロード可能です。

すでに一度使った画像であれば、アップロードし直す手間は不要でしょう。「メディアライブラリ」という保管場所から選ぶだけで再利用できます。

ステップ2:alt・キャプションなど画像の詳細を設定する

画像をアップロードしたら、alt属性(画像が表示されない場合に代わりに表示される説明文)を入力しておきましょう。視覚に障がいのある方が使う読み上げソフトや、検索エンジンが画像の内容を把握する手がかりにもなります。

加えて、画像の下に説明文を添えたいときはキャプションを設定してください。配置やリンク先、表示サイズもこの段階で調整可能です。

ステップ3:画像の反映を確認する

各種設定が終わったら、あとは記事に反映するだけです。ブロックエディタでは、画像をアップロードまたは選択した時点で、自動的に記事内へ反映されます。改めて「挿入」という操作は不要です。

挿入後も、画像をクリックすると表示されるツールバーから、配置やリンク先をいつでも変更できます。

【ブロックエディタ】画像ブロックで画像を挿入する手順

ロリポップ!レンタルサーバー【ブロックエディタ】画像ブロックで画像を挿入する手順

ここからは、現行のWordPress標準エディタ(ブロックエディタ)を使って、実際に画像を挿入する手順を具体的に見ていきましょう。

ステップ1:画像ブロックを追加する

記事の編集画面で、画像を挿入したい場所にカーソルを合わせます。カーソルの左側に表示される「+」のアイコンをクリックし、ブロック一覧から「画像」を選択してください。

すでに文章を入力した段落の途中に挿入したい場合も、同じ手順で画像ブロックを呼び出せます。

ステップ2:画像をアップロードまたはメディアライブラリから選択する

画像ブロックが追加されると、「アップロード」「メディアライブラリ」「URLから挿入」の3つのボタンが表示されます。新しい画像を使う場合は「アップロード」を選び、パソコン内のファイルを指定しましょう。

過去に使った画像を再利用したいときは「メディアライブラリ」から選択します。画像ファイルを編集画面へ直接ドラッグ&ドロップしてアップロードすることも可能です。

ステップ3:ブロックツールバー・パネルで表示設定をする

画像を挿入すると、画像の上にツールバーが表示されます。ツールバーの「配置」アイコンから左寄せ・中央・右寄せなどを選べるほか、「置換」から画像の差し替えも可能です。

さらに画面右側の設定パネルを開くと、alt属性やキャプション、画像のサイズなど、より詳細な項目を設定できます。各項目の具体的な使い分けは、次の見出しで確認していきましょう。

画像の配置・リンク先・サイズを設定する方法

ロリポップ!レンタルサーバー画像の配置・リンク先・サイズを設定する方法

画像を挿入したあとは、配置・リンク先・サイズの3つを状況に合わせて調整すると、見た目も使い勝手も良くなります。それぞれの選択肢と使い分け方を確認していきましょう。

配置でテキストの回り込みを変える

画像をクリックすると表示されるツールバーの「配置」アイコンから、画像を左寄せ・中央・右寄せに変更できます。左寄せ・右寄せを選ぶと、画像の反対側にテキストが回り込んで表示されるのが特徴です。中央を選んだ場合は回り込みが起こらず、画像だけが独立して配置されます。

使用しているテーマによっては「幅広」「全幅」といった、より広い表示幅を選べる場合もあるでしょう。

リンク先を使い分ける

設定パネルからは、画像をクリックしたときの動作も指定できます。「メディアファイル」を選ぶと、クリック時に元の画像ファイルがそのまま表示される仕組みです。「添付ファイルのページ」は、その画像専用のページへ移動します。

外部サイトや別記事へ誘導したい場合は「カスタムURL」でリンク先を直接指定してください。特にリンクが不要であれば「なし」を選んでおけば、画像をクリックしても反応しません。

表示サイズを選ぶ

画像の表示サイズは「サムネイル」「中」「大」「フルサイズ」から選択できます。WordPress公式ドキュメントによると、これらは初期設定に基づくサイズで、実際の数値は「設定」→「メディア」の画面や使用テーマによって変わる場合があります。本文中に大きく見せたいときは「大」や「フルサイズ」、小さく添える程度なら「サムネイル」を選ぶとよいでしょう。

特にこだわりがなければ、配置は「中央」、リンク先は「なし」を選んでおくと、表示崩れやクリック時の誤動作が少なく扱いやすいはずです。

画像にalt属性(代替テキスト)とキャプションを設定する

ロリポップ!レンタルサーバー画像にalt属性(代替テキスト)とキャプションを設定する

このセクションでは、画像のalt属性とキャプションについて、具体的にどう書けばよいかを解説します。

alt属性の書き方のポイント

alt属性には、画像が何を表しているかが伝わる短い説明文を入れます。たとえば猫の写真であれば「白い猫がソファで眠っている様子」のように、画像の内容がそのまま伝わる文章が適切です。

反対に「画像1」「IMG_1234」のようなファイル名や、内容と無関係な言葉を入れるのは避けましょう。ロゴや装飾目的だけの画像で、内容を読み上げる必要がない場合は、alt属性を空欄のままにしておくのも一つの方法です。空欄にしておくと、スクリーンリーダーがその画像を読み上げの対象から除外してくれます。

キャプションを使うべき場面

キャプションは、画像の下に表示される説明文で、読者に直接見えるのがalt属性との大きな違いです。グラフの補足や、写真の撮影場所・状況を伝えたいときなど、読者に文脈を伝えたい場面で活用するとよいでしょう。単に画像を装飾として使うだけの場合は、無理にキャプションを入れる必要はありません。

複数枚の画像をきれいに並べる方法

ロリポップ!レンタルサーバー複数枚の画像をきれいに並べる方法

複数の画像を記事に使いたいときは、1枚ずつ縦に並べるだけでなく、横並びやまとめて表示する方法もあります。ここでは代表的な2つの方法を紹介します。

横並びで画像を配置する方法

複数の画像を横に並べたいときは「カラムブロック」を使います。空のブロックに「/」と入力すると候補一覧が表示されるので、そこから「カラム」を選択してください(「/columns」まで入力してEnterキーを押しても構いません)。カラムブロックが追加されると、最初に列の分け方(パターン)を選ぶ画面が表示されます。

特にこだわりがなければ、50/50パターンのまま「スキップ」を選んでも構いません。カラム数はサイドバーの設定から最大6カラムまで変更できます。あとは各カラムの「+」から画像ブロックを追加すれば、画像を横に並べられます。

ギャラリーブロックでまとめて表示する方法

まとめて複数枚を並べたいだけなら「ギャラリーブロック」のほうが手軽です。ブロックの追加ボタンをクリックするか、空のブロックに「/」と入力して候補から「ギャラリー」を選択すると追加できます。「/gallery」まで入力してEnterキーを押しても構いません。「アップロード」から新しい画像をまとめて選ぶか、「メディアライブラリ」から複数の画像を選択しましょう。

パソコンからのドラッグ&ドロップにも対応しています。表示するカラム数は1〜8の範囲で調整でき、選べる上限は追加した画像の枚数までです。デザインにこだわりたい場合はカラムブロック、手早く並べたい場合はギャラリーブロックを選ぶとよいでしょう。

挿入した画像を編集する方法

ロリポップ!レンタルサーバー挿入した画像を編集する方法

WordPressには、外部の画像編集ソフトを使わなくても使える、基本的な画像編集機能が備わっています。ここでは、その使い方を紹介します。

メディアライブラリから「画像を編集」を開く

編集したい画像を、メディアライブラリの一覧からクリックして開きます。詳細画面に表示される「画像を編集」ボタンをクリックすると、編集専用の画面が開き、トリミング・サイズ変更・回転・反転といった操作ができるようになります。

トリミング・サイズ変更・回転をする

トリミングをしたいときは、画像をクリックしてドラッグし、切り抜きたい範囲を選択したうえで「トリミング」アイコンをクリックしてください。サイズ変更は、新しいサイズを入力するボックスに数値を入れれば、縦横比を保ったまま縮小できます。ただし拡大には対応していない点に注意しましょう。

回転は時計回り・反時計回りにそれぞれ90度ずつ、反転は上下・左右の切り替えが可能です。編集後に思った仕上がりと違った場合も、「元の画像を復元」ボタンを押せば、変更前の状態に戻せます。

画像が挿入できない・表示されないときの原因と対処法

ロリポップ!レンタルサーバー画像が挿入できない・表示されないときの原因と対処法

いざ画像を挿入しようとしたら、うまくアップロードできなかったという経験がある方も多いのではないでしょうか。ここでは、よくある原因とその対処法を紹介します。

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

サーバー側で設定されているアップロード可能な上限サイズを超えていると、画像が正しくアップロードできません。まずは編集画面の「メディアを追加」画面などに表示される上限サイズを確認しましょう。上限サイズを超える場合は、あらかじめ画像編集ソフトなどでファイルサイズを小さくしてから、改めてアップロードするのが基本的な対処法です。

なお、多くのレンタルサーバーでは、管理画面からアップロード上限自体を変更できる場合があります。たとえばロリポップでは、サーバーのPHP設定画面から上限値を変更する手順が公式マニュアルで案内されています。利用しているサーバー会社の公式マニュアルもあわせて確認してみるとよいでしょう。

対応していないファイル形式を使っている場合

WordPressが標準で扱える画像形式は、JPEG・PNG・GIF・WebPなどです。

WordPress公式の開発者向けドキュメントによると、WebPはWordPress 5.8以降で標準対応した比較的新しい形式のため、使用しているWordPressのバージョンによっては非対応の場合があります。対応していない形式の画像を使おうとすると、アップロード時にエラーが表示されます。該当する場合は、画像編集ソフトなどでJPEGやPNGに変換してからアップロードし直しましょう。

ログイン状態やブラウザ表示が原因の場合

管理画面からログアウトした状態になっていると、アップロード操作自体が反映されないことがあります。一度ログイン状態を確認し、必要であれば再ログインしてください。

また、ブラウザに保存された古いキャッシュが原因で、正常にアップロードできているのに反映されて見えないケースもあります。この場合は、ブラウザのキャッシュを削除するか、別のブラウザで表示を確認してみましょう。

画像を軽くしてサイトへの負荷を抑えるコツ

ロリポップ!レンタルサーバー画像を軽くしてサイトへの負荷を抑えるコツ

高画質のままアップロードした画像は、ファイル容量が大きくなりがちです。ページの読み込みが遅くなる一因にもなりやすいため、事前にひと工夫しておくとよいでしょう。

アップロード前に画像サイズを小さくしておく

スマートフォンや一眼レフカメラで撮影した写真は、記事で使うサイズよりもはるかに大きい解像度になっていることが少なくありません。画像編集ソフトやスマートフォンの標準機能を使い、実際に記事で表示する幅に近いサイズへあらかじめ縮小しておくと、アップロード後のファイル容量を抑えやすくなります。

撮影したままの画像を毎回そのままアップロードするのではなく、記事に使う前に一度サイズを見直す習慣をつけておきましょう。

画像圧縮プラグインを活用する

画像の圧縮を手作業で行うのが手間に感じる場合は、WordPressの機能拡張ツールである圧縮用のプラグインを活用する方法もあります。

たとえばEWWW Image Optimizerというプラグインは、公式サイトの2026年7月時点の情報によると、無料版でも画質を保ったままの圧縮やWebP形式への変換に対応しています。より高い圧縮率や、AVIF形式への変換といった機能を使いたい場合は、有料プランが用意されているプラグインもあります。

プラグインを導入する際は、対応しているWordPressのバージョンや、無料版でどこまでの機能が使えるかを公式ページで確認してから利用するようにしてください。

よくある質問

Q. 画像の推奨サイズはどのくらいですか?

記事に応じた絶対の正解があるわけではありませんが、本文の表示幅に近いサイズにしておくと、画質を保ちながらファイル容量を抑えやすくなります。

WordPress公式ドキュメントによると、画像サイズの「大」の初期上限は1024×1024pxとなっており、ひとつの目安として参考にできます。ただしこの数値は「設定」→「メディア」の画面や使用テーマによって変更されている場合があるため、あくまで初期値として捉えてください。

Q. JPEGとPNG、どちらを使えばいいですか?

写真など色数の多い画像はJPEGが、ロゴやアイコンのような透過処理が必要な画像はPNGが向いています。JPEGは非可逆圧縮(データを一部削って圧縮する方式)のため容量を抑えやすく、PNGは可逆圧縮(画質を保ったまま圧縮する方式)のため、繰り返し保存しても劣化しにくいのが特徴です。

画像の内容や用途に応じて使い分けるとよいでしょう。

Q. アイキャッチ画像と本文中の画像は何が違いますか?

アイキャッチ画像は、記事一覧やSNSでシェアされた際に表示される、記事の顔となる画像です。

編集画面の「アイキャッチ画像」欄から設定し、本文中に挿入する画像ブロックとは別の場所で管理されます。使用しているテーマによっては、アイキャッチ画像が本文の先頭などに自動的に表示される場合もあるため、実際の見え方はテーマの仕様もあわせて確認してみてください。

Q. 挿入した画像を削除するにはどうすればいいですか?

記事から画像を消したいだけであれば、画像ブロックを選択し、ブロックツールバーの「オプション」から削除するか、キーボードで画像ブロックごと削除します。

ただし、記事内の画像ブロックを削除しても、メディアライブラリに保存されている画像データそのものは自動的には削除されません。サーバー容量の整理も兼ねて完全に削除したい場合は、メディアライブラリの画面からあらためて削除しましょう。

まとめ

WordPressでは、画像ブロックを使えば数クリックで記事に画像を挿入でき、alt属性や配置、サイズを整えることで、読みやすさやSEO面の評価にもつながりやすくなります。複数枚の画像はカラムブロックやギャラリーブロックできれいに並べられるほか、トラブル時の対処法や軽量化の工夫を押さえておくと安心です。

アップロード上限などサーバー側の設定に関わる部分は、利用しているレンタルサーバーの公式マニュアルもあわせて確認しておくと、いざというときスムーズに対処できるでしょう。

個人事業主・中小企業のホームページを支える高機能なのに低価格なレンタルサーバー。
WordPressの表示速度が速く、最短60秒でWordPressをスタートできます。
ハイスピードプラン以上ならドメイン2つ目まで無料です。