【徹底解説】WordPressの記事に画像を挿入する方法!初心者向け

画像によって読者に伝えられる情報は、文字の7倍以上と言われているように、美味しい焼肉を文字で説明するより、美味しそうな画像で見せた方が伝わりますよね。

ブログでは画像の役割は非常に大きく、文字で表現すると長々とした説明になってしまいます。

また、文字だけではうまくシズル感が伝わりません。そのため、伝えたいことをきちんと伝えるためには、文章がより伝えられるような写真を使うことが必要です。

WordPressであれば、画像をアップロードし画像を投稿することが簡単にできます。

今回の記事では、WordPressで画像をアップロードして投稿する方法についてご紹介します。

ブロックエディターでの説明になりますが、基本的にはクラシックエディターでも流れは一緒なので、問題ありません。

この記事を最後まで読むことで、WordPressでの画像投稿はマスターできて、ブログで伝えられる幅グッと広がります。

ぜひ参考にしてくださいね。

記事に画像をアップロードする方法(編集、詳細の入力)

記事に画像をアップロードした後に、編集や詳細の入力ができるので、その方法についてご紹介していきます。

画像をアップロードする方法

①ファイルを選択してアップロード

1. メディアを選択して、「新規追加」を選びます。その後、「ファイルを選択」をクリックします。

2. アップロードしたいファイルを選択して完了です。

②ドラック&ドロップでアップロード

画像の投稿画面は①の場所と同じです。投稿方法は選びたい画像を選択して、ドラック&ドロップでアップロード枠に持っていきます。

その後、アップロードが始まるので、問題なければ完了です。

画像の編集

アップロードした画像はWordPress内で編集することができます。編集と言ってもサイズを変更したり、トリミング程度になりますが、知っておくと非常に役立つ操作です。

画像がサイズオーバーだと、アップロードできないので、その場合によく使います。

1. メディア→「ライブラリー」を選択して、編集したい画像を選択します。

2. 画像編集を選択します。

3. 操作したいアクションを選択します。

①トリミングをしたい場合、切り抜きを選択します。

トリミングとは、画像の一部だけを使いたい場合に、特定の範囲以外を切り取り作業を言います。

1.「切り抜き」を選択すると、範囲を選ぶことができるので、ドラックして範囲を指定します。

2. 問題なければ、もう一度「切り抜き」を選択して保存をクリックします。問題なければ完了です。

元に戻したい場合は、保存をクリックする前に「元に戻す」を選択すれば、最初に画像に戻ります。

②縮尺変更の方法

1. 縮尺を変更する場合は、新規サイズの枠内の数字を変更します。元のサイズ:2560 × 1646が画像がアップロードされたときのサイズです。

2. 指定のサイズを入力し、縮尺変更を選択したら完了です。

文字入力の説明

WordPressには画像に名前をつけられたり、説明を入れることで、画像のイメージを膨らませたりすることができます。
特に設定する必要もないですが、SEO対策時に必要になるので、この機会に役割をおさえておきましょう。

代替テキスト画像に名前をつけることで、Google検索に引っかかるようになります。SEO対策をする場合は、大切な部分になりますのでしっかり設定するようにしましょう。
タイトル検索結果にそこまで影響はありませんが、WordPress内で画像検索する際に必要になります。作業効率のためにも入力しておいた方がいいでしょう。
キャプション挿入した画像を文字で表現するときに使います。良質な画像を入れたら、文字で補足するとイメージが膨らむのでテクニックとして使っていきましょう。
説明説明文になります。あまり使わないかもです。

画像の代替テキストやキャプションに関して、「別記事」で詳しい設定の仕方を説明していますので、参考にしてください。

画像を投稿する方法

ブロックを使用して挿入するのが、一番簡単なので、画像ブロックの使い方からみていきましょう。

1. ブロック選択から「画像」→「メディアライブラリ」を選択します。

2. 「メディアライブラリ」タグから挿入したい画像を選択し、右下の選択をクリックすると、画像が投稿に挿入されます。

3. 投稿された画像を選択し、「歯車マーク」をクリックすると、右側に編集操作ができるバーが表示されます。ブロックタブを選択して、画像サイズを選びましょう。

画像サイズは元々の画像サイズに左右されるので、表示させたい方法に応じて変更してくださいね。

意外とよく使うのが、文章と画像の横並び表示。ブロックを使えば、簡単に表示可能なので、ご紹介します。

文章と画像を横並びで表示させる方法

1. ブロックを選択から「メディアとテキスト」を選択します。そして、挿入したい画像を左側で選択し、右側で文章を記入します。

2. 挿入した画像と文章の並びは、赤枠で囲ってある部分で変更することができます。右側:画像 | 文章、左側:文章 | 画像 となっているので、必要に応じて変更しましょう。

画像をアップロードできない理由

原因として3つ考えられます。

画像サイズが大きすぎる

対処方法:画像ファイルサイズを落とすためには、画像を圧縮する、もしくはトリミングをします。
Macであれば、画像をクリックすれば編集できますし、Windowsであれば、ペイントで編集しましょう。

対応していない画像ファイルを追加しようしている

対処方法:画像ファイル形式でよく使われるのは、jpg,pngです。それ以外ではエラーの原因になるので、挿入しないようにしましょう。よくあるのが、svgやaiでそのままアップロードしようとすることです。
こうしたファイル形式のものをメディアライブラリに追加したい場合は、画像として書き出してからアップロードしてくださいね。

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

対処方法:閲覧履歴を途中で消したり、何らかの動作によって急に管理画面からログアウトされる場合があります。エラーが起きたら、管理画面にログインしているか確認してみましょう。

画像挿入で知っておきたい便利方法

画像ファイルは大きすぎると、表示スピードが遅くなる原因となって、Googleの評価に悪影響を与えかねません。

そのため、アップロードする前に画像ファイルを小さくてから、追加するのが得策です。そこでオススメしたいのが、

プラグイン「EWWW Image Optimizer」を使用

プラグイン「EWWW Image Optimizer」は画像品質を劣化させずに、画像サイズを削減してくれる優れたプラグインです。使用方法について「別記事」で詳しく解説していますので、参考にしてくださいね。

Webサービス「Tinypng」を使って対応

Tinypng」を使用すれば、画像サイズを圧縮することが可能です。上限は5MB(1画像)で20画像まで一気圧縮できるので、試してみてくださいね。

まとめ

画像を投稿する方法についてご紹介しました。
画像を投稿するまでの流れについて、もう一度整理すると、

1.画像をアップロード
2.ブロックを使って画像を投稿
3.表示方法によってカスタマイズ

となります。画像を効果的に使えば、記事の質を高めることができるので、ぜひ頑張って画像を効率よく使ってみてくださいね。