ワードプレスの画像の挿入にはコツが!複数画像もサクッと一括!

こんにちは!自分メディア構築の千明です!

記事には画像は不可欠ですね。特にノウハウ記事には大量の画像が必要になります。

でも、画像の挿入は時間がかかったり、順番がわからなくなったり、結構大変です。

今回の記事では、クラシックエディター(ビジュアルエディター)とブロックエディターで

  • 画像を入れる基本の方法
  • 複数枚を一括アップロードし、一括挿入する方法

それぞれご紹介します。

実は私、最近まで、「ブロックエディターだと、1枚ごとに入れないといけないのかな?なんて不便なの!!」って思ってました。

ところが、ブロックエディターでも、一括挿入が可能なんですよね!この方法を知ってから、記事書きは断然ブロックエディター派になりました。

では早速、クラシックなビジュアルエディターからやり方を見ていきましょう!ブロックエディターの方は、目次からワープしてくださいませ。

ワードプレスで画像を挿入する方法

ワードプレスで画像を挿入するには、ビジュアルエディターとブロックエディターでやり方が違います。

ブロックエディターは使いにくいという意見が多いのですが、やり方のコツがわかれば、一括挿入もできるし、案外使いやすいです。

ビジュアルエディターで画像を入れる方法

クラシックエディターのビジュアルエディターで挿入する方法です。

全体として、画像はすべて編集済みになっています。

すでにワードプレスにアップロード済みの画像の場合

画像を挿入したいところをクリックした後、メディアを追加をクリックします。

メディアライブラリーに行きます。使いたい画像がある場合は、その画像をクリックして指定します。

また、代替テキストといって、画像の説明を入れることで画像自体も検索されるようになります。

挿入したい画像をクリックして、投稿に挿入をクリックします。

画像をアップロードして挿入する方法

画像をアップロードして、挿入する方法です。

ファイルを選択を押すと、アップロードのポップアップが開きます。

入れたい画像をクリックして選択し、開くを押します。

 するとアップロードができますので、あとはメディアライブラリーで先ほどと同じようにすると挿入できます。

このように挿入できました。

画像を縦並びにしたいときは、画像をクリックすると現れるポップアップで配置を変えることができます。

上の画像だけ真ん中になりました。

鉛筆マークを押すと、

  • 代替テキスト
  • 配置変更
  • サイズ変更
  • リンク先挿入

ができます。

複数の画像を一括アップロードする方法

メディアライブラリーの画像をアップロードする画面で、画像の選択画面に行きます。

先ほどは1枚だけでしたが、今回は、複数選びます。

画像を挿入するときは、順番が大事ですね。画像の順番は、アップロードするときの順番で決まります。

この時ちょっとしたコツがあります。

挿入するのと逆の順番でクリックする、ということです。

ですので、この場合は、右から1,2,3番に入れたいので、クリックする順番は、

3、2、1となります。クリックする際はコントロールキー(Ctrl)を押しながらクリックしてくださいね。すると複数選べます。

メディアライブラリーでは、クリックしたのと逆の順番に並んでいます。

このまま画像に入れると、このような順番になります。

ブロックエディターで画像を挿入する

ブロックエディターで画像を入れてみましょう。

画像を挿入したいところにカーソルを合わせ、+マークをクリックします。

ブロックエディターでは、ブロックを挿入したいときに+マークをクリックすると、使えるブロックの選択ができます。

+マークをクリックすると、様々なブロックの種類の選択画面が出てきますので、画像を選びましょう。

すでにアップロードしている画像なら、メディアライブラリをクリックします。

メディアライブラリーはクラシックエディターと同様ですね。挿入したい画像をクリックして選択したら、選択をクリックして、挿入しましょう。

挿入した画像の位置などの調整は、その画像をクリックしたときに上に出てくるバーで可能です。

位置などは、配置を変更で。

左寄せ、中央揃えなどなどの調整ができます。

これを選ぶと、右に画像が寄り、テキストが左に回り込みます。

ブロックを消したいときは、点々が3つ並んでいるところをクリックして、削除を押すと消せますよ。

画像をアップロードしてから挿入するときは、アップロードを選ぶと、直接アップロードのポップアップが出てきます。

画像を選択して、開くを押すと、挿入できます。

挿入した画像をクリックすると、代替テキストを入れたり、サイズ変更が右の欄の画像の設定からできます。

ブロックエディターでは、ブロックに対する設定は右欄からできるようになっているんです。

サイズ変更の様子。

グロックエディターで複数画像を一括アップロード&挿入

ブロックエディターでは、複数画像を一括でアップロードや挿入をするためには、画像ブロックではなく、ギャラリーブロックを選びます。

ギャラリーブロックだと、このようにCtrlキーを押しながら、複数画像を選択できます。順番はクラシックエディターと同じく、逆順です。

選択した後は、順番に並びます。

このように、複数画像が横並びにギャラリーブロックに並びました。これを、バラバラにするには、ギャラリーブロックの上のバーの左端のマークをクリックします。

すると、変換になり、画像を選ぶことができます。

画像を選択すると、このようにギャラリーの画像がバラバラに独立した画像ブロックになります。

画像の順番を変えるのは、ブロックエディターでは、とても簡単です。

該当するブロックの左にある、上下の^をクリックすると、上にずれたり、下にずれたりします。

カバー画像

ブロックエディターでは、画像の上に文字を重ねられる、カバー画像が使えます。

カバー画像を作るには、カバーを選びます。

使いたい画像を選んだら、選択

このように文字を入れられます。

文字の色は右欄で変更可能です。

文字の背景色。

画像をクリックすると、カバーの色調を同じく右欄で変えられます。

グラデーションも選べます。

重ねる色の透明度も調整できますよ。

ブロックエディターは、このようなデザイン性の高い画像を簡単に作ることができます。表現の幅が広がりますね!

ワードプレスの画像挿入の仕方のまとめ

ワードプレスでは、2つのエディター、クラシックエディターとブロックエディター(グーテンベルク)があります。

クラシックエディターとブロックエディターそれぞれのやり方を紹介しましたが、共通するコツは、複数画像をアップロードする際は、逆順に選択するということでした。

そして、ブロックエディターで複数画像を挿入する際は、ギャラリーブロックを指定し、挿入してから、画像ブロックに変換する、という手順でした。

千明
千明

ブロックエディタで複数の画像を入れるやり方を知らずにいたので、1枚1枚入れていて、使いにくいな、と思ってましたが、実はとても使い勝手がいいんですね。

知ると知らないとでは大きな差が出るな、と思いました!

タイトルとURLをコピーしました