分かりやすく解説！WordPressの記事に画像を挿入する方法

WordPress を使用することで初心者でも簡単に見映えのよいコンテンツを作成することができる。そして読者の理解を深めてコンテンツに満足してもらうためにも、画像は欠かせないものだ。

今回は、画像の挿入から各種設定まで一つひとつ分かりやすく解説していく。手順通りに進めてもらえば簡単に設定することが可能だ。まずは、記事に画像を挿入する方法から見ていこう。

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

ここでは記事に画像を挿入する方法を紹介する。手順通りに進めていけば簡単にアップロードすることが可能だ。

１−１．画像をアップロードする

画像をアップロードする方法は2つある。
①ファイルを選択してアップロードする方法
②ファイルをドラッグ&ドロップでアップロードする方法
どちらも簡単だが、個人的にはファイル選択がやりやすいのでオススメだ。
まずは、ファイルを選択してアップロードする方法を紹介する。

ファイルを選択してアップロードする方法

管理画面にログインして左メニューの「投稿」より新規投稿画面にいこう。そして、下図のように画像を挿入したい箇所をクリックする。

次に「メディアを追加」をクリックしよう。

すると、メディアを追加する画面が表示されるので「ファイルを選択」をクリックする。

画像が保存されているフォルダーに移行するので、挿入したい写真を選択して「開く」を押す。

すると、WordPressの画面に切り替わる。

ファイルをドラッグ&ドロップでアップロードする方法

次に、ファイルをドラッグ&ドロップでアップロードする方法を紹介する。
先ほどのメディア挿入画面にいく。

挿入したい画像ファイルをメディアライブラリの画面上にドラッグ＆ドロップする。

アップロード後、こちらの画面に切り替わる。

１−２．代替テキストを入力する

続いてメディアライブラリ画面の右側にある代替テキストを入力する。その他の項目は特に重要ではないが、念のため解説しておこう

タイトル	ここでつけたタイトルは、グーグル画像の検索結果に表示されるようになる。
キャプション	挿入した画像の下部にテキストを表示したい時に使う。
代替テキスト	Webサイトにある画像が何らかの原因で表示されなかった時や視覚障害者が音声ブラウザを使用する時に代わりに表示してくれるテキストのこと。 また、検索エンジンは完璧に内容を把握することができない。そのため、代替テキストから画像の内容を判断する。
説明	画像の管理用に説明文を入力する。

 

代替テキストは、検索エンジンの評価の対象のひとつとなるため、SEO対策としてもここは忘れずに設定しておこう。徹底して SEO 効果を上げる画像の設定については『WEBライティングとは』にある「５−２．画像の最適化」を読んで実践していただきたい。

１−３．表示内容を設定する

ここでは挿入する画像の表示位置やサイズを設定することができる。コンテンツ上の画像の見え方を設定する大事なところなので一つひとつ解説しよう。

配置

配置の設定をする。
(1)左寄せ、(2)中央揃い、(3)右寄せ、(4)なし
この4つから選択できる。

配置したい場所を選択しよう。特にこだわりがない場合は「なし」のままで良い。

リンク先

リンク先の設定をする
(1)カスタムURL、(2)なし、(3)メディアファアイル、(4) 添付ファイルのページ
この４つから選んで設定できる。

画像をクリックした際に指定のURLへ案内したい場合は「カスタムURL」
URLで案内しない場合は「なし」を選択しよう。
一応、各項目の解説をする。

カスタムURL
画像をクリックすると指定したカスタムリンクURLに移動するように設定ができる。

メディアファイル
クリックした際に画像が大きく表示される。

添付ファイルのページ
アップロード時に自動で専用ページがひとつ生成される。
通常のブログなどではこれを選択する必要がない。

サイズ

サムネイル、中、フルサイズ
この3つの中から選ぶことが可能だ。

任意のサイズを選ぼう。

１−４．画像を挿入する

設定が完了したら画面右下にある「投稿に挿入」ボタンをクリックしよう。

すると図のように投稿画面に画像が挿入される。管理画面とブラウザの見え方は異なるため、必ずブラウザでも確認しよう。
管理画面の画像

ブラウザで見たときの画像

これで画像を挿入する方法は終了だ。

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

トリミングとは画像の不要な部分を削除する編集方法だ。ここでは、WordPress の機能を使って簡単にできる方法を紹介する。

2−１．画像の編集画面にアクセスする

メディアを追加でメディアライブラリーにいき、編集したい画像をクリックする。
次に、「画像を編集」をクリックする。

２−２．画像をトリミングする

トリミングでは一番左の赤枠の部分を使用する。

 

編集画面で使用するツールを下表でまとめたので実際に操作する時に確認しよう。

アイコン	ツール名	用途
	トリミング	画像の切り抜きができる。対象を中心にして、余分な箇所を削除したいときに使用する。
	反時計回りに回転	画像の向きを左回りに回転する時使用する。画像の縦向き、横向きを変更したい時にしようする。
	時計回りに回転	画像の向きを右回りに回転する時使用する。画像の縦向き、横向きを変更したい時にしようする。
	垂直方向に反転	画像を垂直方向に回転させたいときに使用する。
	水平方向に反転	画像を水平方向に回転させたいときに使用する。
	取り消し	１つ前の編集に戻って現在の編集状況を破棄する時に使用する。
	やり直し	１度「取り消し」をして編集していたが、やっぱり取り止めて元に戻す時に使用する。

まず、画像上の１点をクリックし、ドラッグしたまま右下方向へカーソルを移動させよう。すると白い点線枠が表示される。

この枠の外側（薄いダーク色の部分）が不要な部分として削除される。ここで、点線枠を調整するには

• カーソル
• 縦横比
• ピクセル数

の３つの方法がある。それぞれ解説していこう。

選択範囲をカーソルで調整する

カーソルで枠の選択範囲を調整したいときは、図の◯枠のポイントをドラッグしたまま移動しよう。Shift キーを押したまま四つ角をドラッグすると、縦横比を保った調整することも出来る。

選択範囲を縦横比で調整する

縦横比を保ったまま枠の選択範囲を調整したいときは、画面右側の「縦横比」を使うとできる。

正方形なら「1:1」。
ハイビジョン画面なら「16:9」。
従来のパソコン画面サイズである「4:3」。
なじみ深く昔ながらのフィルムサイズとなる「3:2」などがある。
自分のサイトに合った画像サイズに調整しよう。

選択範囲をピクセル数で調整する

もちろんピクセル数を入力して枠の選択範囲の調整もできる。サイズを統一して掲載する時に使える。

2−３．トリミングを確定する

選択範囲を調整して、切り抜く部分が決まったら「トリミング」アイコンをクリックしよう。

下図のように「保存」をクリックするとトリミングは完了だ。

もし、トリミングをやり直したい場合は「保存」ではなく、ここで「キャンセル」をクリックすると再度調整できる。

以上が画像のトリミング方法だ。

３. 画像を削除する方法

ここでは貼り付けた画像を削除する方法を紹介する。

挿入した画像をクリックすると画像上部に図が表示されるので一番右の「×」を押す。

これで削除が完了だ。

４. 画像を横並びにする方法

画像を横並びにしたいときの方法を紹介する。

プラグイン使う方法もあるが、コードをそのまま貼り付ける方法が簡単なのでこの方法を紹介する。

やり方はとても簡単だ。通常はビジュアルエディタを使っていると思うが、ここではテキストエディタに直接コードを書いていく。

ビジュアルエディタとテキストエディタは赤枠の部分で切り替えることが可能だ。

まずは、ビジュアルエディタの方で入れたい画像を「メディアを追加」から挿入しよう。

次に、テキスト画面に移行する。

ビジュアルエディタの画面　　　　　　　　テキストエディタの画面

下記のコードを画像を挿入したい場所に貼り付ける。

image1とimage2に入れたい画像のURLを入れると画像を横並びにすることができる。

下図の、画像のURLの赤い下線の部分をコピーする。

コピーしたものをimage1とimage2に入れ替えるとこのようになる。

赤い部分が画像のURL
青枠は必要がないので削除しよう。

ブラウザで確認するとこのようになる。

これで完成だ。

５. 画像がアップロードできない場合の原因と対処方法

画像をアップロードできない場合には３つのことが考えられる。

・プラグインによる影響
・サーバー側の設定
・キャッシュによる影響

順番に見ていこう。

5-1. プラグインによる影響

プラグインが原因でアップロードできない場合がある。
対処方法は1つずつプラグインを停止してから画像をアップロードしよう。
これで原因のプラグインを突き止めよう。

プラグインの中でも特に、「EWWW Image Optimizer」というプラグインが原因の可能性が高い。

このプラグインは既存の画像を画質劣化させずに容量を減らしてくれるが、プラグイン同士の相性やテーマとの相性でぶつかってしまうことがある。

5−２. サーバー側の設定

サーバー側の設定が原因でアップロードできないことがある。
使用しているサーバーのアップロードサイズを超えるとアップロードすることができない。

対処方法をしては、アップロードする画像を圧縮することだ。

画像のサイズを圧縮する方法は様々だが、TinyPNGというツールは操作が簡単だ。
これを使って画像を圧縮することができる。

サーバーの最大アップロードサイズを変えることもサーバーによっては可能だが、容量が重い画像をWordPressに入れておくと表示速度が遅くなるので画像を圧縮する方法をオススメする。

5-3. キャッシュによる影響

上記の2つの方法でもアップロードができない場合はキャッシュによる影響が考えられる。

その場合は、キャッシュの削除をしよう。

管理画面の上部にキャッシュの削除という項目があるのでそこをクリックしよう。

まとめ

WordPressに画像を入れる方法から画像の編集方法、アップロードできない場合の対処方法などを紹介してきた。

見やすいコンテンツを作成するためには画像は欠かせない。

どれもやり方は簡単なので、実践してみてほしい。