ブロックエディター

【WordPress】ブロックエディターの使い方とよく使う基本ブロック

WordPress ブロックエディターの種類と使い方 画像
WEB Creator

ブロックエディターとは

WordPressに標準で搭載されている「ブロックエディター」は、ホームページやブログの記事を作るためのとても便利なツールです。

文章や画像を“ブロック”というパーツごとに組み立てていく編集スタイルで、

例えば、

  • 見出しは「見出しブロック」
  • 本文は「段落ブロック」
  • 画像は「画像ブロック」
  • ボタンは「ボタンブロック」…

というように、ひとつひとつの要素が“ブロック”になっていて、
ブロックを「追加・並べ替え・削除」することで、自由にページを作ることができます。

さらに、それぞれのブロックには特別な機能がついていて、たとえば「見出しのデザインを変える」「背景に色をつける」「文字のサイズを大きくする」など、直感的に設定を変えられるので、専門的な知識がなくてもプロっぽいデザインを作ることができます。

初心者の方でも安心して使えるように作られているので、「こんなデザインにしたい」「ここに画像を入れたい」というアイデアをすぐ形にすることができます。
ブロックエディターを使うことで、記事やページをより魅力的に仕上げることができるのです。

慣れれば自由自在にカスタマイズできるようになるので、種類や使い方を覚えていきましょう。

ブロックエディターが苦手な方へアドバイス

  • 最初は「段落」「見出し」「画像」の3つだけ使えればOK!
  • 「+」マークを押すと追加できるブロックが一覧で出てきます
  • よく使うブロックはお気に入り登録しておくと便利です

ブロックエディターの使い方

ここでは、「写真」を挿入したい場合を例にして進めていきます。

投稿画面左上の「+」をクリックする。
「画像」をクリックする
画像のアップロード方法を選ぶ

画像ブロックを追加すると、次の3つの選択肢が出てきます:

方法内容
📁 アップロード自分のパソコンから画像を選んで新しくアップロードする
🖼 メディアライブラリすでにアップ済みの画像を一覧から選ぶ
🔗 URLから挿入外部サイト上の画像URLを貼って表示する
(※非推奨。あまり使う機会がない)

新規に写真をアップロードすると「メディアライブラリ」に保存されるので、同じ画像を他の記事で使うときは「メディアライブラリ」から選ぶと
時短&容量節約!

画像サイズや配置を調整する(必要であれば)

画像を挿入したら、すぐにその場で以下の調整ができます。

  • 配置: 左寄せ/中央/右寄せ/幅広(テーマによる)
  • サイズ変更: 角をドラッグで調整、もしくは右側の「ブロック」タブから数値指定
  • 代替テキスト(alt): 画像が何かを説明するテキスト(SEO・アクセシビリティ向上)

画像ブロックのように、ブロックエディターでは「文字を書く」「見出しをつける」「ボタンを設置する」といった作業も、すべて専用のブロックを使って行います。

WordPressのブログ記事は“ブロックの組み合わせ”で成り立っているということ。

画像だけでなく、テキスト、リスト、動画、引用など…
用途に合わせて選べるブロックの種類はとても豊富です。

ここからは、初心者さんに覚えてほしいよく使う基本ブロックをいくつかご紹介します!

ブロックエディターの種類

段落ブロック

ブログ記事の基本単位で、テキストを記述するためのブロック。
文字サイズ、色、背景色、文字間隔などが調整可能です。

使い方:

  1. ブロックを選択してテキストを入力する
  2. サイドバー(右側)で「文字サイズ」「色の設定」「背景色」を調整する
  3. フォーマットバーで太字、斜体、リンク挿入を設定する
  • 記事の本文作成に使用する
  • 背景色を利用して、特定の段落を目立たせる

見出しブロック

見出しを作成するためのブロック。
H1~H6までの階層があり、SEO対策にも役立ちます。

使い方:

  1. 見出しブロックを追加し、テキストを入力する
  2. H2やH3など「見出しレベル」を選択する
  3. 「配置設定」で左揃え、中央揃えを調整する
  • 記事の構造を分かりやすく整理することができる
  • 記事のタイトルにはH1、記事の本文にはH2~H3を使用する

画像ブロック

画像を挿入し、キャプションやリンク、代替テキストを設定する。

使い方:

  1. 画像ブロックを選択し、「アップロード」「メディアライブラリ」「URL入力」のいずれかで画像を挿入する
  2. サイドバーで「幅」「高さ」「代替テキスト」を設定する
  3. 必要に応じてリンクやキャプションを追加する
  • 画像の代替テキストを設定してSEOを強化する
  • 記事内に適切な位置で視覚的なインパクトを与える

リストブロック

箇条書きリストまたは番号付きリストが作成できる

使い方:

  1. リストブロックを選択し、各項目を入力する
  2. 「インデント」を使用して階層化する
  3. サイドバーでリスト全体のカスタマイズを行う
  • ステップ形式で手順を説明する
  • 長文を箇条書きにして見やすくする

カラムブロック

機能:
ページを複数の列(カラム)に分割して、異なるブロックが挿入可能になる。

使い方:

  1. カラムブロックを挿入し、列数(例:2列、3列)を選択する
  2. 各カラムにテキスト、画像、リストなどのブロックを配置する
  3. サイドバーでカラム間のスペースや配置を調整する
  • 比較表や製品紹介に使用する
  • 左に画像、右に説明文を配置するレイアウトなどが可能になる

ボタンブロック

クリック可能なボタンが作成でき、リンク先を指定できる。

使い方:

  1. ボタンブロックを挿入し、ボタンのテキストを入力する
  2. 「リンク先」を設定して、外部サイトや内部ページにリンクする
  3. サイドバーでボタンの形状(角丸、四角)、色、サイズを調整する
  • 購入ボタンや問い合わせリンクとして使用する
  • キャンペーンや特集ページへの誘導にも

テーブルブロック

シンプルな表を作成し、行や列が追加できる。

使い方:

  1. ブロックを挿入し、行数と列数を設定する
  2. 各セルに内容を入力する
  3. サイドバーで「ストライプ模様」や「境界線」を設定する
  • 価格比較表や商品スペック表が作成できる。
  • FAQ形式で情報が整理できる

カバーブロック

背景画像や背景色を使用したセクションを作成する

使い方:

  1. カバーブロックを挿入し、背景画像または色を設定する
  2. 上にテキストやボタンを追加する
  3. サイドバーで透明度や配置を調整する
  • セクションの冒頭に視覚的なインパクトを追加する
  • キービジュアルやキャンペーン告知に使用

埋め込みブロック

YouTube、Twitter、Instagramなど外部サイトのコンテンツを埋め込む

使い方:

  1. 「埋め込み」ブロックを選択し、対応するサービスを選ぶ
  2. 埋め込みたいURLを入力する
  3. サイドバーで埋め込みサイズを調整する
  • 動画やSNS投稿を直接記事に表示できる。
  • 外部リソースを活用して情報の補足ができる

再利用可能ブロック

機能:
よく使うデザインや構成を保存して、別の記事で再利用ができる。

使い方:

  1. 作成したブロックまたは複数ブロックを選択し、「再利用可能ブロックとして保存」する
  2. 他の記事で「再利用可能ブロック」から選択して挿入する
  3. 編集内容を変更すると、すべての適用箇所に反映される
  • 広告バナーや署名部分を統一したデザインにする
  • 一貫性を保ちながら作業時間が短縮できる

追加のTips

  • ショートカットキー: ブロックエディターでは「/」を入力すると、ブロック検索が可能。
  • プレビュー: 作成中のブロックデザインをリアルタイムで確認。
  • ドラッグ&ドロップ: ブロックを上下に移動して簡単に再配置。

まとめ

ブロックエディターは、WordPressの投稿やページを作成するための強力なツール。

基本機能を活用するだけでも、美しく整ったコンテンツが簡単に作成できます。

読むだけではなかなか理解できないと思いますので、まず基本的なブロックを試しながら慣れることが大切です。

ブロックエディターを使いこなすことで、デザイン性と生産性の両方が向上するので、各ブロックの特性を理解し、記事やページに適切に活用していきましょう!

ブロックエディターの魅力を最大限に活かすには「テーマ選び」がカギ。

せっかくなら、編集画面がもっと使いやすくなるテーマを選んでみませんか?

ブロックエディターと相性バッチリな、
初心者さんにもやさしいWordPressテーマを2つ厳選しました!

👇 クリックしてチェックしてみてください!

ABOUT ME
miki
miki
WEBデザイナー/Canva公式クリエイター
PC1台からスタートした起業生活は、今年で20周年を迎えました。2023年よりCanva公式クリエイターとして大好きなWEBデザインに本格的に携わるようになり、“デザインの力で、想いを届ける”ことの面白さと奥深さに惹かれ、2024年より、女性起業家をサポートするサービスをスタート。 SNS×WEBサイトの掛け算ブランディングで、 「売る」ための発信ではなく、「伝わる」から選ばれる仕組みづくりを構築。 あなたの“らしさ”を言葉とデザインで丁寧に形にし、理想のお客様にしっかり届く“わたしのしごとサイト”を一緒に創っていきます。
記事URLをコピーしました