WordPressの記事にメディア（画像）を挿入する時の設定についてまとめておきます。
記事に画像を挿入する（ブロックエディター）
ブロックエディターのカスタマイズは、使用しているテーマに大きく依存します。
画像の挿入
編集画面で、「画像」ブロックを追加します。
新規アップロード及びメディアライブラリから、挿入したい画像を選択します。
これで記事に画像が挿入されます。
詳細設定
画像の詳細は、ブロックメニューから変更することができます。
| 詳細 | |
|---|---|
| キャプション | 画像の簡単な説明（画像の下に表示される） |
| スタイル | スタイル（デザイン）の変更 |
| 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" |
配置の指定は任意ですが、「左寄せ」や「右寄せ」は、スマホ表示でレイアウトが崩れやすいので、個人的には「なし」or「中央揃え」をおすすめします（設定後はスマホ表示も必ず確認して下さい）。
また、「幅広」と「全幅」は、コンテンツの領域を超えて表示させる少し特殊配置となっていますが、対応していないテーマでは使えません（そもそも表示されない）。
リンクの挿入（任意）
画像編集タブの「リンクを挿入」アイコンから、画像にリンクを貼ることができます。
| 詳細 | |
|---|---|
| URLを入力 | URLを指定して任意のページへリンク |
| メディアファイル | 元画像へリンク |
| 添付ファイルのページ | 添付ファイルのページへリンク |
また、「新しいタブで開く」にチェックを入れれば、target="_blank"が追加されます。
必要であれば、rel属性とCSSも追加できます。
切り抜き（任意）
画像編集タブの「切り抜き」アイコンから、画像を切り抜き（トリミング）することができます。
この際、切り抜いた画像は、元画像のファイル名に-editedが追加されて新規画像として保存されます。
ただ、最初から加工して画像をアップロードすれば、わざわざこの機能を使う必要はありません。
画像の上にテキストを追加（任意）
画像編集タブの「画像の上にテキストを追加」アイコンから、画像の上にテキストを追加できます。
テキスト以外にも、画像の上に画像を重ねたり、音声ファイルのプレイヤーを重ねることもできます。
カスタマイズしたお洒落なトップページやランディングページを作りたい時に使うと便利な機能ですが、記事に画像を挿入するだけなら使う機会はほとんどありません。
ディオトーンフィルター（任意）
画像編集タブの「ディオトーンフィルターを適用」アイコンから、2トンカラーの特殊効果を追加できます。
元画像には変更を加えていないので、ちょっとしたフィルター効果を追加したい時に使うと便利です。
記事に画像を挿入する（クラシックエディター）
画像の挿入
編集画面で、「メディアを追加」ボタンをクリックします。
新規アップロード及びメディアライブラリから、挿入したい画像を選択します。
必要であれば、挿入する前に詳細設定を入力します。
添付ファイルの詳細
画面右のメニューから、画像の詳細設定を編集することができます。
| 詳細 | |
|---|---|
| 代替テキスト | alt属性alt=""（SEO効果あり） |
| タイトル | メディアの名前（title属性ではない） |
| キャプション | 画像の簡単な説明（画像の下に表示される） |
| 説明 | 添付ファイルのページで表示されるテキスト |
代替テキストにはSEO効果があるので必ず入力して下さい。それ以外は任意です。
添付ファイルの表示設定
画面右のメニューから、画像の「配置」「リンク先」「サイズ」を設定することができます。
配置を指定すると、img要素のクラス属性に値が追加されます。
| 詳細 | |
|---|---|
| 配置（左） | class="alignleft" |
| 配置（中央） | class="aligncenter" |
| 配置（右） | class="alignright" |
| 配置（なし） | class="alignnone" |
| リンク先（なし） | 画像にリンクを付与しない |
| リンク先（メディアファイル） | 元画像へリンク |
| リンク先（添付ファイルのページ） | 添付ファイルのページへリンク |
| リンク先（カスタムURL） | URLを指定して任意のページへリンク |
| サイズ | 画像のサイズを選択 |
全て設定できたら、「投稿に挿入」をクリックして記事に画像を挿入します。
最後に
設定できる項目が多すぎて少し複雑に見えるかもしれませんが、必須なのは「alt属性（代替テキスト）」の入力だけです。その他は任意なのでお好みで設定して下さい。
個人的には、画像を挿入する時のルール（配置等）を決めておくとが大切だと思います。
コメント