WordPressの記事にメディア（画像）を挿入する時の設定についてまとめておきます。
記事に画像を挿入する（ブロックエディター）
画像の挿入
記事編集画面で、「画像」ブロックを追加します。
「画像」ブロックを追加
一覧から「アップロード」を選択します（アップロード済みの時は「メディアライブラリ」から）。
「アップロード」を選択
パソコンからアップロードするファイルを選択すれば、記事に画像が挿入されます。
記事に画像が挿入される
詳細設定
画像が挿入できたら、画像の下には「キャプション（画像の簡単な説明）」を入力できます。また、編集画面の「ブロック」から画像の詳細設定を入力することができます。
画像の詳細設定
| キャプション | 画像の簡単な説明を入力できる（画像の下に表示される） |
|---|---|
| スタイル | デフォルトor角丸から選択できる |
| Altテキスト（代替テキスト） | alt属性「alt=""」として使われる（SEO効果あり） |
| 画像サイズ | 画像のサイズを選択できる |
| 画像の寸法 | 幅「width」と高さ「height」で更にサイズの調整ができる |
| タイトル属性 | title属性「title=""」として使われる（SEO効果なし） |
| HTMLアンカー | id属性「id=""」のアンカーポイントを設定できる |
| 追加 CSS クラス | CSSを追加できる |
AltテキストにはSEO効果があるので必ず入力して下さい。それ以外は任意です。
配置の変更
画像の「配置を変更」アイコンから選択することができます。
配置の変更
配置を指定すると、figure要素にそれぞれ下記のクラス属性が追加されます。
| 左寄せ | class="alignleft" |
|---|---|
| 中央揃え | class="aligncenter" |
| 右寄せ | class="alignright" |
| 幅広 | class="alignwide" |
| 全幅 | class="alignfull" |
配置の指定は任意ですが、「左寄せ」や「右寄せ」は、スマホ表示でレイアウトが崩れやすいので、個人的には「中央揃え」をおすすめします（設定後はスマホ表示も必ず確認して下さい）。
また、「幅広」と「全幅」は、コンテンツの領域を超えて表示させる少し特殊配置となっていますが、対応していないテーマでは使えません（phpの編集が必要）。
リンクの挿入
画像の「リンクを挿入」アイコンから画像にリンクを貼ることができます。
リンクの挿入
| URLを入力 | URLを指定して任意のページへリンク |
|---|---|
| メディアファイル | 元画像へリンク |
| 添付ファイルのページ | 添付ファイルのページへリンク |
また、右上のメニューアイコンを開いて、「新しいタブで開く」にチェックを入れれば、リンクを新しいタブで開くことができます（「target="_blank"」が追加される）。
新しいタブでリンクを開く
必要であれば、「rel属性」と「CSS」を追加して下さい。
参考：Googleに外部リンクの関係性を伝える | Google検索セントラル
記事に画像を挿入する（クラシックエディター）
画像の挿入
記事編集画面で、「メディアを追加」をクリックします。
「メディアを追加」をクリック
パソコンから挿入したい画像をドラッグ＆ドロップでアップロードします（アップロード済みの時は「メディアライブラリ」から画像を選択して下さい）。
画像をドラッグ＆ドロップでアップロード
添付ファイルの詳細
画像の詳細を入力することができます。
添付ファイルの詳細
| 代替テキスト | alt属性「alt=""」として使われる（SEO効果あり） |
|---|---|
| タイトル | メディアの名前（title属性ではない） |
| キャプション | 画像の簡単な説明を入力できる（画像の下に表示される） |
| 説明 | 添付ファイルのページで表示されるテキスト |
代替テキストにはSEO効果があるので必ず入力して下さい。それ以外は任意です。
添付ファイルの表示設定
画像の「配置」「リンク先」「サイズ」を設定することができます。
添付ファイルの表示設定
配置を指定すると、img要素にクラス属性が追加されます。
| 配置（左） | class="alignleft" |
|---|---|
| 配置（中央） | class="aligncenter" |
| 配置（右） | class="alignright" |
| 配置（なし） | class="aligncenter" |
| リンク先（なし） | 画像にリンクを付与しない |
| リンク先（メディアファイル） | 元画像へリンク |
| リンク先（添付ファイルのページ） | 添付ファイルのページへリンク |
| リンク先（カスタムURL） | URLを指定して任意のページへリンク |
| サイズ | 画像のサイズを選択 |
全て設定できたら、「投稿に挿入」をクリックして記事に画像を挿入します。
最後に
設定できる項目が多すぎて少し複雑に見えるかもしれませんが、必須なのは「alt属性（代替テキスト）」の入力だけです。その他は任意なのでお好みで設定して下さい。
コメント