「WordPressでブログを始めたけど、記事に画像をどうやって入れたらいいんだろう…」「画像のせいでサイトが重くなるって聞いたけど、どうすれば?」そんな悩みを抱えていませんか?WordPressサイトを500件以上制作し、多くの方のサイト活用をお手伝いしてきた経験から言うと、画像の使い方は記事の分かりやすさと読者の満足度を大きく左右する重要なポイントです。
この記事では、WordPressの専門家である私が、画像の基本的な挿入方法から、SEOに強くサイトも軽くなる最適な設定方法、さらには「画像がアップロードできない」といったトラブルの解決策まで、初心者の方にも分かりやすく徹底的に解説します。この記事を最後まで読めば、あなたは自信を持って効果的に画像を扱えるようになり、読者にとって魅力的で価値あるコンテンツを作成できるようになるでしょう。
WordPressでの画像挿入の基本|まずはここから押さえよう
WordPressで記事を作成する上で、画像の挿入は欠かせない要素です。文章だけでは伝わりにくい情報も、画像を適切に使うことで、読者の理解を深め、記事全体の魅力を高めることができます。まずは、最も基本的な画像の挿入方法から確実にマスターしていきましょう。
現在の主流である「ブロックエディタ」での操作方法を中心に解説します。
ブロックエディタでの画像挿入【3つの方法】
ブロックエディタでは、主に3つの方法で画像を挿入できます。状況に応じて最適な方法を選べるように、それぞれの手順を覚えておきましょう。
パソコンから画像をアップロードして挿入する
最も一般的で直感的な方法です。記事に新しく使いたい画像がパソコン内に保存されている場合、この方法でアップロードと挿入を同時に行います。
- 記事編集画面で、画像を挿入したい場所にカーソルを合わせます。
- ブロックの追加ボタン「+」をクリックし、「画像」ブロックを選択します。
- 表示された画像ブロック内の「アップロード」ボタンをクリックします。
- パソコンのファイル選択画面が開くので、挿入したい画像ファイルを選んで「開く」をクリックします。
これで、選択した画像がWordPressにアップロードされ、記事内に挿入されます。ドラッグ&ドロップでも同様の操作が可能で、ファイルを直接ブロック内にドロップするだけで簡単に挿入できます。
メディアライブラリから既存の画像を挿入する
すでにWordPressにアップロード済みの画像を再利用する場合に便利な方法です。過去の記事で使った画像や、あらかじめアップロードしておいた画像を簡単に呼び出せます。
- 同様に「画像」ブロックを追加します。
- 「メディアライブラリ」ボタンをクリックします。
- メディアライブラリの画面が表示されるので、「メディアライブラリ」タブから挿入したい画像を選択します。
- 右下の「選択」ボタンをクリックすると、画像が記事に挿入されます。
この方法を使えば、同じ画像を何度もアップロードする必要がなく、サーバーの容量節約にも繋がります。
URLを指定して画像を挿入する
他のウェブサイトで公開されている画像など、外部の画像をURLで直接指定して表示させる方法です。ただし、この方法には注意が必要です。
- 「画像」ブロックを追加し、ツールバーの「URLから挿入」オプションを選択します。
- 画像のURLを入力する欄が表示されるので、そこに画像のURLを貼り付けて、適用ボタン(矢印アイコン)をクリックします。
注意点: 他人のサイトにある画像を無断で使用することは、著作権の侵害にあたる可能性が非常に高いです。また、リンク元のサイトで画像が削除されると、自分の記事でも表示されなくなってしまいます。原則として、自分で用意した画像か、利用が許可されている画像以外では、この方法は使用しないようにしましょう。
【旧エディタ向け】クラシックエディタでの画像挿入方法
古いバージョンのWordPressや、テーマによっては現在もクラシックエディタを利用している場合があります。その際の画像挿入方法は以下の通りです。
- 画像を挿入したい箇所にカーソルを合わせます。
- エディタ上部にある「メディアを追加」ボタンをクリックします。
- メディアライブラリの画面が開きます。新しい画像をアップロードする場合は「ファイルをアップロード」タブから、既存の画像を使う場合は「メディアライブラリ」タブから画像を選択します。
- 画像を選択した後、右側の「添付ファイルの詳細」で配置やリンク先、サイズなどを設定し、「投稿に挿入」ボタンをクリックします。
基本的な流れはブロックエディタと似ていますが、インターフェースが異なる点を覚えておきましょう。
WordPressに画像を挿入した後の基本設定
画像を挿入しただけでは、まだ完了ではありません。読者にとって見やすいレイアウトに整えるための設定を行いましょう。これらの設定は、ブロックエディタの右側サイドバーや、ブロック上部に表示されるツールバーから簡単に行えます。
画像の配置(中央・左寄せ・右寄せ)を変更する方法
挿入した画像の配置は、記事の読みやすさに大きく影響します。画像を選択すると上部に表示されるツールバーから、配置を変更できます。
アイコンをクリックするだけで、「左寄せ」「中央揃え」「右寄せ」「幅広(テーマが対応している場合)」「全幅(テーマが対応している場合)」といった配置に切り替えることが可能です。本文とのバランスを考え、最も自然に見える配置を選びましょう。
画像のサイズを変更する3つの方法
画像のサイズが大きすぎたり小さすぎたりすると、レイアウトが崩れたり、内容が伝わりにくくなったりします。適切なサイズに調整しましょう。
あらかじめ用意されたサイズから選ぶ
右側のサイドバーにある「画像サイズ」の項目で、「サムネイル」「中」「大」「フルサイズ」といった、WordPressが自動で生成したサイズの中から選べます。手軽にサイズを変更したい場合に便利です。
ピクセル単位で細かく指定する
より細かくサイズを調整したい場合は、「画像の寸法」に直接「幅」と「高さ」の数値をピクセル単位で入力します。片方の数値を入力すれば、もう片方は画像の縦横比を維持したまま自動で調整されます。
パーセンテージで指定する
ブロックツールバーのサイズ変更オプションや、サイドバーのパーセンテージ指定ボタン(25%, 50%, 75%, 100%)を使えば、元の画像サイズに対する割合で大きさを変更できます。レスポンシブデザインとの相性も良い方法です。
画像にリンクを設定する方法
画像自体にリンクを設定し、クリックしたら別のページに遷移させることができます。
- 画像ブロックを選択します。
- 上部のツールバーにあるリンクアイコン(鎖のマーク)をクリックします。
- URLを入力する欄が表示されるので、リンク先のURLを貼り付けます。
- 新しいタブで開くかどうかも設定できます。読者がサイトから離脱しないよう、外部リンクの場合は「新しいタブで開く」をオンにするのがおすすめです。
キャプションの追加とスタイルの変更
画像の下に説明文(キャプション)を追加することができます。写真のクレジット表記や、画像内容の補足説明を入れたいときに便利です。
画像ブロックの下部にある「キャプションを追加」と書かれた部分をクリックし、テキストを入力するだけです。また、右側サイドバーの「スタイル」タブからは、キャプションの文字色や背景色などを変更することも可能です(テーマによります)。
【SEO対策】検索エンジンに評価されるWordPress画像挿入のポイント
画像を挿入する際は、ただ表示させるだけでなく、SEO(検索エンジン最適化)を意識することが非常に重要です。適切な設定を行うことで、Googleなどの検索エンジンが画像の内容を理解しやすくなり、画像検索からの流入や、記事自体の評価向上に繋がります。
ファイル名は分かりやすい半角英数字にする
画像をアップロードする前に、ファイル名を変更しておくことを強く推奨します。デジタルカメラやスマートフォンで撮影した画像は、「IMG_1234.jpg」のような無意味な文字列になっていることがほとんどです。
これを、画像の内容が具体的にわかるような、半角英数字の単語をハイフンでつないだ形式(例: wordpress-image-insert.jpg
)に変更しましょう。これにより、検索エンジンが画像の内容を推測する手助けとなります。日本語のファイル名は文字化けなどのトラブルの原因になる可能性があるため、避けてください。
alt(代替テキスト)は必ず設定する|SEO効果と設定方法
alt
(代替テキスト)は、画像SEOにおいて最も重要な要素の一つです。
alt(代替テキスト)とは?
alt(代替テキスト)は、何らかの理由で画像が表示されなかった場合に、代わりに表示されるテキストのことです。また、目の不自由な方がスクリーンリーダー(音声読み上げソフト)を使用する際に、その画像が何であるかを伝える役割も担います。
そしてSEOの観点では、検索エンジンに画像の内容を正確に伝えるための非常に重要な手がかりとなります。
SEOに効果的なalt(代替テキスト)の書き方
altは、画像ブロックを選択し、右側サイドバーの「代替テキスト」欄に入力します。
- 具体的に記述する: 「画像」のような曖昧な言葉ではなく、「WordPressの画像ブロックでメディアライブラリを選択しているスクリーンショット」のように、画像の内容を具体的に説明します。
- キーワードを意識する: 関連するキーワードを不自然にならない程度に含めると効果的です。ただし、キーワードを詰め込みすぎる「キーワードスタッフィング」は逆効果なのでやめましょう。
- 簡潔にする: 長すぎず、簡潔に分かりやすく記述します。
画像のファイルサイズを圧縮してサイトを高速化する
高画質な画像はファイルサイズが大きくなりがちで、これがサイトの表示速度を低下させる主な原因となります。サイトの表示速度は、ユーザー体験だけでなく、SEOの評価にも直接影響する重要な要素です。
なぜ画像圧縮が必要なのか?
ページの読み込みが3秒以上かかると、多くのユーザーは離脱してしまうと言われています。重い画像を多用すると、この表示速度が著しく悪化し、せっかく訪れてくれた読者を逃してしまうことになります。Googleもページの表示速度をランキング要因の一つとして明言しているため、画像圧縮は必須の対策と言えるでしょう。
おすすめの画像圧縮方法・プラグイン
画質をほとんど劣化させずにファイルサイズを小さくする「圧縮」を行いましょう。
- アップロード前に圧縮する:
TinyPNG
などのオンライン圧縮ツールを使えば、ブラウザ上で簡単に画像を圧縮できます。 - プラグインで自動圧縮する:
EWWW Image Optimizer
やSmush
といったプラグインを導入すれば、画像をアップロードする際に自動で圧縮してくれます。過去にアップロードした画像も一括で圧縮できるため、非常に便利です。
著作権を侵害しない画像の選び方
記事で使用する画像は、必ず著作権をクリアしたものを使用してください。他人のブログや検索結果で見つけた画像を無断で使用すると、著作権侵害となり、法的なトラブルに発展する可能性があります。
安心して使えるのは、自分で撮影・作成した画像、もしくは利用規約の範囲内で自由に使えるフリー素材サイトの画像です。PIXTAやAdobe Stockなどの高品質なフリー素材サイトを活用しましょう。
WordPressの画像挿入をもっと便利にする応用テクニック
基本的な操作に慣れたら、さらに表現の幅を広げる応用テクニックも活用してみましょう。これらを使いこなすことで、より読者の目を引き、分かりやすい記事を作成できます。
複数の画像を並べて表示!ギャラリーブロックの使い方
複数の画像を並べてスタイリッシュに見せたい場合は、「ギャラリー」ブロックが便利です。手順を追って説明する場合や、商品のカラーバリエーションを見せる際などに効果的です。
「+」ボタンから「ギャラリー」ブロックを選択し、複数の画像をアップロードまたはメディアライブラリから選択するだけで、綺麗なグリッドレイアウトで画像を表示できます。カラム数の調整や、画像クリック時のリンク先(メディアファイルまたは添付ファイルのページ)も設定可能です。
テキストと画像を重ねる!カバーブロックの使い方
アイキャッチ画像のように、画像の上にテキストを重ねて表示させたい場合は、「カバー」ブロックを使いましょう。章の扉ページや、読者の注意を引きたいメッセージを強調するのに最適です。
「カバー」ブロックを追加して背景画像を選択し、表示されるテキストエリアに見出しや段落を入力します。背景画像の不透明度(オーバーレイ)を調整して、文字を読みやすくする工夫も可能です。
画像の回り込みでプロのようなレイアウトを実現する
文章の途中に画像を挿入し、その画像の横にテキストを回り込ませることで、雑誌のような洗練されたレイアウトを作成できます。
画像ブロックを選択し、ツールバーの配置オプションから「左寄せ」または「右寄せ」を選択すると、後続のテキストが自動的に画像の横に回り込みます。ただし、モバイル表示では回り込みが解除されて縦並びになることが多いため、パソコンとモバイルの両方で表示を確認することが大切です。
画像の遅延読み込み(Lazy Load)で体感速度をアップする
遅延読み込み(Lazy Load)とは、ページを開いた瞬間には全ての画像を読み込まず、画面がスクロールされてその画像が表示される直前になってから読み込みを開始する技術です。
これにより、ページ全体の初期読み込み時間が短縮され、ユーザーが感じる「表示速度」が向上します。WordPressのバージョン5.5以降では、この遅延読み込みが標準で有効になっています。特別な設定は不要ですが、サイトの高速化に貢献する重要な機能であることを知っておきましょう。
【困ったときに】WordPressの画像挿入でよくあるトラブルと解決策
WordPressを使っていると、稀に画像がうまく挿入できないトラブルに見舞われることがあります。500件以上のサイト制作に携わってきた経験上、原因は限られていることが多いです。慌てずに以下の点を確認してみましょう。
WordPressに画像をアップロードできない
「アップロードできませんでした」というエラーが表示される場合、主に以下の3つの原因が考えられます。
ファイルサイズが上限を超えている
レンタルサーバーによっては、一度にアップロードできるファイルの最大サイズが設定されています。高解像度の大きな画像をアップロードしようとすると、この上限に引っかかってしまうことがあります。事前に画像を圧縮してファイルサイズを小さくするか、サーバーの設定を変更(上級者向け)することで解決します。
ファイルの種類(拡張子)が対応していない
WordPressが標準で対応している画像形式は、主にjpeg
png
gif
webp
などです。svg
やbmp
といった特殊な形式のファイルは、そのままではアップロードできない場合があります。画像を一般的な形式に変換してから再度試してみてください。
ファイルのアクセス権(パーミッション)に問題がある
サーバー上のアップロード用フォルダ(wp-content/uploads
)の書き込み権限が正しく設定されていないと、画像を保存できずにエラーとなります。これはサーバー側の設定の問題であるため、利用しているレンタルサーバーのサポートに問い合わせるか、専門家に相談することをおすすめします。
挿入した画像がぼやける・画質が荒い
アップロードした画像が、なぜかぼやけて表示されることがあります。これは、表示したいサイズよりも小さい画像を無理に拡大表示しているのが原因であることがほとんどです。
例えば、幅800pxで表示したい場所に、幅400pxの画像を指定すると、画像が引き伸ばされて画質が劣化します。記事のコンテンツ幅を確認し、表示させたいサイズ以上の大きさの元画像を用意するようにしましょう。
WordPressの画像がメディアライブラリに表示されない
アップロードしたはずの画像がメディアライブラリの一覧から消えてしまう、または表示されないというケースもあります。これは、プラグインの競合や、サーバーのキャッシュが原因で発生することがあります。
まずは、ブラウザのキャッシュをクリアしてみましょう。それでも解決しない場合は、最近追加したプラグインを一時的に停止してみて、問題が解消されるかを確認する「プラグインの競合チェック」が有効です。
WordPressの画像挿入に関するよくある質問(FAQ)
ここでは、クライアント様からよくいただく質問とその回答をまとめました。
Q. alt(代替テキスト)とキャプションの違いは何ですか?
A. **alt(代替テキスト)**は、画像が表示されない場合に代わりに表示され、検索エンジンやスクリーンリーダーに画像内容を伝える「裏方の情報」です。一方、キャプションは、画像のすぐ下に常に表示される「表側の説明文」です。写真の出典元を示したり、補足情報を加えたりするのに使います。SEOやアクセシビリティのためにはaltが必須、補足説明が必要な場合にキャプションを使う、と覚えましょう。
Q. 記事ごとに最適な画像のサイズはありますか?
A. 一概には言えませんが、基準となるのは「記事のコンテンツ幅」です。多くのWordPressテーマでは、記事本文が表示されるエリアの幅は680px〜800px程度に設定されています。そのため、記事のメインビジュアルとして使う画像の横幅は、**最低でもそのコンテンツ幅と同じか、少し大きいサイズ(例: 1200px程度)**を用意しておくと、画質の劣化なく綺麗に表示できます。サイズが大きすぎると表示速度に影響するため、適切なサイズにリサイズした上で圧縮するのが理想的です。
Q. 無料で使えるおすすめの画像素材サイトはありますか?
A. はい、商用利用も可能で高品質な画像が手に入るサイトがいくつかあります。私がよくクライアント様におすすめするのは以下のサイトです。
- Unsplash: おしゃれでアーティスティックな写真が豊富です。
- Pixabay: 写真、イラスト、ベクター画像まで幅広く揃っています。
- Pexels: 動画素材も手に入るのが特徴です。 これらのサイトを利用する際は、念のため各サイトの利用規約を一度確認してから使うようにしてください。
まとめ:WordPressの画像を効果的に使って、読者の心をつかむサイトへ
今回は、WordPressで画像を挿入する方法について、基本的な操作からSEOを意識した応用テクニック、トラブルシューティングまで網羅的に解説しました。画像を効果的に使うことは、単に記事を彩るだけでなく、読者の理解を助け、内容の信頼性を高め、結果として検索エンジンからの評価を向上させることにも繋がります。
この記事で紹介した一つ一つのポイント、特に「ファイル名」「alt設定」「画像圧縮」は、地味ながらも非常に重要な施策です。ぜひ、今後の記事作成で実践してみてください。
もし、「WordPressの操作がやっぱり難しい」「自分だけではサイトを最大限に活用できているか不安…」と感じている方がいらっしゃいましたら、ぜひ一度ご相談ください。私はこれまで500件以上のWordPressサイト制作に携わり、多くの方がご自身のビジネスで成果を出せるようサポートしてまいりました。あなたのサイトが持つ可能性を最大限に引き出すお手伝いをさせていただきます。