WordPressで投稿に画像を挿入する方法

WordPressでの更新についての問い合わせで多いのが、画像の挿入についてです。
ここでは、「投稿への画像の挿入」を中心に説明していきます。

画像の所在

投稿に挿入するものやアイキャッチに設定する画像は、手順はどうあれ、まずWEBサーバーにアップロードされます。
アップロードされた後、アイキャッチへの設定や投稿への挿入が可能になります。

画像のアップロード

画像をサーバーにアップロードするタイミングは、投稿に画像を挿入する時と、予め『メディア』メニューよりアップロードしておく方法の2種類です。

予め『メディア』メニューよりアップロード

投稿を入力する前に、予め投稿で使用する画像をアップロードしておく場合は、Wordpress管理画面左側管理メニュー内にある『メディア』より、「新規追加」を選択します。

メディアアップロード画面が表示されます。アップロードしたい画像ファイルをデスクトップなどから“ここにファイルをドロップ”と点線で囲ってある領域にドラッグ（クリックしたまま移動）させると、ファイルのアップロードが自動的に始まります。

画面に、ファイル名とアップロード進行状況を示すバーが表示されます。

アップロードが完了すると、上図のように進行状況バーが「編集」の表示にかわります。
以上で画像ファイルのアップロードは完了です。

本当にアップロードが完了しているかどうかを確認する場合は、
「メディア」メニューの「ライブラリ」でアップロードされたファイルのサムネイル一覧表示ができるので、そこで確認してください。

投稿入力途中のアップロード

投稿入力の最中に画像をアップロードする方法は、下記「投稿への画像の挿入方法」で説明していきます。

投稿への画像の挿入方法

画像を表示させる場所を決める

本文入力エリアの中の、画像を表示させたい場所をクリックして画像表示場所を決定します。

文章の途中を画像表示場所にしてしまうと、画像の回り込み設定（後述します）によってはレイアウトがおかしな事になってしまう場合があります。
画像と段落は別に設定しておくことをオススメします。

メディアを追加

画像の場所が決まったところで、本文エリアの左上にある『メディアを追加』ボタンをクリックすると、下図のような「メディアを追加」ウィンドウが表示されます。

「メディアライブラリ」タブで開いた状態か、あるいは

「ファイルをアップロード」タブで開いた状態でのどちらかでの表示になります。

ファイルがアップロード済みの場合

もし、挿入する画像が既にアップロードされていれば、「メディアライブラリ」タブで開いた状態にしてください。

タブの表示切り替えは、ウィンドウ上部にある「ファイルをアップロード」「メディアライブラリ」どちらか該当するものをクリックすれば切り替わります。

「メディアライブラリ」の中にある、投稿に挿入したい画像をクリックして上図のように選択状態にします。

まだファイルをアップロードしていない場合

まだ投稿に挿入する画像ファイルをアップロードしていない場合は、「ファイルをアップロード」「メディアライブラリ」どちらのウィンドウでもかまわないので、『メディアを追加』ウィンドウ内にアップロードさせたい画像をドラッグで移動させます。

上図のように、ファイルのアップロードを受け付ける表示切り替わりますので、その状態でクリックを離せばアップロードが始まります。

画像のアップロードが始まると、『メディアの追加』画面に新しい画像サムネイルの領域が作成され、その中央に表示されるアップロードの進捗を示すバーでアップロード状況を教えてくれます。

アップロードが完了すれば、「メディアライブラリ」の左上に、上図のように選択された状態でアップロードした画像のサムネイルが表示されます。

表示する画像の設定

投稿に挿入する画像の選択ができたら、「画像を追加」画面右側の“画像表示に関する設定”を行います。
各項目については、以下を参考に入力・設定してください。

キャプション

上図のようにキャプション欄に入力された文字が画像の下に表示されます。

代替テキスト

かつてはSEOの一端を担っていた画像への代替テキストの設置でしたが、最近ではその効果はほとんど無く、Googleも代替テキストを重要視しないことを公言しているようです。
代替テキストは、その画像が関係しているコンテンツについてのキーワードが1つか2つ設定されていればよいようです。

配置

画像とテキストの位置関係を決定する指定が『配置』となります。

左

配置を『左』で設定すると、このように画像が“左”、画像の直後に入力したテキストが画像の右側に回り込みます。つまり、配置で設定する“位置”は、画像の位置になります。
上記のとおり、「Enter」キーで新しい段落を作成してしまうと回り込みが解除される場合が多いので注意してください。
改行を行う場合は、「Shift + Enter」で対応できます。

右

配置を『右』で設定すると、このように画像が“右”、画像の直後に入力したテキストが画像の左側に回り込みます。

中央

配置を『中央』で設定すると、画像は投稿を表示するエリアの中央に表示され、直後に入力したテキストは回り込みされずにこのように画像の下に表示されます。

なし

配置を『なし』で設定すると、このように画像が文章の一部のように文章のベースラインに合わせたかたちで表示されます。
当然、テキストの回り込みはありません。
絵文字や顔アイコンなどが挿入されたときの表示と同じような扱いになります。

リンク先

『リンク先』は、画像をクリックできるようにするか否か、できるようにするならクリック後どのページへジャンプするかの設定をする項目になります。

なし

画像自体クリック出来ないようにする設定です。

メディアファイル

『メディアファイル』に設定すると、ブラウザで画像だけを表示させる形になります。
上図をクリックして確認してみてください。

添付ファイルのページ

『添付ファイルのページ』を設定した場合は、テーマによって仕様は異なりますが基本的には画像だけを表示するためだけの“ページ”を生成して表示する形になります。
「メディアファイル」は、画像を直接ブラウザで表示させるので、表示している状態のアドレスの最後がファイル名になっているのに対して、『添付ファイルのページ』は専用のURL（アドレス）が用意されます。

カスタムURL

クリックしたら別のページにリンクさせる場合に設定します。
『カスタムURL』を選択すると、上図のようにURLを入力する欄が表示されますので、リンク先のアドレスを入力します。

サイズ

挿入した画像の表示の大きさを設定する項目です。

「サムネイル」「中サイズ」「大サイズ」「フルサイズ」の4種類が一般的ですが、テーマによってはそれ以外のサイズが用意されているものがあるかもしれません。
また、「サムネイル」「中サイズ」「大サイズ」の寸法もテーマによって異なる設定になっている場合があります。

サムネイル

投稿に挿入する画像のサイズの中で一番小さいサイズとなります。
回り込み対応します。表示が小さいので、『リンク先』を「メディアファイル」か「添付ファイルのページ」に設定して、大きく表示して見れるような配慮があったほうがよいサイズです。

中サイズ

ある程度画像の中身が視認できるぐらいのサイズです。
回り込みに対応できます。
『リンク先』を「メディアファイル」か「添付ファイルのページ」に設定して、大きく表示して見れるようにしてもよいと思います。

大サイズ

ほとんどのテーマが投稿表示幅一杯のサイズに設定しているサイズです。
余分なスペースが無いので、回り込みには適さないサイズです。
回り込みはしないようにしましょう。

フルサイズ

上述のとおりアップロードした画像の本来の大きさになります。
ほとんどのテーマが“フルサイズ”の画像を挿入しても表示に差し支えないように設定していますが、中にはレイアウトを崩してしまうものもありますので、「大サイズ」があり「フルサイズ」がある場合は、「フルサイズ」を設定しないように心掛けましょう。

挿入を実行

以上の設定が完了したら、「メディアを追加」ウィンドウの右下にある『投稿に挿入』ボタンをクリックして画像の挿入は完了します。

以上の工程を、画像を挿入する度に行ってください。

画像挿入後に設定を変更

画像を挿入した後に画像の設定を変更する場合は、設定を変更したい画像をクリックすると上図のようなクイック編集パレットが表示されます。
クイック編集パレットでは、配置と削除が設定出来ます。
「削除」は、挿入を取り消して投稿から画像の表示を無くしてしまいます。ただ、アップロードした画像のデータはサーバーに残っていますので、いつでもまた投稿に挿入することができます。

「キャプション」や「代替テキスト」「リンク先」「サイズ」などを変更する場合は、鉛筆アイコンの“詳細設定”ボタンをクリックして下図のような画像詳細編集画面を表示します。

画像の詳細編集

画像の詳細編集画面では、画像の挿入に設定した項目が全て表示され編集できるようになっています。
『上級者向け設定』の欄は、HTMLやWordpressのカスタマイズができる方用の項目ですが、その中でひとつだけ「リンクを新しいタブで開く」は、「リンク先」を『カスタムURL』に設定し、外部のサイトへのURL（アドレス）を設定した際にチェックを入れておくと、外部サイトを別タブ（ウィンドウ）で開いてくれるので、ホームページの閲覧者がリンク先の外部サイトのタブ（ウィンドウ）を閉じたとしても、自分のサイトのタブ（ウィンドウ）は消えないので、次に繋げられる可能性を残すことができます。

アイキャッチ画像の設定

「アイキャッチ画像」とは、コンテンツを示すアイコンのような役割をする画像のことです。
投稿の一番最初に、投稿の表示幅一杯に表示されたり、TOPページや関連記事欄、新着欄などに表示されるサムネイルとしても活用される画像です。

アイキャッチ画像の設定も上記の「メディアを追加」と同じ方法で設定することができます。

まず、投稿画面右側に表示されている『アイキャッチ画像』欄に表示されている「アイキャッチ画像を設定」リンクテキストをクリックします。
すると、上記「メディアを追加」での説明と同じ画面表示となりますので、「メディアを追加」からの作業と同様に登録作業を進めていきます。
登録する内容は「キャプション」「タイトル」「代替テキスト」ぐらいしかありませんが、それらも“アイキャッチ”画像なので設定する必要はありません。（リストのサムネイルにキャプションは不要だからです。）

画像のアップロード、選択が完了したら、『アイキャッチ画像』画面の右下にある「アイキャッチ画像を設定」ボタンクリックでアイキャッチ画像設定は完了します。

以上が投稿での画像の挿入方法の説明になります。

如何でしたでしょうか。
長々とかいてあるので、いろいろとすることが多いように見えますが、自分の投稿スタイルができれば比較的簡単で素早く終わる作業です。

投稿の内容をよりわかりやすく、魅力的なものにしてくれる画像の挿入で、サイトをしっかり盛り上げていきましょう！