MENU
おすすめの記事
WordPressテーマ『SWELL』を使った素敵なサイト、ブログを集めました!!

2024年4月にリニューアルしました!絞り込み検索やお気に入り機能もあります。ぜひ見ていってください!

さとしん
WordPressとSWELLが好きなブロガー。
ブロックエディターに出会ってWordPressが楽しくなりました。
WordPressのこと、SWELLのこと、ブロックエディターのことを熱く語るブログです。
【2024/10/24】SWELLサイト事例集を更新しました!→【20241024】SWELLサイト集更新!→クリックタップ

【画像ブロックの使い方】ブロックエディターの画像挿入方法!テーマ独自のデザインも紹介

当ページのリンクには広告が含まれています。
【画像ブロックの使い方】ブロックエディタの画像挿入方法!テーマ独自のデザインも紹介
  • URLをコピーしました!

WordPressのブロックエディターで記事内に画像を挿入する方法を紹介します。

ブロックエディターでは「画像ブロック」というブロックで画像を挿入できます。

この記事の内容
  • 画像ブロックの使い方
  • テーマやプラグインで拡張される画像スタイルの紹介
  • 画像ブロックと類似のブロックの紹介
画像ブロックを使っている動画

※詳しくは「画像ブロックの基本的な使い方」で紹介

WordPressのテーマによっては、画像ブロックの機能が拡張されていて、画像の周りにシャドウ(影)を付けたり、画像を色々な形にトリミングしてくれるものもあります。

最近よく見かける、流体シェイプのスタイルを適用できるテーマもあります。

この記事では、基本的な画像ブロックの使い方や、テーマ、プラグインによる機能やデザインの違いを紹介していきます。

では、WordPressブロックエディターの画像ブロックの使い方を紹介していきます。


ブロックエディターガイド

WordPressブロックエディターの使い方をまとめたガイドを作りました。

目次

画像ブロックの基本的な使い方

ブロックエディターの画像ブロックの使い方を紹介していきます。

STEP
メインコンテンツエリアで+ボタンをクリック
ブロックの追加
STEP
画像を探してクリック
画像ブロックの使い方-1
STEP
3種類の方法で画像を挿入する
  1. アップロード
  2. メディアライブラリ
  3. URLから挿入
画像ブロックの使い方-2

画像ブロックの中に、画像ファイルを直接ドラッグ&ドロップしても画像が挿入もできます。

これで、基本的な画像ブロックの使い方は以上です。

さとしん

特にドラッグ、ドロップで挿入できるのは凄く便利…!

ちなみに、ブロックエディターでは、段落ブロック内に「/ + ブロック名」を入力することでブロックを検索して呼び出すことができます。

画像ブロックの場合は、以下の名称でブロックを呼び出すことができます。

  • /image
  • /画像

記事を書くスピードも早くなるので、覚えておきましょう。

画像のサイズや形状などスタイルの変更

サイドバーから画像ブロックのスタイルを編集することができます。

画像ブロックの使い方-3

スタイルは以下の2種類から選択できます。

デフォルト

さとしん

角丸

さとしん

画像サイズは以下の方法で変更することができます。

画像を直接触ってサイズ変更

画像の周りの青丸部をドラッグすることでサイズを直感的に変更できます。

画像ブロックの使い方-4
サイドバーから画像サイズ変更

サイドバーの「画像設定」→「画像サイズ」から4段階のサイズを選択できます。

画像ブロックの使い方-5
ちなみに…

この4つのサイズは、WordPress管理画面の「メディア設定」の数値と連動しています。

画像ブロックの使い方-6

また、選択した画像サイズに対しての寸法を「画像の寸法」欄で入力できます。

画像ブロックの使い方-7

Altテキストやキャプションなどその他の設定項目

挿入する画像には、画像の内容を完結に説明したAltテキストを入力しておくようにしましょう。

「画像設定」の「Altテキスト(代替テキスト)」から入力できます。

また、画像の下にキャプションを入力することもできます。入力したキャプションへのリンク(URL)の設定も可能です。

画像ブロックの使い方-8

挿入する画像を変更したい場合は置換タブから

挿入した画像を別の画像に差し替えたいという場合は、画像を選択し、ブロックツールバーの「置換」タブをクリックすることで画像の差し替えができます。

画像ブロックの使い方-9

差し替え時の画像挿入方法は、通常の画像ブロックと同じです。

その都度画像ブロックを削除してから新しい画像ブロックを挿入する必要はないので、覚えておきましょう。

画像ブロックのデザインはテーマやプラグイン次第でアレンジできる!

WordPress本体側で用意されている画像ブロックですが、WordPressテーマや関連プラグインを使うことによって、便利機能が追加されたり、選べるデザインも増えます。

今回は、100%GPLの3つのWordPressテーマやプラグインの画像ブロックの機能をご紹介します。

さとしん

テーマ選びで悩んでいる方には良い判断材料になるかも…!

SWELLの画像ブロックはシンプルな装飾ができる!

WordPressテーマ『SWELL』
』公式サイト

ブロックエディター完全対応のWordPressテーマ『』では、追加のプラグインなど不要で、テーマを適用するだけで画像ブロックの機能が拡張されます。

SWELLの画像ブロックでは以下のようなスタイルが追加されます。

  • 枠あり
  • 影あり
  • フォトフレーム
『SWELL』の画像ブロック
さとしん

僕は影付きのスタイルが好きです…!

フォトフレーム風も使いこなせたら、一気にサイトの雰囲気がオシャレになりそうです。

SWELLオリジナルのバナーリンクブロックは画像上に文字を書ける

SWELLには標準の画像ブロック以外に、『バナーリンクブロック』という専用のブロックが用意されています。

このブロックを使うと、挿入した画像の上にテキストを入力して、画像全体をリンクにすることができます。

画像の上に被せるカラー選択やブラー効果なども追加できます。

画像を編集する環境が無い方でもオシャレな画像リンクを作ることができます。

ブラウザやデスクトップ風の画像スタイルが追加されました!!

Ver.2.3.3で素晴らしいスタイルが2種類追加されました。

以下の2つです。

ブラウザ風

WebNote+のトップページ
WebNote+

デスクトップ風

WebNote+のトップページ
さとしん

これ、凄くないですか…!

自分のサイトを表示したり、Web制作者さんなどは自分が作ったサイトの実績を表示する特にものすごく便利です。

ちなみに、このスタイルは画像ブロック以外にも、動画ブロックとグループブロックでも適用可能です。

この2種類のスタイルについては以下の記事でまとめました。

Snow Monkey Editorの画像ブロックは流体シェイプが設定できる

WordPressテーマ『Snow Monkey』
Snow Monkey』公式サイト

WordPressテーマ『Snow Monkey』の関連プラグイン『Snow Monkey Editor』も画像ブロックの機能を拡張してくれます。

『Snow Monkey Editor』は無料でインストールできて、Snow Monkey以外のテーマでも使用可能です。

『Snow Monkey Editor』では、以下のように選択できるスタイルが拡張されます。

  • 流体シェイプ×3種類
  • 影付き
Snow Monkey Editorの画像ブロック

流体シェイプは最近のWebサイトでも良く見かけるスタイルです。

トップページなどで上手く使ってあげると、オシャレでトレンドをおさえたデザインが作れますね。

さとしん

僕は流体シェイプデザインはお気に入りです…!

VK Blocksはスタイルが豊富!傾いたフォトフレームがオシャレ!

WordPressテーマ『Lightning』
Lightning』公式サイト

VK Blocks』は株式会社ベクトルさんが開発された無料プラグインです。

ベクトルさんはWordPress公式ディレクトリに登録されている無料テーマ『Lightning』や、上位版である『Lightning Pro』、『Katawara』という有料のWordPressテーマを開発されています。

有料テーマのライセンスを購入すると上位版の『VK Blocks Pro』というプラグインを使用できるようになります。

『VK Blocks』では以下のようにスタイルが拡張されます。

  • 流体シェイプ×4種類
  • フォトフレーム×3種類
  • 枠線
  • シャドウ
VK Blocksの画像ブロック

VK Blocksはかなりバリエーションが豊富です。多すぎてどのスタイルを使うか迷ってしまいそうですね。

さとしん

僕は傾いたフォトフレームがオシャレで好きです…!

複数画像挿入のギャラリーブロックやメディアと文章ブロックも便利!

ここまで画像ブロックの使い方や、テーマ、プラグインによるデザインや機能の違いをご紹介してきました。

WordPressのブロックエディターには画像ブロック以外にも画像を挿入できるブロックがあります。

今回は、以下の2つを簡単にご紹介しておきます。

  • ギャラリーブロック
  • メディアと文章ブロック

ギャラリーブロック

ギャラリーブロックでは、複数の画像を並べて表示することができます。

スマホ表示では基本2列になりますが、PC表示ではカラム数も選択可能です。

また、画像内にキャプションを入力することもできます。

さとしん

何かの紹介記事で複数の画像を一覧で見せたいときに使えますね…!

メディアと文章ブロック

こちらは名前の通り、メディア(画像や動画)と文章を並べてレイアウトできるブロックです。

サイト内のページを作りこむ際にとても重宝するブロックです。

最近のWebサイトで良く見かける、画像に文字の一部が重なっているようなレイアウト(ブロークングリッド)も簡単に作成可能です。

上記のスタイルは『』に用意されているブロックパターンから簡単に呼び出して配置してみました。

適度に画像を挿入して分かりやすいコンテンツを作りましょう

自分が紹介したい商品やサービスの魅力を伝えたり、手順を解説する記事には画像が必須ですよね。

ブロックエディターの画像の挿入方法は必ず覚えておきたいです。

特にドラッグ&ドロップだけで挿入できるのは本当に楽ちんなので、活用しましょう。

また、画像ブロックは、テーマやプラグインによっていろいろなデザインが追加されています。

WordPress標準の画像ブロックスタイルでは少し物足りないと感じる場合は、今回紹介したテーマやプラグインの導入をぜひ検討して見てください。

今回は以下の3つのテーマとプラグインをご紹介しました。

  • SWELL(テーマ)
  • Snow Monkey Editor(プラグイン)
  • VK Blocks(プラグイン)

ブロックの細かい機能ひとつひとつもテーマ選びの判断材料になると思っています。

ブロックエディターで楽しくコンテンツを作っていきましょう。

最後まで読んでいただき、ありがとうございました。


ブロックエディターの関連記事

ブロックエディターの使い方完全ガイド↓↓

ブロックエディターの便利機能
テーマやプラグイン独自のブロック機能
【画像ブロックの使い方】ブロックエディタの画像挿入方法!テーマ独自のデザインも紹介

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次