WordPressの記事に画像を挿入する

WordPressの記事にメディア（画像）を挿入する時の設定についてまとめておきます。

Contents

記事に画像を挿入する（ブロックエディター）

記事編集画面で、「画像」ブロックを追加します。

「画像」ブロックを追加

一覧から「アップロード」を選択します（アップロード済みの時は「メディアライブラリ」から）。

「アップロード」を選択

パソコンからアップロードするファイルを選択すれば、記事に画像が挿入されます。

記事に画像が挿入される

画像が挿入できたら、画像の下には「キャプション（画像の簡単な説明）」を入力できます。また、編集画面の「ブロック」から画像の詳細設定を入力することができます。

画像の詳細設定

キャプション	画像の簡単な説明を入力できる（画像の下に表示される）。
スタイル	デフォルトor角丸から選択できる。
Altテキスト（代替テキスト）	alt属性「alt=""」として使われる（SEO効果あり）。
画像サイズ	画像のサイズを選択できる。
画像の寸法	幅「width」と高さ「height」で更にサイズの調整ができる。
タイトル属性	title属性「title=""」として使われる（SEO効果なし）。
HTMLアンカー	id属性「id=""」のアンカーポイントを設定できる。
追加 CSS クラス	CSSを追加できる。

AltテキストにはSEO効果があるので必ず入力して下さい。それ以外は任意です。

画像の「配置を変更」アイコンから選択することができます。

配置の変更

配置を指定すると、figure要素にそれぞれ下記のクラス属性が追加されます。

配置の指定は任意ですが、「左寄せ」や「右寄せ」は、スマホ表示でレイアウトが崩れやすいので、個人的には「中央揃え」をおすすめします（設定後はスマホ表示も必ず確認して下さい）。

また、「幅広」と「全幅」は、コンテンツの領域を超えて表示させる少し特殊配置となっていますが、対応していないテーマでは使えません（phpの編集が必要）。

画像の「リンクを挿入」アイコンから画像にリンクを貼ることができます。

リンクの挿入

また、右上のメニューアイコンを開いて、「新しいタブで開く」にチェックを入れれば、リンクを新しいタブで開くことができます（「target="_blank"」が追加される）。

新しいタブでリンクを開く

必要であれば、「rel属性」と「CSS」を追加して下さい。

記事編集画面で、「メディアを追加」をクリックします。

「メディアを追加」をクリック

パソコンから挿入したい画像をドラッグ＆ドロップでアップロードします（アップロード済みの時は「メディアライブラリ」から画像を選択して下さい）。

画像をドラッグ＆ドロップでアップロード

画像の詳細を入力することができます。

添付ファイルの詳細

代替テキスト	alt属性「alt=""」として使われる（SEO効果あり）。
タイトル	メディアライブラリや添付ファイルのページで表示されるメディアの名前（title属性ではない）。
キャプション	画像の簡単な説明を入力できる（画像の下に表示される）。
説明	添付ファイルのページで表示されるテキスト。

代替テキストにはSEO効果があるので必ず入力して下さい。それ以外は任意です。

画像の「配置」「リンク先」「サイズ」を設定することができます。

添付ファイルの表示設定

配置を指定すると、img要素にクラス属性が追加されます。