WordPressブロックエディタの使い方!HPに使えるブロック25選

WordPressブロックエディタの使い方!HPに使えるブロック25選

【2026年6月11日更新】WordPress7.0の環境をもとに情報を更新しました。

この記事のレベル

初心者 (4.0)
重要度 (3.0)
難しさ (2.5)

こんにちは、編集長のカワウソです!

「WordPressでページを作成しようとしたけど、使い方がいまいち分からない……」と悩んでいませんか?

現行のWordPressでは、テキストや画像などのコンテンツをブロック単位で管理していく、「ブロックエディタ」という編集機能を使うのが基本です。
ブロックエディタを使えば、初心者の方でも簡単にページを作成できます。

とはいえ、初めてWordPressを使う方にとっては、分からないことも多いはず。

そこで今回は、ブロックエディタの基本的な使い方を解説します。

カワウソ

この記事は次のような人におすすめ!

  • WordPressで会社のホームページを作る人
  • ブロックエディタの使い方を知りたい人
  • 会社ホームページ作りに役立つブロックの種類を知りたい人

この記事では、あらかじめWordPressに用意されているブロックのうち、ホームぺージ制作に使用する可能性が高いものを厳選して、使い方を解説します。

この記事を読めば、ブロックエディタの基本操作はもちろん、「どんなときに、どのブロックを選べばよいのか」が分かるため、ホームページ制作がはかどりますよ。

また、記事の後半では、「ブロックを増やせる無料のプラグイン」も紹介しているので、ぜひ最後まで読んでみてください。

それではどうぞ!

ブロックエディタの基本的な使い方

最初に、ブロックエディタの基本的な使い方を解説します。
ブロックエディタを使ってページを作成し、Web上に公開するまでの一連の流れを見てみましょう。

なお、操作環境は以下のとおりです。

WordPress:7.0
テーマ:Twenty Twenty-Five(デフォルトのテーマ)

WordPressのバージョンはもちろん、使用するテーマやプラグインなどによって、画面操作が多少異なることもあるので、あらかじめご了承ください。

テーマやプラグインについては、それぞれ以下の記事で解説しています。

ブロックエディタの編集画面の見方

まず、ブロックエディタの編集画面の見方を知っておきましょう。

まずは、WordPressのメインナビゲーション(左のサイドバー)から、「固定ページ > 固定ページを追加」をクリックしてください。

固定ページ > 固定ページを追加

すると、固定ぺージにおける、ブロックエディタの編集画面が開きます。

ここでは、最低限知っておきたい、ボタンやエリアなどの役割を解説しますね。

ブロックエディタ編集画面の説明
番号項目説明
 1「画面左上」と「画面中央」の2か所に設置されており、ブロックを追加するときに使います。
 2ページの編集エリアここにブロックを追加していき、ページを作成します。
3ブロック設定サイドバー
(設定カラム)
選択したブロックの各種設定を行うときに使います。
選択したブロックによって、設定項目が変わります。
 4下書き保存ページを下書き保存するときに使います。
5プレビューページをプレビューするときに使います。
6ズームアウトページ全体を一覧表示して、各セクションの配置や構成を確認できます。
7設定ブロック設定サイドバーの表示/非表示を切り替えるときに使います。
8スタイルページ全体や選択したブロックの色や文字サイズなどのデザインを変更できます。
9公開ページをWeb上に公開するときに使います。
10オプションブロックエディタの表示モードや、エディタの種類を切り替えるときに使います。

ブロックの基本操作3つと+αの豆知識

次に、ブロックの基本操作を3つ解説します。

ブロックの基本操作
  1. ブロックの追加
  2. ブロックツールバーの操作
  3. ブロック設定サイドバーの操作

また、ぜひ知っていただきたい+αの豆知識として、「リスト表示」も解説しますね。

ブロックの追加

ブロックは左上、もしくはページ編集エリア内の「+」から、追加することが可能です。

「+」をクリック

以下は、左上(1)の「+」をクリックしたときの画面で、すべてのブロックが表示されています。

ブロックの選択

なお、ブロックは「テキスト」や「メディア」などの、カテゴリごとに分けられています。

そのほか、検索窓からブロックを探すことも可能です。

ページ編集エリア内(2)の「+」をクリックした場合は、いくつか抜粋されたブロックが表示されます。

ブロックの選択

この抜粋されたブロックは、直近使用したものに都度変化しますよ。

こちらでも、検索は可能です。

なお、「すべて表示」をクリックすると、ブロックの一覧が表示されます。

ブロックツールバーの操作

ブロックの追加後(または選択したとき)には、以下のような「ブロックツールバー」が現れます。

ブロックツールバーの操作説明

ブロックツールバーの設定項目は、追加(選択)したブロックによって変わります。

ここでは、「見出しブロック」を例に、共通の設定項目について解説しますね。

番号項目説明
 1元に戻す直前の操作を取り消して、一つ前の状態に戻します。
 2やり直す取り消した操作を再度実行して、元の状態に戻します。
3ドキュメント概観リストビューが表示されます。
 4上に移動/
下に移動
クリックすることで、上や下にブロックを移動できます。
5オプションブロックを複製したり、削除したりできます。
そのほか、ブロックをHTMLとして編集することも可能です。
ブロックツールバーのオプション

カワウソ

ブロックとブロックの間に、新しいブロックを追加するときは、このオプションの「前に追加」や「後に追加」が便利です。

ブロック設定サイドバーの操作

ブロックの設定は、画面右側の「ブロック設定サイドバー」からも可能です。

たとえば、「見出しブロック」であれば、色やサイズを指定できます。

ブロック設定サイドバーの説明

リスト表示を活用しよう(+αの豆知識)

ブロック同士を組み合わせたり、重ね合わせたりすると、ぺージ編集エリア内で特定のブロックのみを選択するのが、難しい場合があります。

そんなときにおすすめなのが、「リストビュー」です。

参考に、以下をご覧ください。

リスト表示の説明

画面左上(1)の「ドキュメント概観(三本線アイコン)」をクリックすると、各ブロックがリスト形式で表示されます。
ここで編集したいブロックを選択することが可能です。

また、「オプション(2)」をクリックすれば、ブロックの複製や削除もできます。

ブロックエディタでページを作成・公開してみよう

では実際に、ブロックエディタを使って、ページを作成および公開してみましょう。

記事作成の流れ
  1. タイトルを書く
  2. 見出しを追加する
  3. 本文(テキスト)を書く
  4. 下書き保存する
  5. ページを公開する

タイトルを書く

まずは、ページのタイトルを書きます。

「タイトルなし」をクリックすればカーソルが合うので、あとは文字を入力するだけです。

タイトルなし

ここでは「会社概要」と入力してみますね。

見出しを追加する

次に、見出しを追加します。
編集エリアにある「」から、「見出しブロック」を選んでクリックしてください。

見出しブロックを追加

ここでは「事業内容」と入力してみますね。

本文(テキスト)を書く

本文(テキスト)を書くときには、「段落ブロック」を用いるのが一般的です。

とはいえ、わざわざ「+」から「段落ブロック」を追加する必要はありません。
「ブロックを選択するには「/」を入力」に直接文字を入力すれば、結果的に「段落ブロック」を使った状態になります。

段落ブロックでテキストを書く

なお、改行や段落の追加については、あとで解説する「会社のホームページ制作に使えるブロック25選」のなかの「段落ブロック」で解説しますね。

下書き保存する

固定ぺージの編集内容は、定期的に自動保存されます。

しかし、あくまでも補助的な機能であるため、定期的に手動で「下書き保存」する癖をつけておくとよいです。

下書き保存
メモ

下書き保存したあとは、画面右側の設定カラム(固定ページ)から、「スラッグ(パーマリンク)」を変更しましょう。

スラッグ

デフォルトでは、タイトルが挿入されます。
日本語のタイトルだと、URLが以下のような表示になり、扱いづらくなります。

パーマリンクを日本語にした場合の表示例

たとえば会社概要ページなら「company」など、内容が分かる英単語がおすすめです。

パーマリンクは英単語の使用がおすすめ

ページを公開する

ページが完成したら、Web上に公開しましょう。
画面右上の公開から、できます。

公開

なお、公開をクリックすると、「公開してもよいですか?」と確認が入ります。
問題がなければ、再度公開をクリックしましょう。

会社のホームページ制作に使えるブロック25選

WordPressには、デフォルトで約100種類のブロックがあります。

ここでは、会社のホームページ作成に使えるブロックを、カテゴリごとに厳選してご紹介しますね。

テキスト系ブロック5種

最初に紹介するのは、テキスト系のブロックです。

テキスト系ブロック
  1. 見出しブロック
  2. 段落ブロック
  3. 整形済みテキストブロック
  4. リストブロック
  5. 引用ブロック

見出しブロック

「見出しブロック」は、見出しを追加するときに使います。

見出しのレベルは、ブロックツールバーでH1〜H6まで選ぶことが可能です。

見出しブロック

基本的には、コンテンツの階層構造に応じて、H2以下(H2〜H6)を選びましょう。

見出しブロックの活用例

というのも、WordPressでは、基本的にタイトルがH1として設定されます。

1ページのなかにH1を複数使うこと自体は、SEO(検索エンジン最適化)として、問題ありません(参考:Multiple H1 Headings: How to Handle Them for SEO & Accessibility?)。

しかし、見出しタグは階層構造を考慮して用いるのが基本です。

タイトルと同じレベルの見出し(H1)が本文内に存在すると、ページの主題や構造が分かりにくくなるおそれがあります。そのため、本文内の見出しにはH2以下を使用することをおすすめします。

段落ブロック

「段落ブロック」は、本文にテキストを入力するときに使います。

前述のとおり、わざわざ「+」から「段落ブロック」を追加する必要はありません。

「ブロックを選択するには「/」を入力」に直接テキストを入力すると、自動的に段落ブロックが適用された状態になります。

※HTMLのソースコードには「<p>〜</p>」が入ります。

段落ブロック

テキストを改行するときは、キーボードの「Shift+Enter」を押します。
※HTMLのソースコードには「<br>」が入ります。

テキストの段落を変えるときは、キーボードの「Enter」を押してください。
すると、再度「ブロックを選択するには「/」を入力」が表示されるので、さきほどと同じように、そのまま文字を入力しましょう。

文字の色やサイズは、画面右側のブロック設定サイドバーから指定することが可能です。

ブロック設定サイドバーから色を変更可能

文字色と背景色の組み合わせによってテキストが見づらい場合は、WordPressが警告メッセージを表示して知らせてくれます。

読みにくい色に対する警告

なお、段落内の特定の文字のみ色を変えたい場合は、あとで解説する「カスタムHTMLブロック」でHTMLコードを入力しましょう。詳しくは、のちほど解説します。

整形済みテキストブロック

「整形済みテキストブロック」は、「段落ブロック」同様に、本文にテキストを入力するときに使います。

ブロックを追加すると、以下のように表示されますよ。

整形済みテキストブロック

段落ブロックとの違いは、入力したとおりに改行や空白が表示される点です。

たとえば、「段落ブロック」は「Enter」を押すと、新しい段落(ブロック)が追加されます。
一方、「整形済みテキストブロック」は「Enter」を押すと、段落内で改行される仕様です。

また、「段落ブロック」が半角スペースを連続で入力しても、一つしか挿入されないのに対し、「整形済みテキストブロック」は入力した分だけ表示されます。

以下、全角と半角のスペースをそれぞれ8つ入れた場合における、「編集画面」と「実際の画面」の比較です。
「段落ブロック」のほうは、実際の画面では半角スペースが1つ分(青色部分)に減っていますよね。

▼編集画面▼

段落ブロックと整形済みテキストブロックの比較(編集前)

▼実際の画面(プレビュー後)▼

段落ブロックと整形済みテキストブロックの比較(実際の画面)

一つの段落の中で改行を多く使う場合や、タイピングしたとおりに表示させたい場合は、「整形済みテキストブロック」が便利です。

リストブロック

「リストブロック」は、テキストを箇条書きするときに使います。

参考に、以下をご覧ください。
製品の特長を「段落ブロック(青枠)」と「リストブロック(赤枠)」で比較してみました。

リストブロックの使用例

カワウソ

「リストブロック(赤枠)」のほうが、すっきりまとまっていますね。

また、「リストブロック」に文字を入力した状態で「Enter」を押すと、リストが一つ追加されます。

そのほか、リストの2つ目以下を選択した状態で、ブロックツールバーの「インデント」をクリックすると、字下がりします。

▼インデント適用前▼

インデントの説明

▼インデント適用後▼

インデントの適用後

「リストブロック」は階層を示すことができるため、サイトマップぺージ(ホームページの構成をユーザーに伝えるためのページ)を作るときにも便利です。

実際の手順は、以下の記事で解説しています。

メモ

ほかにも、リスト全体を選択すると、「順序付きリスト」を選べます。ただ、テーマによって反映されない場合もあるので、一度チェックしてみてください。

順序付きリストの説明

リスト全体を選択したいときは、「親ブロックを選択」ボタンが便利です。

親ブロックを選択

引用ブロック

「引用ブロック」は、第三者のコンテンツを引用するときに使います。

以下の赤枠部分に「引用文」、青枠部分に「引用元」を記載する仕様です。
引用元がWebコンテンツの場合は、リンクを設置しましょう。

引用ブロック

なお、引用ブロックを追加したときには、デフォルトでは引用元を記載する仕様になっていません。

引用ブロック全体を選択して、引用元を追加してください。

引用ブロックを追加
メモ

引用ブロック全体を選択するには、親ブロックを選択ボタンが便利です。

親ブロックを選択

あわせて、第三者のコンテンツを引用するときは、最低限のルールを知っておく必要があります。

【「引用」】(第 32 条第 1 項)

報道、批評、研究等の目的で、他人の著作物を「引用」して利用する場合の例外です。例えば、報道の材料として他人の著作物の一部を利用したり、自説の補強や他人の考え方を論評するために他人の著作物の一部を利用するような行為が該当します。

【条件】

  1. すでに公表されている著作物であること
  2. 「公正な慣行」に合致すること(例えば、引用を行う「必然性」があることや、言語の著作物についてはカギ括弧などにより「引用部分」が明確になっていること)
  3. 報道、批評、研究などの引用の目的上「正当な範囲内」であること(例えば、引用部分とそれ以外の部分の「主従関係」が明確であることや、引用される分量が必要最小限度の範囲内であること、本文が引用文より高い存在価値を持つこと)
  4. 「出所の明示」が必要(複製以外はその慣行があるとき)
    ※美術作品や写真、俳句のような短い文芸作品などの場合、その全部を引用して利用することも考えられます。
    ※自己の著作物に登場する必然性のない他人の著作物の利用や、美術の著作物を実質的に鑑賞するために利用する場合は引用には当たりません。
    ※翻訳も可
(引用:文化庁「令和7年度著作権テキスト」」

ここで注目したいのは、「(2)カギ括弧などにより「引用部分」が明確になっていること」です。

カワウソ

当メディアでは、引用を上記のようなデザインにしています。はっきりと区別されていますよね。

利用中のテーマによっては、「引用ブロック」を使っても見た目が大きく変わらないケースがあるため、「引用ブロック」を使うとどのような見た目になるか、確認してみましょう。

引用のデザイン例

自社の著作物と引用部分とが、分かりやすく区別できているのかをチェックしてください。

なお、区別する方法として、以下の方法があります。

自分の著作物と引用部分を区別する方法の例
  • 引用符を用いる
  • イタリック体(斜体)にする
  • 背景色を付ける
メモ

「引用ブロック」を使うと、HTMLのソースコードに「引用タグ<blockquote>〜</blockquote>」がつきます。これにより、検索エンジンに対して「この部分は引用である」と伝えることが可能です。

注意

引用タグがなければ、検索エンジンに「コピーコンテンツ(低品質なコンテンツ)」と判定されるかもしれません。SEOとして不利な状況に陥るおそれがあるので、注意しましょう。

メモ

「引用ブロック」とよく似たものに、「プルクオートブロック」があります。プルクオートは、記事内の文章を抜き出して強調表示するためのブロックです。他者の文章や発言を掲載する場合は、「引用ブロック」を利用しましょう。

メディア系ブロック7種

次に、メディア系に属するブロックを紹介します。

メディア系ブロック
  1. 画像ブロック
  2. メディアとテキストブロック
  3. ギャラリーブロック
  4. カバーブロック
  5. 音声ブロック
  6. 動画ブロック
  7. ファイルブロック

画像ブロック

「画像ブロック」は、写真やイラストなどの画像ファイルを挿入するときに使います。

「画像ブロック」を追加すると、以下3種類の方法が表示されるので、状況に応じて使い分けてください。

画像ブロック
3種類の方法
  • アップロード
    新しい画像をアップロードして使う
  • メディアライブラリ
    すでにアップロード済みの画像ファイルから選んで使う
  • URLから挿入
    URL(画像が置いてある場所)を指定して使う

なお、画面右側のブロック設定サイドバーから、代替(ALT)テキストを入力したり、画像のサイズを変更したりできます。

ブロック設定サイドバーでALTテキストや画像のサイズの設定が可能
ブロック設定サイドバーで画像のサイズ変更が可能
代替(ALT)テキストとは

画像が読み込まれなかったときに表示させるテキストのこと。Google 画像検索の結果に、コンテンツが表示される可能性を高める効果も期待できます(参考:Google 検索セントラル「Google 画像検索 SEO ベストプラクティス)」。

メディアとテキストブロック

メディアとテキストブロック」は、画像とテキストを横に並べて表示できます。

デフォルトでは、左側にメディア、右側にテキストを挿入できるようになっていますよ。
ブロックツールバーから、位置関係(左右)を変更することが可能です。

メディアとテキストブロック

参考に、以下をご覧ください。

  • 赤枠は、「画像ブロック」と「段落ブロック」を用いた例。
  • 青枠は、「メディアとテキストブロック」を用いた例です。
画像ブロック&段落ブロックとメディアとテキストブロックの比較

このように、「メディアとテキストブロック」を使えば、ホームぺージのデザインにバリエーションを持たせられます。

また、「メディアとテキストブロック」は、レスポンシブデザインに対応しています。

レスポンシブデザインとは

レスポンシブデザインとは、ユーザーのデバイスに応じ、ホームページの表示サイズを自動で変えるデザインのこと。
レスポンシブデザイン対応のホームぺージは、パソコン、スマホ、タブレットなど、ありとあらゆるデバイスに最適化したぺージを表示できます。

レスポンシブデザイン

以下のように、デフォルトの設定では、スマホだと縦に並べて表示されます。

メディアとテキストブロックのスマホ表示例

位置関係は、画面右側のブロック設定サイドバーから、変更することが可能です。

ブロック設定サイドバーからスマホでの表示を変更可能

ギャラリーブロック

「ギャラリーブロック」は、複数の画像を並べて表示するときに使います。

たとえば、会社の紹介写真をタイル状に並べて表示するときなどに役立つでしょう。

試しに、以下をご覧ください。

  • 赤枠は、「画像ブロック」で複数の画像を挿入した例。
  • 青枠は、「ギャラリーブロック」で複数の画像を挿入した例です。
画像ブロックとギャラリーブロックの比較

カワウソ

「ギャラリーブロック(青枠)」の方は、複数の画像を限られたスペースに収納できていますね。

カラム(列)の数は、画面右側のブロック設定サイドバーから変更できます。

ブロック設定サイドバーからカラム数を変更可能
メモ

特定の画像を選択するのが難しいときは、リストビューがおすすめです。

リストビューの例

なお、「ギャラリーブロック」もレスポンシブデザインに対応しています。
たとえば、3カラム(列)に設定した場合、スマホでは2カラム(列)で表示されますよ。

ギャラリーブロックのスマホ表示例

カバーブロック

「カバーブロック」は、画像の上にテキストを配置したいときに使います。

たとえば、見出しの背景に写真を入れたいときに便利です。

参考に、以下をご覧ください。

  • 赤枠は、「見出しブロック」で作った見出しの例。
  • 青枠は、「カバーブロック」を活用して作った見出しの例です。
見出しブロックとカバーブロックの比較

カワウソ

「カバーブロック(青枠)」のほうは背景画像がある分、見出しの内容がイメージしやすいですね。

なお、カバーブロックを挿入して背景画像を選んだあとは、次のような画面になります。

カバーブロックの使用手順
ポイント
  1. テキストを入力できます。デフォルトでは「段落ブロック」に設定されていますが、「見出しブロック」などに変更できます。
  2. 「〇」をドラッグすることで、画像の高さを変更できます。
  3. スタイル(Syles)を設定するためのタブです。
  4. オーバーレイの不透明度では、重ねた色の透明度を調整できます。

「カバーブロック」は見出し以外に、メインビジュアルを作るときにも役立ちますよ。

音声ブロック

「音声ブロック」は、音楽ファイルを挿入したいときに使います。

たとえば、代表挨拶ぺージに社長のインタビュー音声を掲載したり、ホームぺージを開いたときに自動でBGMが流れるようにしたりすることが可能です。

音声ファイルを指定すると、音楽プレイヤーが埋め込まれて、音声が再生できるようになります。

音声ブロックの使用説明

ページを開いた時点で音声が流れるようにする「自動再生」や、再生を繰り返す「ループ」は、画面右側のブロック設定サイドバーから設定できますよ。

動画ブロック

「動画ブロック」は、動画ファイルを挿入したいときに使います。

メモ

YouTube等で配信されている動画は、後述する「埋め込み系ブロック」がおすすめです。

たとえば、「動画ブロック」を使って、会社のCMや商品の使い方を解説した動画を配置してみてはいかがでしょうか。

以下は、「動画ブロック」で動画を追加したときの編集画面です。

ブロック設定サイドバーから各種設定が可能

再生や停止などのコントロールボタンは、自動で配置されます。

画面右側のブロック設定サイドバーでは、自動再生、ループ、ミュートなどを設定することが可能です。

ファイルブロック

「ファイルブロック」は、ドキュメントやPDFファイル等を配布したいときに使います。

たとえば、製品のパンフレットやマニュアルなどのデータファイルを、ユーザーがホームぺージからダウンロードできる状態にすることが可能です。

以下は、「ファイルブロック」でPDFファイルを挿入したときの画面です。

ファイルブロックの説明

デフォルトでは「インライン埋め込みを表示」がONになっていますが、注釈のとおり、ほとんどのスマートフォンやタブレットでは表示されないので、注意してください。

なお、ダウンロードボタンは、画面右側のブロック設定サイドバーから、表示/非表示を切り替えられます。

ブロック設定サイドバーから、ボタンの表示切替が可能

デザイン系ブロック7種

ここからは、デザイン系のブロックを紹介していきます。

デザイン系ブロック
  1. ボタンブロック
  2. カラムブロック
  3. 横並びブロック
  4. 縦積みブロック
  5. スペーサーブロック
  6. 区切りブロック
  7. グループブロック

ボタンブロック

「ボタンブロック」は、ボタンを設置するときに使います。
目立たせたいリンクは、ボタンにすると効果的です。

たとえば、お問い合わせフォームや申し込みフォームへのリンクに活用するとよいでしょう。

参考に以下をご覧ください。

  • 赤枠は、「段落ブロック」でテキストを入力したあと、リンクを設定した例。
  • 青枠は、「ボタンブロック」でボタンを設置した例です。
段落ブロックとボタンブロックの比較

カワウソ

やはり、ボタンのほうが分かりやすいですね!

以下は、「ボタンブロック」を挿入したときの編集画面です。

ボタンブロックの説明
ボタンブロックの編集方法
  1. ボタンに表示するテキストを入力できます。
  2. リンクを設定できます。
  3. ボタンのテキストや背景の色を変更できます。

なお、以下の記事ではボタン作成のポイントを解説しています。

カラムブロック

「カラムブロック」は、コンテンツを横並びで表示させたいときに使います。

このあと解説する「横並びブロック」とは異なり、レスポンシブデザインに対応しているのが特徴です。

「カラムブロック」を追加すると、以下の画面が表示されます。
ここでは、「3カラム:均等割」を選んでみますね。

カラムブロックの追加画面

一番左のカラムが表示されていますので、「」から、「画像ブロック」を追加してみます。

カラムブロックの左カラムに画像ブロックを追加

カラムが表示される場所のあたりをクリックすれば、ブロックを追加できます。

カラムブロックの追加方法

同じように、繰り返して「画像ブロック」を追加した画面が、以下のとおりです。

リストビュー
メモ

全体もしくは特定のカラムを選択するなら、リストビューが分かりやすいです(1&2)。

カラム全体を選択すると、画面右側のブロック設定サイドバーに、「モバイルでは縦に並べる」が表示されます(3&4)。

デフォルトではチェックが入っており、以下のようにスマホでは縦並びになるので、求めるデザインに応じて切り替えてください。

カラムブロックのスマホ表示例

横並びブロック

「横並びブロック」は、文字どおり横並びのレイアウトを組みたいときに使います。

前項の「カラムブロック」とは異なり、スマートフォンのように画面幅が狭くなっても、横並びのレイアウトは維持されます。

以下、赤枠は「カラムブロック」、青枠は「横並びブロック」を使用した例です。

横並びブロックのスマホ表示例

カワウソ

「横並びブロック(青枠)」のほうは、画面の横幅に収まっている分、画像が縮小されていますね。

代わりに、画面幅からコンテンツがはみ出したときに、「行を折り返すかどうか」を選択できます。

横並びブロックでは、複数行に折り返す設定が可能

次に、以下をご覧ください。

横並びブロックの使用説明

2つ目以降のコンテンツを追加するときは、「横並びブロック」全体を選択したあとに表示される「+」をクリックします。

全体を選択しないと、この「+」は表示されないのでご注意ください。

メモ

親ブロックを選択か、リストビューを活用すると操作しやすいです。

親ブロックを選択

縦積みブロック

「縦積みブロック」は、縦積みのレイアウトを組みたいときに使います。

基本的な操作は、「横並びブロック」と同じです。

「カラムブロック」「横並びブロック」「縦積みブロック」を組み合わせると、さまざまなレイアウトを構成できますよ。

たとえば、以下の社内紹介は、「カラムブロック(赤枠)」の中に「縦積みブロック(青枠)」を配置したレイアウトです。

縦積みブロックとカラムブロックを組み合わせた例

「縦積みブロック」の中に、「画像ブロック」、「見出しブロック」、「段落ブロック」を使っています。

ぜひ参考にしてください。

アコーディオンブロック

「アコーディオンブロック」は、クリックすると内容が開閉するコンテンツを作成したいときに使います。

たとえば、コーポレートサイトの「よくある質問(FAQ)」では、質問と回答をまとめて掲載することが多いものです。

こんなときにアコーディオンブロックを使うと、必要な情報だけを表示できるため、ページをすっきり見せられます。

▼アコーディオン開く前▼

アコーディオンを開く前

▼アコーディオン開いた後▼

アコーディオンを開いた後

アコーディオンのコンテンツは少し分かりづらいので、リストビューからアコーディオンパネルを選択して、記載するのがよいでしょう。

リストビュー

画像ブロックやリストブロックなども追加できます。

スペーサーブロック

「スペーサーブロック」は、ブロック間に空白を入れたいときに使います。

ブロック間には、もともと空白が入っていますが、高さを調整できません。

「スペーサーブロック」なら、ブロック間に好きな高さの空白を入れることが可能です。

以下のように、空白の高さは「〇」で調整します。

スペーサーブロックの使用説明

画面右側のブロック設定サイドバーなら、空白の高さを数字で指定することが可能です。

また、プリセットを使用すると、あらかじめ用意されたサイズを選択するだけで簡単に余白を設定できます。

余白設定

区切りブロック

「区切りブロック」は、区切り線を入れたいときに使います。

コンテンツ同士の区別をはっきりさせたいときに、おすすめです。

区切りブロック

使い方は簡単で、区切り線を入れたいところに挿入するだけです。
画面右のブロック設定サイドバーから、スタイルを選んだり、色を変えたりできます。

ブロック設定サイドバーからスタイルや色を変更可能

グループブロック

「グループブロック」は、複数のブロックをグループ化したいときに使います。

たとえば以下では、見出しと段落がペアになっているため、移動させるときは一緒に動かしたいものです。こんなときにグループブロックを使います。

グループブロック

では、使い方を見ていきましょう。

グループブロックの使用手順
グループ化の設定方法
  1. ドキュメント概観(三本線のアイコン)をクリック
  2. キーボードの「Shift」を使って、複数選択
  3. グループ化をクリック

これで見出しと段落が1つのグループになったので、一緒に移動させたり、まとめて消去したりできます。

グループブロック適用後

ウィジェット系ブロック4種

ここでは、ウィジェット系のブロックを紹介します。

ウィジェット系ブロック
  1. 検索ブロック
  2. ソーシャルアイコンブロック
  3. ショートコードブロック
  4. カスタムHTMLブロック

検索ブロック

「検索ブロック」は、検索窓を設置するときに使います。
ユーザーが検索窓にキーワードを入力して、ホームページ内を検索できるようにするものです。

検索ブロック

「任意のプレースホルダー…」に文字を入力しておくと、実際の画面で入力例が表示されます。ユーザーが検索窓の存在に気付きやすくなるので、おすすめです。

「キーワードで検索する」や「製品番号で探す」など、自社のホームぺージに合う入力例を表示させましょう。

なお、ブロック設定サイドバーから、検索ラベル(検索という文字)を消したり、アイコンつきのボタンに変えたりできます。

ボタンの色も、画面右側のブロック設定サイドバーから指定することが可能です。

ブロック設定サイドバーやブロック設定サイドバーで編集可能

ソーシャルアイコンブロック

「ソーシャルアイコンブロック」は、各種SNSのアイコンを設置したいときに使います。

X(旧Twitter)、Facebook、Instagram、YouTube、TikTokなどのメジャーどころはもちろん、ほかにも多くのSNSに対応していますよ。

ホームぺージから、自社のSNSにユーザーを誘導したい場合は、ぜひ設置しましょう。
魅力的なコンテンツを発信しているSNSアカウントなら、いいねやフォローなどの反応も期待できます。

では、使い方を見ていきましょう。

「ソーシャルアイコンブロック」を挿入したら、「+」をクリックします。
表示された中に使いたいSNSのアイコンがなければ、「検索」もしくは「すべて表示」から探してください。

ソーシャルアイコンブロックの追加方法

今回はX(旧Twitter)アイコンを挿入してみました。
アイコンをクリックして、アカウントアドレスを入力します。

アドレスを入力

アイコンのサイズや色は、画面右側のブロック設定サイドバーで指定しましょう。

ブロックツールバーやブロック設定サイドバーから設定可能

なお、これらの設定は、「ソーシャルアイコンブロック」全体を選択しないと出てこないので、注意してください

メモ

リストビューだと、全体を選択しやすいです。

リスト表示なら分かりやすい

ショートコードブロック

「ショートコードブロック」は、ショートコードと呼ばれる命令文を挿入するときに、使います。

プラグインで作ったパーツ(機能)を固定ぺージに貼りつけるときに、使用することが多いです。

以下は、「ショートコードブロック」を追加したときの画面です。
「ショートコードをここに入力…」という部分に、コピーしたショートコードを貼り付けます。

ショートコードブロック

たとえば、フォームのプラグインとして有名な「Contact Form 7」では、フォームを作ったあと、ショートコードが生成されます。

Contact Form 7のショートコード

このショートコードを埋め込むと、お問い合わせページにフォームを表示(追加)することが可能です。

カスタムHTMLブロック

「カスタムHTMLブロック」は、HTMLコードを入力するときに使用します。

WordPressデフォルトの機能では、「段落ブロック」内のテキストにおいて、一部分のみ色を変えることはできません。

しかし、「カスタムHTMLブロック」を使ってHTMLコードを入力すれば、実現できます。

参考に、以下をご覧ください。
線を引いた部分が、文字を赤くするためのHTMLコードになります。

右側でプレビューを確認できます。

カスタムHTMLブロック

WordPressのブロックエディタを使えば、HTMLやCSSなどのWeb制作スキルがなくても、ホームぺージは作れます。

しかし、このように、HTMLやCSSを知っておくことで役立つ機会もあるので、基本のタグは徐々に覚えていくとよいでしょう。

なお、HTMLやCSSについては、以下の記事で解説しています。

メモ

追加済みのブロックについては、ブロックツールバーのオプション「HTMLとして編集」から、ソースコードを編集することが可能です。

ブロックツールバーのオプションのHTMLとして編集でも可能

埋め込み系ブロック2種

ここでは、埋め込み系のブロックについて紹介します。

埋め込み系ブロック
  1. 埋め込みブロック
  2. YouTubeブロック

埋め込みブロック

「埋め込みブロック」は、Web上に公開されている動画、画像(静止画)、ツイート、音声などのコンテンツを埋め込むときに使います。

たとえば、X(旧Twitter)のツイートを埋め込むことが可能です。

使い方は簡単で、埋め込みたいコンテンツのURLを入力し、「埋め込み」ボタンをクリックするだけです。

埋め込みブロック
埋め込みブロックの活用例

なお、埋め込み可能なコンテンツは、以下から確認することが可能です。

(参考:WordPress.org「メディア埋め込み元として使えるサイト」

YouTubeブロック

「YouTubeブロック」は、YouTube動画を埋め込むときに使います。

カワウソ

前項の「埋め込みブロック」でも代用できますが、YouTube動画を埋め込むなら、こちらのほうがブロックを感覚的に選べますよ。

操作は簡単で、埋め込みたい動画のURLを入力し、「埋め込み」をクリックするだけです。

Youtubeブロック

以下、埋め込んだあとの編集画面です。

Youtubeブロックの活用例

なお、埋め込んだYouTube動画をカスタマイズする場合は、以下の記事を参考にしてください。

ブロックを増やせる無料のプラグインを紹介

WordPressで使えるブロックは、テーマごとに異なります。
機能性の高いテーマであれば、多くのブロックが用意されているでしょう。

とはいえ、物足りない場合は、「ブロック追加プラグイン」を用いるのがおすすめです。

ここでは、魅力的なブロックを増やせる、無料のプラグイン2つを紹介します。

VK Blocks

VK Blocks

▲出典:株式会社ベクトル「VK Blocks」

『VK Blocks』は、企業ホームぺージ向けテーマの『Lightning(ライトニング)』を提供している、株式会社ベクトルのブロック追加プラグインです。

『VK Blocks』は、『Lightning』以外のテーマでも使用できます。

WordPressのデフォルトにはない、以下のようなブロックを追加することが可能です。

追加可能なブロック
  • スライダー
  • アラート
  • フロー

使えるブロック数は全部で16種類。
有料の『Vektor Passport(ベクトル パスポート)』を契約していれば、プロ版の『VK Blocks Pro』プラグインが使えるようになり、さらにブロック数が23種類増えます。

有料契約『Vektor Passport』のメリットは、以下の記事を参考にしてください。

Snow Monkey Blocks

Snow Monkey Blocks

▲出典:株式会社モンキーレンチ「Snow Monkey Blocks」

有料のWordPressテーマ『Snow Monkey』を販売する、株式会社モンキーレンチのブロック追加プラグインです。

『Snow Monkey Blocks』は、『Snow Monkey』以外のテーマでも使えます。
たとえば、以下のようなブロックを使うことが可能です。

使用可能なブロック
  • カウントダウン
  • 価格表
  • お客様の声

使えるブロック数は全部で35種類。
テーマ『Snow Monkey』と一緒に使うと、さらに6種類増えます。

なお、テーマ『Snow Monkey』については、以下の記事で詳しく解説しているので、あわせてチェックしてみてください。

ブロックパターンを効果的に活用しよう

最後に、ブロックの活用をより発展させられる「ブロックパターン」について解説します。

ここで解説する内容は、以下のとおりです。

ブロックパターンとは

ブロックパターンとは、複数のブロックを組み合わせたものです。
あらかじめ用意されたブロックパターンを利用すれば、自分でブロックを組み合わせる必要がないため、ページ制作が捗ります。

まず、WordPressに標準搭載されているブロックパターンを使ってみましょう。

画面左上の「+」をクリックしたのち、タブからパターンを選んでください。
カテゴリごとに、さまざまなブロックパターンが用意されていますよ。

パターン一覧

使いたいものを選択すると、編集画面上に反映されるので、あとは文字や画像などを好きなように編集するだけです。

ブロックパターンの例

これならデザインテンプレートを活用しているのと同じなので、初心者の方でも高品質なページが簡単に作れますね。

テーマによってはブロックパターンが配布されている

テーマによっては、ブロックパターンが配布されています。
とくに国産のテーマが配布するブロックパターンであれば、WordPressに標準搭載されているものよりも、実用的です。

たとえば、以下は当社エックスサーバー株式会社が提供しているWordPressテーマ『Xwrite(エックスライト)』の「パターンライブラリ」です。

Xwriteのパターンライブラリ

▲出典:Xwrite(エックスライト)

使ってみたいパターンがあれば、「このパターンをコピーする」ボタンをクリックして、WordPressのページ編集画面に貼り付けるだけで、簡単に利用できます。

このパターンをコピーする

▲出典:Xwrite(エックスライト)

自分で作ったコンテンツをパターンとして登録可能

じつは、ブロックを組み合わせて作ったコンテンツは、パターンとして登録することも可能。
登録後はそのパターンをすぐに呼び出せるので、コンテンツを使い回すときに便利です。

それではパターンの登録方法を見ていきましょう。

登録したいブロックのメニューから、パターンを作成をクリックします。
※対象のブロックを複数選択するか、グループ化している場合は「親ブロック」を選択したうえで行ってください。

パターンを作成

すると、以下の画面が出ます。
あとで識別できるように、名前やカテゴリーを設定しておきましょう。

パターンを追加

なお、「同期」を有効化すると、複数の箇所で同じパターンを使用している場合に、オリジナル一つを変更するだけで、同じように修正が反映されます。

修正や更新作業を効率化できるので便利です。

たとえば、当メディアの記事で共通表示している「ホームページの開設を検討している方へ」のコンテンツは、まとめて同期パターンとして登録してあります。

同期パターンとして登録していることで、キャンペーンの切り替えがあった場合でも、すぐに対応できるようにしていますよ。

WordPressのブロックエディタに関するよくある質問(FAQ)

最後に、WordPressのブロックエディタに関する「よくある質問」をまとめました。

WordPressのブロックエディタはどこにありますか?

WordPressのブロックエディタは、「投稿」や「固定ページ」の編集画面にあります。
以下の手順でアクセスしてください。

  • WordPressメインナビゲーションの「投稿」もしくは「固定ページ」をクリック
  • 「投稿を追加」もしくは「固定ページを追加」をクリック
WordPressのブロックエディタは使いにくいですか?

初めてホームページ制作をされる方の場合、最初は操作に戸惑うこともあるかもしれません。

ブロックエディタは、専門知識がなくてもホームページを作れるように設計された素晴らしいツールですが、最初は「どこに何があるか分からない」と感じるものです。

しかし、基本操作を理解したうえで、コツを知ると、素早くリッチなページが作れるようになります。

ここでは以下3つのコツを紹介します。

  • 「リストビュー」を活用する:画面の左上にある「≡(ドキュメント概観)」から「リストビュー」を開くと、使用中のブロックが一覧表示され、ブロックの親子関係(階層構造)が明確になります。狙ったブロックを正確に選択しやすくなるため、誤操作が激減します。
  • 「段落」と「改行」を使い分ける:普通に「Enter」を押すと、新しいブロック(新しい段落)が作られて少し広めの隙間が空きます。一方、「同じブロックのなかで、行だけを変えたい(改行したい)」というときは、Shiftキーを押しながらEnterを押します。この2つの違いを意識するだけで、文章のまとまりが格段に読みやすくなります。
  • 「パターン」を活用する:お問合せボタン(CTA)など、よく使うブロックの組み合わせは「パターン」として登録することで、次回から1クリックで呼び出せます。さらに「同期モード」にしておけば、1箇所を修正するだけで複数ページにある同じパターンが一括編集されるため、管理がとても楽になります。
WordPressでブロックツールバーが表示されないのはなぜですか?

WordPressでブロックツールバーが表示されないときは、「集中執筆」モードになっているおそれがあります。

「集中執筆」は、メニューやツールバーなどが非表示になるモードです。

画面右上にあるメニューをクリックして、「集中執筆」モードにチェックが入っている場合は解除しましょう。

集中執筆

まとめ

この記事では、WordPressの編集機能である「ブロックエディタ」の使い方を解説しました。

また、デフォルトで用意されている基本ブロックのうち、ホームページ制作に使用する機会が多いものを厳選して紹介したので、参考になったのではないでしょうか。

まとめ
  • ブロック追加後は、「ブロックツールバー」と「ブロック設定サイドバー」を使う
  • 特定のブロックを選択するのが難しければ、「リストビュー」を使う
  • 異なる種類のブロックを組み合わせれば、さらに魅力的なデザインを構築可能
  • 使えるブロックを増やしたいなら、高機能なテーマを使うかプラグインを追加する
  • ブロックパターンを使えば、ページの制作や更新が捗る

WordPressには便利なブロックがたくさんあります。
使い方が分かったら、ぜひブロックエディタでホームページを作ってみてくださいね。

それでは、素敵なホームページの完成を願っております。

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

コスパ&価格重視でレンタルサーバーを探している方へ

エックスサーバーは、高速かつ高い安定性を誇る「高性能レンタルサーバー」です。
国内シェアNo.1※1のレンタルサーバーであり、25万社の導入実績※2があります。

2026年8月4日(火)17時まで、サーバー利用料金の最大半額がキャッシュバックされる期間限定キャンペーンを開催中です!

今なら実質月額693円~とお得にホームページを開設できます!
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。

ぜひこのお得な機会にホームページ開設をご検討ください!

※1 2026年6月時点、W3Techs調べ。
※2 2026年4月時点、エックスサーバー・XServerビジネスにおける法人アカウント数の合計値。

法人向けレンタルサーバーをお探しの方へ

XServerビジネスは、エックスサーバーを法人向けに特化したレンタルサーバーです。
サーバー月間稼働率99.99%以上を保証する「SLA」をはじめ、セキュリティやサポートが充実しています。

2026年10月13日(火)17時まで、月額料金が30%キャッシュバックになる期間限定キャンペーンを開催中です!

今ならお得にホームページを開設できます!
コーポレートサイトでよく使われる「.co.jp」のドメインも永久無料で、大変お得です。

ぜひこのお得な機会にホームページ開設をご検討ください!

『エックスサーバー』と『XServerビジネス』の違いは、以下の記事で詳しく解説しています。

なお、当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています!

ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ!

カワウソ

当メディアはリンクフリーです。貴社のSNSやブログでご紹介いただけると嬉しいです。

URLをコピーしました!