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

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

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

目次

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

ブロックエディターのカスタマイズは、使用しているテーマに大きく依存します。

画像の挿入

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

「+」アイコンから「画像」を選択

新規アップロード及びメディアライブラリから、挿入したい画像を選択します。

「アップロード」を選択

これで記事に画像が挿入されます。

詳細設定

画像の詳細は、ブロックメニューから変更することができます。

画像の詳細設定

スクロールできます
詳細
キャプション 画像の簡単な説明(画像の下に表示される)
スタイル スタイル(デザイン)の変更
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"

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

また、「幅広」と「全幅」は、コンテンツの領域を超えて表示させる少し特殊配置となっていますが、対応していないテーマでは使えません(そもそも表示されない)。

リンクの挿入(任意)

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

リンクの挿入

スクロールできます
詳細
URLを入力 URLを指定して任意のページへリンク
メディアファイル 元画像へリンク
添付ファイルのページ 添付ファイルのページへリンク

また、「新しいタブで開く」にチェックを入れれば、target="_blank"が追加されます。

必要であれば、rel属性とCSSも追加できます。

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

切り抜き(任意)

画像編集タブの「切り抜き」アイコンから、画像を切り抜き(トリミング)することができます。

切り抜き

この際、切り抜いた画像は、元画像のファイル名に-editedが追加されて新規画像として保存されます。

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

画像の上にテキストを追加(任意)

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

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

テキスト以外にも、画像の上に画像を重ねたり、音声ファイルのプレイヤーを重ねることもできます。

カスタマイズしたお洒落なトップページやランディングページを作りたい時に使うと便利な機能ですが、記事に画像を挿入するだけなら使う機会はほとんどありません。

ディオトーンフィルター(任意)

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

ディオトーンフィルターを適用

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

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

画像の挿入

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

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

新規アップロード及びメディアライブラリから、挿入したい画像を選択します。

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

必要であれば、挿入する前に詳細設定を入力します。

添付ファイルの詳細

画面右のメニューから、画像の詳細設定を編集することができます。

添付ファイルの詳細

スクロールできます
詳細
代替テキスト alt属性alt=""(SEO効果あり)
タイトル メディアの名前(title属性ではない)
キャプション 画像の簡単な説明(画像の下に表示される)
説明 添付ファイルのページで表示されるテキスト

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

画像 – Search Console ヘルプ

添付ファイルの表示設定

画面右のメニューから、画像の「配置」「リンク先」「サイズ」を設定することができます。

添付ファイルの表示設定

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

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

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

最後に

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

個人的には、画像を挿入する時のルール(配置等)を決めておくとが大切だと思います。

あわせて読みたい
WordPressの記事にギャラリーを挿入する WordPressの記事にギャラリー(画像一覧)を挿入する方法をまとめておきます。 【ブロックエディター】 編集画面で「ギャラリー」ブロックを追加します。 新規アップロ...
あわせて読みたい
Phoenix Media Renameの設定と使い方:メディアのファイル名変更 プラグインPhoenix Media Renameの設定と使い方をまとめておきます。 このプラグインを使うと、(デフォルトでは変更できない)メディアファイルのファイル名を変更する...

コメント

コメントする

目次