【新エディタ】ワードプレスの記事に写真やイラストを挿入する

簡単なワードプレスの使い方WordPress

ワードプレスで記事を書いていて、写真やイラストを入れたくなる時がありますよね。
そこで今回は、新エディタ(Gutenberg)での写真・イラストの挿入方法をご紹介していきます。

ワードプレスには旧エディタ新エディタがあります。

これまでワードプレスでブログ作成をされていた有名どころの方たちは、旧エディタでの記事をたくさんアップしてくれています。
しかし今後は新エディタ(Gutenberg)が主流になっていくと思われるので、当サイトでは新エディタでのやり方をご紹介していきます。

Gutenbergとは

スポンサーリンク

新エディタ(Gutenberg)はブロック単位で操作

旧エディタは、オフィスソフトの Word に似た画面構成でした。
下のような画面です。

ワードプレスに写真やイラストを挿入する方法(新エディタ)

ちなみにこの画面は、新エディタの中にブロックとして残っている「クラシックブロック」というものです。

旧エディタに慣れた方向けに残してあるのだと思いますが、これもいつまで存在するかはわかりません。

それに、慣れると新エディタの方がものすごくラクです。

オフィスソフト(Word や Excel など)のバージョンが、2003から2007になった時、突然「リボン」という機能が表れて混乱したことがありました。

最初は「使いにくい」「前のほうが良かった」という意見が大多数でしたが、徐々に「リボンって便利」という意見に変わっていきました。

それと同じで、ワードプレスも徐々に新エディタの便利さに慣れる方が増えていくと思われます。そうなったら、クラシックブロックはいつ廃止になるかわかりません。

これから新しくワードプレスでブログやサイトを作る方は、最初から新エディタに慣れておくことをおススメします。

新エディタ(Gutenberg)では、自分のやりたいことに合ったブロックを挿入するところから始まります。

あとからブロックの種類を変更することもできますが、ここでは最初にブロックを決める方法でご紹介していきます。

スポンサーリンク

新エディタ(Gutenberg)でのブロック挿入方法

まず、新エディタ(Gutenberg)でのブロックの挿入方法から確認していきます。

ブロックを挿入したい場所の真ん中あたりにマウスを当て、「ブロックの追加」という表示が出るところを探します。

新エディタ(Gutenberg)でのブロックの挿入方法

見つかったらマウスでポチっと押します。
すると下のような画面になります。

新エディタ(Gutenberg)でのブロックの挿入方法

吹き出しのように出て来た画面に、たくさんのブロックが隠されています。
出て来た画面にマウスポインタを乗せ、スクロールすると画面が移動します。

マウスポインタ…マウスを動かすと画面上で動く矢印や手の形などになるマークのこと
ポイント…マウスポインタを乗せること(ただ乗せるだけ、ボタンは押さない)
スクロール…マウスの真ん中にあるタイヤのようなもの(ホイールボタンという)を人差し指でコロコロ転がすこと(手前にコロコロすると画面が下に移動する、向こう側にコロコロすると画面が上に移動する)

吹き出しの上で、画面を下へスクロールすると、次のような画面が出て来ます。

新エディタ(Gutenberg)でのブロックの挿入方法

新エディタ(Gutenberg)のブロックは、種類ごとに分類されています。

ブロックの分類
  • 一般ブロック
  • フォーマット
  • レイアウト要素
  • ウィジェット
  • 埋め込み

新エディタ(Gutenberg)で、写真やイラストを挿入するためのブロックは「一般ブロック」の中にあります。

写真やイラストを挿入するブロックは2種類ある

写真やイラストを挿入するためのブロックは2種類あります。
画像」と「ギャラリー」です。

では次に、この2つのブロックについて見ていきましょう。

画像

「画像」には、写真やイラストは1つしか挿入できません。
2つ以上の写真やイラストを使いたい場合、「画像」ブロックを必要な数だけ入れる必要があります。

ギャラリー

「ギャラリー」は、写真を複数並べて挿入することができるブロックです。
複数挿入した写真やイラストの並び順を変えたり、何列表示にするかを変えたりすることが簡単にできます。

新エディタ(Gutenberg)でのブロックの使い方

では実際の操作方法を確認していきましょう。

画像

まずは「画像」ブロックから。

上の手順で「一般ブロック」を表示すると、右端に「」というマークがあります。
ここをマウスでポチっと押します。

新エディタ(Gutenberg)での写真やイラストの挿入方法

すると「一般ブロック」の項目が開き、様々なブロックの名前とイラストが表示されます。

新エディタ(Gutenberg)での写真やイラストの挿入方法

ここから、挿入したいブロックを見つけてマウスでポチっと押します。
すると、画面が切り替わって選んだブロックが挿入された状態になります。

新エディタ(Gutenberg)での写真やイラストの挿入方法

挿入したい写真やイラストをワードプレスのメディアライブラリ内に取り込むため、「アップロード」を選択します。
※一度ワードプレス内に取り込んだ写真やイラストを使う場合は「メディアライブラリ」を選択しましょう。

新エディタ(Gutenberg)での写真やイラストの挿入方法

アップロード」を選択すると、最初は必ず「ピクチャ」というフォルダが開きます。
自分で写真やイラストをパソコンに保存する時も、「ピクチャ」に入れておくと作業がラクになります。

フォルダは、データ(書類、写真、イラストなど)を保存するための場所で、パソコンを購入した時、最初から用意されています。

  • ドキュメント…書類、テキストデータ
  • ピクチャ…写真、イラスト
  • ビデオ…動画ファイル
  • ミュージック…音楽、音声ファイル

用途別に上のように分かれていて、適切な場所にファイルや写真を整理して保存できるようになっています。

使いたい写真やイラストを保存しているフォルダを見つけて、表示しましょう。

新エディタ(Gutenberg)での写真やイラストの挿入方法

写真やイラストを表示させたらマウスで選択し、右下にある「開く」を選択します。

新エディタ(Gutenberg)での写真やイラストの挿入方法

選んだ画像がワードプレスの記事内に挿入されます。
上に並んでいるボタンで、配置変更ができます。

新エディタ(Gutenberg)での写真やイラストの挿入方法

右と下の青い丸で、サイズ変更ができます。

ギャラリー

ギャラリーも、ブロックを挿入して「アップロード」を選択するところまでは同じ手順です。

新エディタ(Gutenberg)での写真やイラストの挿入方法

「ピクチャ」フォルダから使いたい写真やイラストを選択するとき、複数枚選択して一度に挿入することができます。

新エディタ(Gutenberg)での写真やイラストの挿入方法

「開く」を選択すると画面が切り替わり、ギャラリーブロックに選択した写真やイラストが挿入されます。

新エディタ(Gutenberg)での写真やイラストの挿入方法

ギャラリーブロックは、何列表示にするかを右の設定画面で操作できます。
カラムの右にある数字を減らしたり増やしたりします。

カラム = 列

新エディタ(Gutenberg)での写真やイラストの挿入方法

カラムを2に減らすと、下のように表示が変わります。

新エディタ(Gutenberg)での写真やイラストの挿入方法
スポンサーリンク

新エディタ(Gutenberg)での画像とイラストの挿入方法まとめ

今回は写真を使ってご案内しましたが、イラストを挿入する場合も同じ操作手順になります。

ブログやサイトに写真やイラストは欠かせません。
ぜひ挿入方法をマスターして、自分らしい素敵なサイトを作ってください。

それでは。

いつも「らしく」ブログをご利用いただきありがとうございます。
今後の記事作成の参考にする為、アンケートにご協力をお願いしています。

アンケートの回答に際し、個人情報の入力などは一切ありません。
「協力してもいいよ」という方は、下のリンクもしくはサイトトップのメニュー内「アンケート受付中」よりご回答ください。
アンケートに協力する♪

「らしく」ブログ管理人

WordPress
スポンサーリンク
記事の更新情報を入手する
「らしく」ブログ
タイトルとURLをコピーしました