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

WordPressの記事にメディア(画像)を挿入する時の設定

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

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

画像の挿入

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

「画像」ブロックを追加

「画像」ブロックを追加

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

「アップロード」を選択

「アップロード」を選択

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

記事に画像が挿入される

記事に画像が挿入される

詳細設定

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

画像の詳細設定

画像の詳細設定

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

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

参考:画像 – Search Console ヘルプ

配置の変更

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

配置の変更

配置の変更

配置を指定すると、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効果があるので必ず入力して下さい。それ以外は任意です。

参考:画像 – Search Console ヘルプ

添付ファイルの表示設定

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

添付ファイルの表示設定

添付ファイルの表示設定

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

配置(左) class="alignleft"
配置(中央) class="aligncenter"
配置(右) class="alignright"
配置(なし) class="alignnone"
リンク先(なし) 画像にリンクを付与しない
リンク先(メディアファイル) 元画像へリンク
リンク先(添付ファイルのページ) 添付ファイルのページへリンク
リンク先(カスタムURL) URLを指定して任意のページへリンク
サイズ 画像のサイズを選択

全て設定できたら、「投稿に挿入」をクリックして記事に画像を挿入します。

最後に

設定できる項目が多すぎて少し複雑に見えるかもしれませんが、必須なのは「alt属性(代替テキスト)」の入力だけです。その他は任意なのでお好みで設定して下さい。

WordPressの記事にギャラリーを挿入する

2017.12.16
Phoenix Media Renameの設定と使い方:画像ファイル名の変更

Phoenix Media Renameの設定と使い方:メディアのファイル名変更

2021.01.08
スポンサーリンク
スポンサーリンク