WordPress メディアの使い方-記事に画像を挿入する方法

Wordpress メディアの挿入方法

記事に画像を取り入れていくことで、読み手への印象が違ってくるものです。

特に、最近では、スマホでサイトを閲覧する人が増えているため、小さな画面にぎっしりと文字ばかりが掛かれたページよりも、記事の区切りや説明などに画像を使うことで、ユーザーの反応が良くなるともいわれています。

今回は、そんな記事を作成するうえで欠かせない「画像の挿入」の方法と様々な設定の仕方について詳しく解説していきます。

メディアライブラリの使い方

WordPressのダッシュボード(管理画面)左側にある「メディア」の部分が、画像をはじめとした様々なメディアを管理・編集できるセクションにあたります。

一般的なテーマでは、メディアでは「ライブラリ」と「新規追加」の2項目に分かれています。

ワードプレス メディア

ライブラリには、Wordpressに追加した画像や動画が一覧で表示されます。

すべてのメディア

Wordpress すべてのメディア

すべてのメディアを選択すると、画像・音声・動画・未添付のなかから、対象のメディアを検索できます。

すべての日付

Wordpress すべての日付

メディアを追加した月別に、対象メディアを検索することができます。

画像の新規追加方法

Wordpress メディア 新規追加

新規追加をクリックすると、メディアの追加ページが表示されます。

追加したい画像などのメディアファイルをドロップ、もしくは、ファイルを選択から追加します。

Wordpress メディア新規追加

メディアが追加されると、下の画像一覧に追加されます。

Wordpress メディア新規追加

添付ファイルの詳細の使い方

添付ファイルの詳細

画像を編集するには、対象画像をクリックすると、添付ファイルの詳細画面が開き、詳細を設定することができます。

Wordpress 添付ファイルの詳細
  • URL … 画像ファイルのURL
  • タイトル … 画像のタイトル(英語表記)を入力します。HTMLのTitle属性に当たります。ここで指定したワードにより、Google画像検索で表示されます。
  • キャプション … 挿入した画像の下(場合によっては位置が違う場合あり)に文字を表示させます。通常(何も表示しない場合)は、空欄のままで大丈夫です。
Wordpress メディア キャプション
  • 代替テキスト

HTMLのalt属性にあたります。ここで指定したキーワードにより、検索エンジンにどのような画像なのかを伝えることができます。検索エンジン対策(SEO)をしたい場合は、必ず、入力するようにしましょう。

  • 説明

画像の説明を入力します。ここで入力される内容は、管理者側の便宜上によるものであるため、空欄でも構いません。

画像の編集方法

Wordpress 画像の編集

先ほどの「添付ファイルの詳細」画面にて、画像下にある「画像を編集」をクリックします。

画像編集画面では、画像のサイズ変更や切り取り(トリミング)などを行うことができます。

Wordpress 画像の編集方法

画像編集ボタンの使い方

Wordpress 画像編集ボタン

① 画像のトリミング(画像を希望の範囲で切り取る)

② 画像を反時計回りに回転させる

③ 画像を時計回りに回転させる

④ 画像を垂直方向に回転させる

⑤ 画像を水平方向に回転させる

⑥ 取り消し(元の作業に戻す)

⑦ やり直し(一度元の作業に戻したが、やはり、編集前の作業に戻したいとき)

画像縮尺の変更

画像縮尺の変更

希望の大きさに数字を変更し、「縮尺変更」をクリックすることで画像サイズを変更できます。ここでは、縦横比を変更することはできないので、縦幅・横幅のどちらか一方の数値を変更すると、自動的にもう一方の数値が指定されます。

元の画像を復元

元の画像を復元

画像に何らかの編集を加えた後、元の画像に戻したいときに、「画像を復元」をクリックすると、元の画像を復元できます。

ただし、いくつかの編集作業を行っている場合、直前の編集作業を終えた状態に戻すのではなく、画像を取り込んだときの元の画像の状態に戻るので注意が必要です。

画像のトリミング

画像のトリミング

画像の縦横比、もしくは、切り取り範囲を指定して画像を編集できます。

縦横比( 横幅:縦幅)

選択範囲( 横幅 x 縦幅 )

Wordpress 画像のトリミング

それぞれの値を指定し、画像の切り取り範囲が確定したら、トリミングマークをクリックし、編集を確定します。

Wordpress 画像のトリミング

編集が確定したら、保存をクリックします。

サムネイル設定

Wordpress サムネイル設定

画像を編集した内容をサムネイル画像に適用させるかどうかを選ぶことができます。

サムネイル画像とは、画像見本のようなもので、本来の画像データが縮小されたものをいいます。画像の一覧表示(メディアライブラリ)などで使用されたり、記事内に画像を挿入する際に、サムネイル画像を選択することもできます。

初期設定では、画像の編集内容をすべての画像サイズに適用されるように設定されていますが、サムネイルのみ、あるいは、サムネイル以外の画像(オリジナル画像など)のみに適用したい場合は、希望する項目を選択し、変更を適用させましょう。(特にこだわりがない場合は、初期設定のままでOKです)

記事へのメディア追加

記事に画像を挿入する方法

記事にメディアを挿入する場合は、まず、画像を作成したい部分にカーソルを設定します。

wordpress メディアを追加

次に、記事作成画面の上、「メディアを追加」をクリックします。

wordpress メディアを追加

メディアライブラリの画面に切り替わるので、メディアの種類、日付、タイトルなどを利用しながら、挿入したい画像を選び、「投稿に挿入」をクリックします。

Wordpress メディアを挿入

すると、記事の作成画面の指定した位置に画像が挿入されます。

Wordpres 画像の挿入

挿入するメディアの編集

Wordpress サムネイル設定

挿入するメディアを編集するときには、画像を選択後、右側の「画像を編集」を選択します。

すると、先ほど説明した画像の編集画面が立ち上がるので、希望に応じて作業をした後、「投稿に挿入」をクリックすればOKです。

添付ファイルの表示設定

添付ファイルの表示設定

画像を挿入する際、上図のように、表示の設定を変更することができます。

配置

画像の位置を「左寄せ、中央寄せ、右寄せ、なし」の中から選択できます。「なし」を選択した場合は、文章(記事)の表示位置と同一になります。

リンク先

画像のリンク先を指定できます。特定のURLを指定する場合は、「カスタムURL」を指定し、リンク先のURLを記入します。

サイズ

サムネイル(小)・中・大・フルサイズ(原本サイズ)の中から指定できます。ただし、フルサイズを選択した場合でも、サイトの表示幅より大きい場合は、サイトの表示幅内に調整されます。

まとめ

記事に画像を適度に使うことで、文字だけの文章よりも、時には魅力的に、時にはわかりやすく読み手に伝わるというメリットがあります。

また、画像に適切なタグを挿入することで検索エンジン対策(SEO)にもつながります。画像の場合、見た目ばかりを意識しすぎて、タグが設定されていないということもよくあります。

ちょっとひと手間かかってしまいますが、少し手を抜いたり、後回しにしてしまうと、なかなか記事が量産されてから変更するのは大変なので、画像の挿入のたびに、忘れずに設定していくようにしましょう。