画像の差し込みをGutenbergでやってみよう!【超初心者編】

ブログ管理Gutenberg, WordPress基本設定, ブログ管理, 初心者, 画像

Gutenbergの画像差し込みヘッダー

トリ師匠
トリ師匠
ほれほれ行くで行くで。今回はGutenbergの画像の乗っけ方じゃ。

ぐず夫
ぐず夫
画像?
そんなん今さらやるんか。
トリ師匠
トリ師匠
そらそやろ。
まだ補足の部分足してないんやから。
ぐず夫
ぐず夫
ふーん。ならやっといてくれてもええで。
トリ師匠
トリ師匠
おんどれがやるんじゃ!
さっさと用意せえ!!

ということで、基本的な投稿方法【Gutenberg編】の画像挿入について確認してみましょう!

Gutenbergの画像挿入も大きくは変わらない?

変更点は?

トリ師匠
トリ師匠
正直言って難しいことはないんやけど、せっかくやで1個ずつ確認してくで。

ぐず夫
ぐず夫
難しくないならせぇへんでもええやん。
トリ師匠
トリ師匠
…ならやめよか。
そのかわり、もう何もかも全部辞めるで。ほなサイナラ。
ぐず夫
ぐず夫
そない怒らんでもええやん。な、ほれ、さっさといくで、いくんやろ?
トリ師匠
トリ師匠
ふん、最初からその気を出し!
記事に画像を入れる意味なんかはこっちに書いてるで、気になる人は見たってな。ほなさっさといくで!

Gutenbergで画像を設定してみよう!

トリ師匠
トリ師匠
まずはGutenbergの投稿画面を確認じゃな。ここは見出しの準備が終わったところからいくで。見出しと同じように、最初は「文章を入力、または/でブロックを選択」と書かれたとこに、マウスを持ってってみるで。

マウスで選択

トリ師匠
トリ師匠
すると左側に「+」マークが出てくるで、そいつをクリックや。そしたら使えるブロックの種類が表示されるで、一般ブロックの中から「画像」を選択するんじゃな。そしたら画像ブロックが挿入されるで。
画像ブロック選択
「一般ブロック」から「画像」を選択
トリ師匠
トリ師匠
次は画像のアップロード方法を選択や。「アップロード」から直接選んだってもええし、「メディアライブラリ」から選んでもええけど、今回は「メディアライブラリ」を選択した場合を説明しよか

画像ブロック選択画面

トリ師匠
トリ師匠
「メディアライブラリ」を選択すると、これまでに挿入した画像の一覧が表示されるで。使いたい画像がなければ「ファイルをアップロード」タブを選択して画像を追加じゃ。

メディアファイルの追加

トリ師匠
トリ師匠
続いて「ファイルを選択」ボタンを押して、自分のパソコンから使いたい画像ファイルを選択するんや。ここはクラシックエディタも同じやったな。

ファイルを選択し決定

トリ師匠
トリ師匠
そしたらアップロードしたファイルが一覧に表示されるから、そいつを選んで右下の「選択」で決定しよか。これでひとまず画像の挿入が完了や。

ファイル選択完了

画像挿入完了
画像が入りました。でもチョット待って!!
トリ師匠
トリ師匠
でもちょっと待つんやで。まだ設定せなあかんポイントが4つあるんや。
ポイントはクラシックエディタと同じやけど、Gutenbergはちょいと設定する場所が違うから1個ずつ順々に見てみよか。
設定すべきポイントはこちら!

① 「代替テキスト」
② 「リンク先」
③ 「サイズ」
④ 「配置」

トリ師匠
トリ師匠
クラシックエディタやと画像をアップしたとこで全部出来たんやけど、Gutenbergは一部ちゃうで気ぃつけてな。

①代替テキストを設定しよう!

トリ師匠
トリ師匠
まずは挿入した画像を押してみよか。すると右の表示欄が画像ブロックの設定表示になるで。そこに「Altテキスト(代替テキスト)」て欄があるやろ。ここの設定をしたるんやな。

代替テキスト欄確認

トリ師匠
トリ師匠
クラシックエディタで書いた内容とかぶるけど、「代替テキスト」の欄には「画像の簡単な説明」を書くんやで。例えばパパイヤの絵ぇなら、「酸っぱそうなパパイヤ」とかやな。
代替テキスト入力例
端的に絵の説明を記入しよう!
トリ師匠
トリ師匠
ちなみにここが空欄やと、検索サイトさんがどんな画像か分からんくて、結果的に「謎なもん置いてるサイトや!」て判断されて損するからな。忘れんように設定するんやで。

②リンク先を設定しよう!

リンク先の設定

トリ師匠
トリ師匠
代替テキストと同じで、「リンク設定」の部分で設定できるで。ここで設定する中身の詳細はクラシックエディタでも全く同じやから、下を参考に設定したってな

◆リンク先の設定はコチラ!

トリ師匠
トリ師匠
ちなみにテーマがLuxeritasやと、「メディアファイル」を選択した時の見た目も変えられるで。詳しくは下を見たってな

③画像のサイズを設定しよう!

トリ師匠
トリ師匠
ここもリンク先と同じじゃ。「画像サイズ」の部分で表示させるサイズを選べるで。きっちり表示させたいサイズがあるなら、「画像の寸法」で細かく設定することも可能やで覚えとき。

画像サイズ設定

ダンパ
ダンパ
ちなみに「画像サイズ」の項目で選べるサイズは、上の「ファイルのアップロード」で画像をアップしたときに自動生成されたものが選べます。自動生成される画像サイズの設定は、「プラグイン」または「Luxeritas(テーマ)」の設定にて変更が可能です。

◆プラグイン(EWWW Image Optimizer)の場合はこちら!

◆Luxeritas使用の方はこちら!

④画像の配置を変えよう!

トリ師匠
トリ師匠
画像は投稿表示内の左右好きな位置に表示できるんや。画像をクリックすると、上に画像の寄せが表示されるで。ここやと、本文の「左寄り」か、「中央」、もしくは「右寄り」が選択できるな。

画像をクリックすると表示される

トリ師匠
トリ師匠
画像のサイズにもよるけど、「左寄り」「右寄り」の場合は、回り込み表示(画像の左右に文字入力ができる)になるで。

画像左寄り

トリ師匠
トリ師匠
画像の下に新しいブロック作ってテキスト打ってみると画像の左右に文章打てるで!
画像右寄り
画像ブロックの下でブロック(段落ブロック等)を作ってテキスト入力や!
トリ師匠
トリ師匠
ちなみにこれやと使いにくいって人は、レイアウト要素ブロックの「メディアと文章」を使ってみてな。これやと最初から画像と文章の領域が分かれたブロックができるで分かりやすいかもしれへんわ。その場合も画像は上の①~③の設定したってな!

メディアと文章ブロック

トリ師匠
トリ師匠
①~④で画像の挿入は完了じゃ。簡単やったやろ?

アイキャッチ画像とOGP画像の設定は?

トリ師匠
トリ師匠
一応クラシックエディタに合わせて追記しとくで。基本的には設定方法も同じやで、下の画像とリンク先を参考に設定したってな!

◆アイキャッチ画像設定はコチラ!

アイキャッチ追加欄
設定ボタンはこちらに変更されています

◆OGP画像設定はコチラ!

og追加欄
こちらはクラシックエディタと基本的に同じです
ダンパ
ダンパ
ちなみに「アイキャッチ画像」窓がない場合は、画面右上(公開するボタンの右隣)の「︙」ボタンをクリックし、オプションボタンを選択すると表示したい項目の一覧が表示されますので、必要な項目にチェックを入れ、設定してみてくださいね。
オプション選択
右上の「︙」を押し、「オプション」を選択
欄を追加
必要なオプションを追加してください

Gutenbergのクラシックブロックで画像挿入はできないの?【疑問】

トリ師匠
トリ師匠
ちなみにやけど、テーマがLuxeritas(Ver3.4.0~)ならクラシックブロックの中でも画像が追加できるで。ブロック内の画像を入れたい場所を選択して、項目の「挿入」タブの中から「メディアを追加」を選んでやると同じように画像を入れることができるで。
クラシックブロックで画像追加
①画像を入れたい場所を選択し、②挿入を選び、③メディアを追加
トリ師匠
トリ師匠
この方法やったら中身はクラシックエディタと基本同じやで、クラシックエディタの画像投稿を参考に設定したってな!

◆クラシックエディタの画像投稿はコチラ!

まだまだ追記作業中です

ぐず夫
ぐず夫
画像挿入の方法はこれでええかの。
トリ師匠
トリ師匠
かなーり大雑把やけど、まあええやろ。でもまだ項目残ってるで、さっさと作るで、さっさと!
ぐず夫
ぐず夫
少しだけ休ませてくれや。
5年くらい……
トリ師匠
トリ師匠
だったら永遠に眠らせたろか?
ぐず夫
ぐず夫
鬼や、鬼やで…

ということで、Gutenbergの投稿補足3でした。

ではまた次回!