【WordPress】画像の挿入方法【図解入りで詳しく解説】

WordPressのブロックエディタを使った画像の挿入方法に関する詳しい情報をお探しの方向け。

 

WordPressのブロックエディタは直感的な操作で画像挿入できます。

画像挿入だけでなく、切り抜いて編集したり、テキストの追加、表示スタイルの変更、横並び表示、ギャラリー表示など、様々な機能があります。

この記事では、WordPressの画像の挿入方法を図解入りで詳しく解説していきます。

 

機能が多く、本記事を読んだだけでは難しいと感じるかもしれませんが、実際は難しい操作を必要としませんので、是非、様々な機能を使ってみて下さい。

WordPressの画像の挿入方法

それでは、WordPressの画像の設定方法を解説します（投稿と固定ページ共通）。

上記のとおりです。

画像の挿入方法

最初に、超基礎となる画像の挿入方法から解説します。

本文に画像を挿入するには、ブロック右の「＋」をクリックしてブロックメニューを開き、「画像」を選択します。

画像の挿入方法は3つ

画像の挿入方法は3つあります。

アップロードを選択して直接画像を挿入してもよいですが、アップロードは接続エラーが出ると気づきにくいです。

メディアライブラリは接続エラーが出た時に気づきやすいので、なるべくならメディアライブラリ選択して挿入した方が確実です。

メディアライブラリを使って画像を挿入する方法

ドラッグ＆ドロップで画像をアップロードすると、メディアライブラリにアップロードした画像が表示されますので、①画像を選択し、②「選択」をクリックします。

下図のように本文中に画像を挿入できます。

画像挿入の基本となりますので、覚えておきましょう。

 

ちなみに、本記事で使用している画像は下記記事で紹介しているフリー画像を使用してます。

フリー素材（画像・イラスト）に興味のある方は是非参考にして下さい。

配置場所の変更

画像の配置場所を下記3つ変更できます。配置場所を変更すると、画像の横にテキストを回り込ませることができます。

左寄せ

①上部メニューのアイコンをクリックし、②「左寄せ」を選択すると、画像が左寄せとなり、右側の空きスペースにテキストを入力できます。

中央揃え

「中央揃え」を選択すると、画像が中央に配置されます。

右寄せ

「右寄せ」を選択すると、画像が右寄せとなり、左側にテキストを回り込ませることができます。

画像ブロックの移動

挿入した画像はマウス操作で移動できます。

移動方法は2つあります。

ブロックを一段ずつ移動

上部メニューの矢印のアイコンをクリックすると、挿入した画像を1段ずつ移動できます。

ドラッグで自由に移動

上部メニューのアイコンを左クリックを押しっぱなしにすると、好きな場所に画像を移動できます。

記事作成中に、画像の配置場所を変更したい時に使えます。

代替テキスト（Alt）の設定方法

代替テキスト（Alt）とは、Webページに挿入された画像を検索エンジンに「その画像はどのような内容なのか」を伝えるテキストのことをいいます。

「【画像のSEO】代替テキスト（alt属性）とは【設定方法を解説】」という記事でも解説しているとおり、画像のSEO対策になりますので、設定しておいて損はありません。

設定方法

挿入した画像をマウスでクリックし、右サイドバー「画像設定」項目の「Altテキスト（代替テキスト）」で設定できます。

設定例を2つ紹介します。

設定のポイントは、画像の内容や意味を正しく表現するキーワードを適切に使用することです。

むやみやたらにキーワードを羅列するようなことは避けましょう。

 

リンクの設定方法

画像をクリックすると上部メニューが表示されますので、①リンクのアイコンをクリックし、②入力項目にリンク先URLを入力します。

画像の切り抜き方法

画像の切り抜きは下図アイコンを選択すると設定できます。

切り抜きの種類は3つあります。

上記のとおりです。

ズームで切り抜く

切り抜きアイコンをクリックすると、切り抜きのメニューが表示されますので、虫眼鏡のアイコンをクリックします。

シークバーが出現しますので、マウス操作でお好みの大きさにズーム表示します。

大きさが決まったら適用をクリックし、設定を保存します。

比率で切り抜く

切り抜きメニューの下図アイコンをクリックするとプルダウンメニューで比率が表示されます。

お好みの比率を選択し、マウス操作で切り抜く部分を操作します。

回転して切り抜く

切り抜きメニューの下図アイコンをクリックすると画像が回転しますので、マウス操作で切り抜く部分を操作します。

画像の置換（変更）

上部メニューの「置換」を選択すると、既存の挿入画像を置換えることができます。

①「置換」をクリックし、②メディアライブラリで置換える画像を選択します。

下図のように画像が置換わります。

画像を削除して貼り直すよりも、少しだけ操作が楽だと思います。

画像にテキストを追加

上部メニューの「A」というアイコンを選択します。

下図のように画像の上にテキストの入力項目が出現しますので、任意のテキストを入力します。

フォントサイズの変更

右サイドバーでフォントサイズを変更できます。

テキスト配置場所の変更

追加したテキストをクリックするとメニューが表示されますので、下図アイコンをクリックすると、テキストの配置場所を変更できます。

テキストカラー・背景色の変更

右サイドバーの色設定でテキストカラーと背景色を変更できます。

ドロップキャップ

右サイドバーの「テキスト設定」の「ドロップキャップ」にチェックを入れると、先端文字が大きく表示されます。

キャプションの設定方法

キャプションとは、本文とは異なる画像のコメントや説明文のことです。Altテキストとは似て異なるものです。

キャプションとAltテキストの違いの詳細は、サダタイムズさんの
「キャプションは画像に必要？代替テキストとの違いは？」で詳しく解説されています。

 

挿入した画像をクリックすると、画像下部にキャプションの入力項目が出現します。

テキストを入力すると下図のようになります。

画像サイズの変更

対象の画像をクリックすると、右サイドバーが表示されます。

初期はフルサイズで挿入されますが、変更したい方はここで設定します。

ピクセル単位・パーセンテージで指定

「画像の寸法」という項目で、ピクセル単位やパーセンテージで画像サイズを変更できます。

ドラッグで画像サイズを変更

画像の端の方をクリックすると、青線が表示されますので、青線をクリックしながら移動すると画像サイズを変更できます。

画像の表示スタイルの変更

上部メニュー、右サイドバーで画像の表示スタイルを変更できます。

下図のように表示が変わります。

なお、画像の表示スタイルは使用するテーマによって変更できるスタイルが異なります。

本記事はWordPressのデフォルトテーマ「Twenty Seventeen」を元に解説していますが、他テーマに変更すれば、枠線やフレーム表示など、様々な表示スタイルが用意されています。

複数の画像を横並びで挿入する方法

ブロックメニューの「カラム」を選択します。

カラムパターンを選択します。

下図のようにブロックが2カラムで表示されますので、「ブロックを追加」を選択します。

ブロックメニューの「画像」を選択します。

「メディアライブラリ」を選択します。

下図のように画像を挿入できました。
同じ要領で右カラムにも画像を追加します。

下図のように画像を横並びで表示できます。

カラムの追加

画像と画像の間にマウスカーソルを合わせると、下図のように「カラムを追加」という項目が出現し、クリックするとカラムが1つ増えます。

同じ要領で画像を追加すると、下図のように表示されます。

画像ギャラリーの挿入方法

WordPressには「画像ギャラリー」と呼ばれる複数の画像をまとめて挿入できる機能があります。

 

ブロックメニューの「ギャラリー」を選択します。

メディアライブラリをクリックします。

ギャラリー表示する画像を選択し、「ギャラリーを作成」をクリックします。

ギャラリー編集画面が表示されますので、写真の並び順を変えたり、キャプションを入力したい方はここで設定します。

問題無ければ「ギャラリーを挿入」をクリックします。

下図のようにギャラリーが挿入されます。

 

右サイドバーの「カラム」でカラム数を変更すると、ギャラリー表示のレイアウトを変更できます。

複数の画像をまとめて表示したい方は、是非使ってみて下さい。

 

WordPressサイトに画像を挿入する時の注意点

最後に、WordPressサイトに画像を挿入する時の注意点を紹介します。

上記のとおりです。

大きいサイズの画像をそのまま挿入しない

大きいサイズの画像をそのまま挿入すると、ページの表示速度が遅くなり、ユーザーにストレスを与えるばかりか、SEO的に良くないです。

詳しくは「【SEO】ページの表示速度が遅いのは致命的！測定方法や改善方法を解説」をどうぞ。

 

画像を挿入する時は、下記2つのサイズを小さくしてから挿入するようにしましょう。

 

特に、スマホで撮影した写真を挿入する時は注意が必要です。

スマホの写真はサイズ・データ容量共に大きいので、サイズを小さくして使用しましょう。

画像のサイズを小さくする手順

画像のサイズを小さくする手順は下記のとおりです。

①画像のサイズ変更

最初に、画像のサイズ変更をしましょう。

一辺の大きさが3,000px～4,000pxあるような画像はデータ容量が大きいです。

ページの表示幅に合わせるか、800px～1,200pxぐらいに小さくしましょう。

 

画像のサイズ変更は無料ツールが沢山ありますので、ツールを使えば簡単にできます。

ちなみに、筆者はPhotoScapeというツールを使ってサイズ変更してます。手軽にサイズ変更できますので、興味のある方は下記記事をどうぞ。

②データ容量の軽量化

画像のサイズを小さくしたら、データ容量を圧縮しましょう。

「TinyPNG」というWebツールを使うと、画像をアップロードするだけで簡単に軽量化できます。

公式サイト：TinyPNG

画像をアップロードするだけで、6～7割程度、画像データを圧縮できるのでおすすめです。

 

まとめ

以上、WordPressの画像の挿入方法を解説しました。

 

 

 

人気記事【フリー素材】おすすめな画像サイト11選【商用利用OK】

人気記事【デザイン初心者向け】バナー作成ツールおすすめ4選【画像素材つき】