WordPressで記事に画像を挿入・編集する方法

画像を挿入する

旧エディター(クラシックエディター)の場合

画像を挿入したい記事の投稿画面を開きます。
画像を追加したい位置にカーソルを合わせたあと、本文入力欄左上の「メディアを追加」を選択してください。


画像をドラッグ&ドロップするか、「ファイルを選択」をクリックして追加したい画像を選択してアップロードしてください。


アップロードしたら、画像を選択してください。右側に画像の詳細と4つの入力項目が表示されます。

代替テキスト 記事に挿入した画像について説明した文
タイトル マウスポインターで合わせた時に表示される画像のタイトル
(通常、画像のファイル名が入力されている)
キャプション 画像の直下に追加できる簡単な補足説明
説明 訪問者には見えない、管理者用のメモ

この中で最も重要なのが「代替テキスト」です。

代替テキストを入力するメリット

  • 画像が読み込まれないときにテキストが表示される
  • 音声ブラウザでは代替テキストが読み上げられる
  • SEO効果が高められる

画像内で図や表を使っている場合、その画像内の要素を文章に起こすことで、検索エンジンが内容を読み取ることが出来るため、SEO効果が高められるとされています。
一方、単純なイメージ画像である場合は代替テキストを入力する必要はありません。


代替テキスト入力欄に、画像の簡単な説明文を追加してください。


次に表示設定を選択します。

配置 左・中央・右・なし から画像の配置を選べる
(なしの場合は自動的に左寄せになる)
リンク先 メディアファイル:リンク先が画像になる
添付ファイルのページ:画像が貼られているページ=同一ページにリンクされる
カスタムURL:リンク先のURLを設定できる
サイズ サムネイル・中・大・フルサイズ から画像のサイズを選べる

(「設定」→「メディア」から、各画像サイズの上限を決めることができ、
フルサイズの画像の寸法に基づいて、サムネイル・中・大サイズの画像が自動生成される)

画像サイズは作成時に決めておき、以後パターン化できるようにしておくのがおすすめです。


決定したら、「投稿に挿入」をクリックしてください。


本文入力欄に画像が反映されました。
右上の「プレビュー」をクリックして、プレビュー画面でも確認します。

画像が反映されています!

問題がなければ編集画面に戻り、「公開する」をクリックして完了です。

新エディター(ブロックエディター)の場合

編集画面内の+マークをクリックし、「画像」を選択します。

アップロードをクリックします。

フォルダ内の画像を選択し、「開く」をクリックします。

画像が挿入されました。

画面右側のタブから、画像の細かい設定ができます。

【スタイル】
「デフォルト」を選択すると、元の画像のまま挿入されます。

「丸形マスク」を選択すると、画像が丸形に切り抜かれます。

【画像設定】
Altテキスト(代替テキスト)の入力と画像サイズ・寸法の設定ができます。

詳しくはこちら
>>Altテキスト(代替テキスト)
>>画像サイズ

直接数値を変更して、画像の寸法を変更することができます。

パーセンテージを選択すると、デフォルトのサイズから縮小されたものが反映されます。

【高度な設定】
CSSを設定することもできます。

設定が完了したら「プレビュー」をクリックして、反映されているか確認してください。 

画像が反映されました! 

問題がない場合は、編集画面に戻り、正式に「公開」をして完了です。 

画像を編集する

画像を選択すると、メニューが現れます。鉛筆マークの「編集」を選択してください。


右下の「オリジナルを編集」をクリックしてください。

トリミング

範囲を選択

①左上「トリミング」を選択
②切り取る範囲を選択
③左上「トリミング」を再度クリック
④「保存」をクリック

縦横比を指定

①右の「画像のトリミング」の欄で、縦横比を指定
②範囲を確認
③左上「トリミング」を選択
④「保存」をクリック

縮尺の変更

①右の「画像縮尺の変更」の欄に新規サイズを入力します。
縦の値を入力すると、縦横比に応じた横の数値が反映されます。
②「縮尺変更」をクリックして完了です。

回転・反転

各「回転」・「反転」ボタンを選択し、「保存」をクリックします。