ワードプレス

ワードプレスで画像挿入や貼り方|キャプションや配置、サイズ変更方法

ワードプレスで記事を書く時に欠かせない画像挿入。

一昔前のWEBサイトは、文字(テキスト)だけのページも珍しくなかったですが、今ではアイキャッチ画像から、記事の中にまで画像を多く使ったページが主流になっています。

たくさん使えばいいというわけではなく、読者が1番わかりやすい事が重要で、記事の内容によって画像の使用状況は左右されます。

ここでは基本のワードプレスの記事画面への画像挿入方法から、メディアへのアップロード、キャプションや画像配置、サイズ変更方法などをご説明します。

ワードプレスで画像挿入をマスターして、あなたのブログを華やかで、より読者さんが見やすい記事にしていきましょう。

ワードプレスで画像挿入

  1. 記事に直接挿入する
  2. メディアに画像を保存する

ワードプレスでは2つの方法で画像をアップロードすることができます。

まずは書いている記事に画像を挿入する方法から見ていきましょう。

記事に直接画像を挿入する

記事の投稿画面です。

→ここに画像を追加したい という部分に画像を挿入するとしましょう。

※今回はビジュアルエディターで説明していますがテキストエディターでも操作は同じです。

  • マウスカーソルを画像を挿入したい箇所に合わせる
  • 赤枠の「メディアを挿入」をクリック
  • ファイルをアップロード
  • ファイルを選択をクリック

ここでは通常2つのタブが表示されていると思います。※私の画面ではプラグインが表示されています

ファイルをアップロード
→ご自身のPCから画像ファイルをアップロードする

メディアライブラリ
→すでにワードプレスにアップロードした画像を使う

となっています。今回は新たにパソコンから画像をアップロードするところからみて見ましょう。

ファイルをアップロードをクリックすると、ご自身のパソコンのファイルが開きます。

画像は「ピクチャ」に保存されている場合が多いと思いますが、これは人それぞれなので、挿入したい画像を選びます。

  • 挿入したい画像を選択する
  • 画像をダブルクリック

画像をダブルクリックするとこのように今度は「メディアライブラリ」が開きます。

パソコンに保存されていた画像が、ワードプレスのライブラリに保存されたということです。

  • 挿入したい画像が選択されている
  • 右下の投稿に挿入をクリック

↓↓↓↓↓↓↓↓↓↓↓↓

 

無事に記事に投稿ができました。

→ここに画像を追加したい

と書かれている部分に画像が挿入できていますね。

メディアに画像を保存する

ここまでは、記事投稿画面に直接画像を保存する方法をご紹介しましたが、つぎはメディアに画像を保存する方法です。

記事投稿画面で一枚ずつ画像を挿入しなくても、メディア(ワードプレス)に複数画像をアップロードしておくこともできます。

こうすれば、投稿画面でより早く画像を挿入することができます

ワードプレスのダッシュボードに「メディア」という項目があります。

  • メディアをクリック
  • 新規追加をクリック

先ほどの記事に画像を挿入するときと同じように、ファイルを選択する画面が表示されます。

  • ファイルを選択をクリック
  • パソコン上からアップロードしたい画像を選ぶ

※画像を直接ドラッグ&ドロップで追加することもできます。

ブログ記事に挿入する画像がたくさんある場合は、あらかじめメディアにアップロードを済ませておくと記事を書く時にスムーズです。

続いて、画像挿入時の設定を見ていきます。

画像のキャプションやサイズ設定

ファイルかをアップロード→画像選択→ダブルクリックすると、画面右側にこのような表示がされます。

右下の「投稿に挿入」を押す前に、一度画像をどのように挿入するのか確認をしておきましょう。

ここで設定できる項目は以下の通り

代替テキスト画像の詳細をテキスト化するもの 空欄でもOK
タイトル画像のタイトル 空欄でもOK
キャプション画像の説明文(引用表記)
説明画像の説明やメモ 空欄でもOK
表示設定 配置左・中央・右・なし 中央推奨
リンク先4項目から選択
サイズ4項目から選択

代替テキスト

その画像が何を意味するか?をテキストで表記しておくと、画像が仮に表示されないときにテキストが表示されます。視覚障害の方には音声で読み上げ。

また、検索結果の画像にも反映されるので設定しておくのもおすすめです。

たとえばサンプルで入れた車の画像なら「黒い車の写真」などと入力しておきます。

タイトル

通常はパソコンに保存してあった名前がそのままついています。書き換えたい場合は任意のタイトルに変えますが、記事上で表示されることはありません。わたしはいつもそのまま・・

キャプション

画像の説明文となり、記事上で表示されます。

よくサイトを見ていると画像の下に、撮影者:〇〇や、引用元URL〇〇〇〇○という表記がありますが、その部分がキャプションです。

他のサイトからの引用の場合はここで忘れずに記載しましょう。

説明

ワードプレスに画像がたくさん溜まったときに、なんの画像がわかるようにメモするものです。特に記載する必要はないかと思います。

表示設定

左・中央・右・なしが選択できます。

スマホユーザーも多いので「中央」に配置しておくと画像が綺麗に見えます。私はいつも中央に設定しています。

リンク先

画像をクリックしたときのリンク先です。

プラグインなどでポップアップされる設定の場合はメディアファイルにしておきます。通常は「なし」で問題ありません。

また違うURLを記載しておくと、画像をクリックしたときに別ページへ誘導することも可能です。

サイズ

  • サムネイル 150×150
  • 中 300×186
  • フルサイズ
  • 中 (16:9)

の中から任意のものを選択します。

あとから変更も可能なので、まずは画像に挿入してイメージを確認してから調整してもいいでしょう。

画像のサイズにもよりますが、わたしはアイキャッチを横760前後に設定して、記事内の画像を500前後にしています。

中サイズからフルサイズを選択することが多いです。

設定が終わったら「投稿に挿入」で完了

設定はたくさんあるように思いますが、慣れてくればお決まりパターンが出来てくると思うので大変なものではありません。

まずは正しい画像挿入の仕方を覚えて、サクサクできるようにしておきましょう!

ワードプレスで画像挿入や貼り方【今回のおさらい】

  1. 画像アップロード方法は2種類ある
    ・記事に直接挿入する方法
    ・メディアに画像を保存する方法
  2. パソコンから画像を選ぶ→ワードプレスへアップロード
  3. 複数挿入するときはメディアに入れておくと便利
  4. 画像挿入する前に各設定をしてから挿入する

お疲れ様でした!

以上がワードプレス記事への画像の挿入方法になります。

はじめはなんだか難しそうと思っても、一度できてしまえば簡単なものです。

画像は、記事を華やかに彩るだけでなく、読者さんがより見やすい、わかりやすくする為のもの。

画像挿入の基本をマスターして良い記事が書けるようにレベルアップしていきましょう。