【WordPress】記事に画像を挿入する

WordPressの記事に画像を挿入する時の設定をまとめておきます。

記事に画像を挿入

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

アップロード、メディアライブラリ、URLから挿入、いずれかの方法で挿入したい画像を選択します。

編集画面に画像が表示されれば、画像の挿入は完了です。

画像の詳細設定

挿入した画像には、代替テキストを設定したり配置を指定することができます。

但し、共通項目以外はテーマ固有の設定です。表示されない項目は、現在使用中のテーマでは設定できません。

基本設定

画像の設定は、画面右側のブロックメニューから変更できます（表示されない時は歯車アイコンをクリック）。

全て任意ですが、Altテキスト（代替テキスト）にはSEO効果があるので必ず入力して下さい。

画像サイズは、自動生成されたサムネイルから選択できますが、ピクセル単位で細かく調整したい時は、画像の寸法で幅と高さを指定して下さい。無駄に大きな画像を使うとページの読み込みが遅くなります。

キャプションは、画像の下に表示される説明文です。必要なければ入力する必要はありません。

画像 – Search Console ヘルプ

配置の変更

画像編集タブの「配置」アイコンから、画像の位置（配置）を変更することができます。

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

配置の指定は任意ですが、「左寄せ」や「右寄せ」はスマホ表示でレイアウトが崩れやすいので注意して下さい。また、「幅広」と「全幅」はコンテンツの領域を超えて表示させる少し特殊配置となっています。

リンクの挿入

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

リンク先の指定以外は全て任意です。

Googleに外部リンクの関係性を伝える | Google検索セントラル

切り抜き

画像編集タブの「切り抜き」アイコンから、画像を回転させたり切り抜くことができます。

変更を加えた画像は、元画像のファイル名に-editedが追加されて新規画像として保存されます。

ただ、最初から画像をブログサイズに加工してアップロードすれば、この機能を使う必要はありません。

画像の上にテキストを追加

画像編集タブの「画像の上にテキストを追加」アイコンから、画像の上にテキストを追加できます。

テキスト以外にも、画像や音声プレイヤー等、任意のブロックを配置することができます。

ディオトーンフィルター

画像編集タブの「ディオトーンフィルターを適用」アイコンから、2トンカラーの特殊効果を追加できます。

元画像には変更を加えていないので、ちょっとしたフィルター効果を追加したい時に使うと便利です。

最後に

設定できる項目が多すぎて少し複雑に見えるかもしれませんが、必須なのはAltテキスト（代替テキスト）の入力だけです。あらかじめ画像をブログサイズに調整してからアップロードすれば、その他の機能はほとんど使う機会はありません。必要な時だけプレビューで確認しながら調整できれば十分です。