2023年2月11日/初心者向けにブロックエディター〈Gutenberg)で画像を挿入する基本的な方法を解説します。ブロックエディターは直感的にブロックを挿入しながらページを作成していきます。画像の挿入も直感的・簡単にできますが、テキストが入ってくると、その方法によって、テキストと画像の配置が異なってきます。画像挿入の基本と、画像とテキストの配置のパターンについて分かりやすくご紹介します。WordPress(ワードプレス)のブロックエディター(Gutenberg)の使い方についての記事の総まとめです。★無料体験後は月額1500円。画像挿入の基本(画像ブロック)※超初心者向け画像を挿入する基本です。画像ブロックを使います。「文章を入力、または/でブロックを選択」右側の+ボタンをクリック。ブロック一覧から「画像ブロック」を選択します。「アップロード」と「メディアライブラリ―」から選択できます。ここでは、アップロードが済んでいるものとし、メディアライブラリ―を選択します。メディアライブラリーから挿入する画像を選択し、「選択」ボタンをクリックします。画像が挿入されました。画像が挿入されました。ここで、各項目の設定を行います。Altテキスト(代替テキスト)Webサイト内に含まれている画像や動画が何らかの原因で表示されなかった時、代わりに表示するテキストです。「画像サイズ」の項目では、「ファイルのアップロード」で画像をアップしたときに自動生成されたものから選べます。「画像の寸法」では、サイズを細かく調整できます。画像の右側と下にある丸い点をドラックしても画像サイズを変更できます。画像の配置を決定3をクリックすると、画像の配置を選択できます。画像のリンクを設定できます。キャプション画像のキャプションを記載します。画像はパソコンから直接アップロードすることも可能です。PCから画像をブロック上にドラックすると、画像が挿入されます。画像が挿入されました。段落ブロック(テキスト)の上に画像ブロックがあります。どちらかのブロックを使います。これらの方法については、こちらの記事で詳しく解説しています。テキストや画像を横並びに表示させたい。HTMLやCSSを使わずに画像やテキストをサクっと並べたい。したご希望におこたえします。「ブロックエディター」(Gutenbe...この場合、画像とテキストは別々のパーツ(ブロック)になっており、画像の周りにテキストは回り込みません。パソコンではこのように表示されます。以下はスマホの場合です。左側が写真の下にテキスト、右側は2列に表示されています。左側は「画像とメディア」ブロックの設定で「モバイルでは縦に並べる」をONとした場合、右側はOFFにした場合です。(このON・OFFについても先の関連記事で解説しています。)「モバイルでは縦に並べる」をON「モバイルでは縦に並べる」OFF画像がある程度大きい場合は、スマホでは1カラムになるレイアウトがベターだと思います。画像が小さい場合は、上の右のレイアウトだとイマイチなので、回り込む形(次の解説)がよいと思います。2「画像ブロック」+「段落ブロック」を使った場合(テキスト回り込み有り)23は、1とは違い、テキストの中に画像を挿入する形で、テキストが回り込みます。「画像ブロック」とテキストに「段落ブロック」を使った場合です。以下の画像は「段落ブロック」でテキストを挿入しています。「段落ブロック」の前にブロックを挿入します。+マークをクリックしてブロック一覧から画像を選択します。上部左側のメニューバーで画像の配置を選択できます。画像配置で「右寄せ」「左寄せ」を選択すると画像がテキストの中に挿入されます。画像は「右寄せ」の場合です。テキストが回り込んでいますね。画像配置を左寄せにした場合こちらもテキストが回り込んでいます。スマホの表示スマホでもテキストが回り込んでいます。回り込みを解除する方法テキストの量が少ない場合、回り込みの解除しないと、次の項目の内容も回り込んでしまいます。回り込みの解除をする方法です。以下の画像は、テキスト(赤色)の右に写真を配置し、そのあとに、次の内容(青色テキスト)を挿入した場合です。回り込みを解除しないと、以下の画像のように、次の内容(青色いテキスト)も回り込みして、写真の横に配置されてしまいます。both;"></div>のコードを記載します。回り込みが解除され、青色テキストが写真の下部に表示されました。3クラシックブロックを使った場合(テキスト回り込み有り)今度はクラシックブロックを使った方法です。旧エディターと同様の方法です。クラシックブロックを選択します。テキストを記載します。カメラマークをクリックして、画像を選択します。画像が挿入されました。画像を選択すると、配置を変更することができます。この方法でもテキストは回り込みます。まとめ画像を挿入する作業は頻繁に行うので、効率よく行いたいものです。挿入の方法によっては、予期せぬ配置になることがあるので、各パターンを理解しておくとよいと思います。その上で、使いやすい方法を選び、作業効率アップにつなげましょう。当サイトもSWELLを使っています。詳細記事公式サイトWordPress全般ブロックエディターよかったらシェアしてね!URLをコピーしました!URLをコピーしました!tsutchii(ツッチー)WordPressやブログに関する情報、中高年の学びや副業などについて書いています。管理人は、子供の英語教育のため、7年前、家族でフィリピンのセブに移住した引きこもり系おじさんです。これまで、ローカル紙記者、住宅会社や病院の広報、WEB担当、介護助手といった仕事をしてきました。今はNPO法人のサイト運営などネットで仕事をしながら、場所にとらわれずに生活していける働き方を模索しています。