【Gutenberg基本03】よく使うブロック10選・使い方を解説

WordPressのGutenbergエディタには数多くのブロックが用意されていますが、すべてを覚える必要はありません。

実際に記事作成でよく使うブロックは限られており、その基本を押さえるだけで十分に記事を完成させることができます。

特に「段落」「見出し」「画像」「ボタン」などは、どの記事にも欠かせない基本ブロックです。

これらを組み合わせれば、シンプルな記事からデザイン性のあるページまで幅広く対応できます。

この記事では、初心者がまず覚えておきたい 基本ブロック10種類 をピックアップし、それぞれの使い方とポイントを解説します。

この内容を理解しておけば、初めてGutenbergで記事を書くときも迷わず進められるはずです。

スポンサーリンク

よく使う基本ブロックとは？

Gutenbergには数十種類以上のブロックが用意されていますが、日常的な記事作成にすべてを使う必要はありません。

実際に頻繁に利用されるのはごく一部で、基本的なブロックをマスターすれば記事作成の大部分をカバーできます。

文章や画像を扱うための基本ブロックを覚えるだけで、記事の読みやすさやデザイン性を大きく向上させることができます。

ブロックにはそれぞれ設定項目があり、ツールバーかサイドバーから色や大きさ、リンク先の入力など様々な設定ができるようになっています。

注意点として、テーマによってブロックやブロックごとのデザインや設定などは変わります。

有料テーマですと、ブロックも様々な種類が用意されていて使い勝手が良いです。

また、ブロックを追加できるプラグインもあります。

プラグインは日本語対応していないものもありますので、注意してください。

ブロックの呼び出し方

Gutenbergでは、記事を構成する要素を「ブロック」として追加していきます。

段落・見出し・画像など、必要なブロックを呼び出す方法はいくつかあり、覚えておくと作業効率が大幅にアップします。

検索バーでブロック名を入力して探すことも可能です。

① ＋ボタンからブロックを追加する

本文エリアやツールバーに表示される 「＋」ボタン をクリックすると、ブロック一覧が表示されます。

そこから使いたいブロックを選ぶだけで挿入できます。

② スラッシュ入力でブロックを呼び出す

「/（スラッシュ）」を入力すると、候補としてブロック一覧が表示されます。

例えば「/見出し」と入力すれば、すぐに見出しブロックを呼び出せます。頻繁に使うブロックはこの方法で素早く追加するのが便利です。

③ ツールバーからブロックを呼び出す

上部ツールバー画面左側にある「＋」ボタン をクリックすると、ブロック一覧が表示できます。

ツールバーで、使えるブロックが全て確認できます。

普段使わないブロックはここから探してみましょう。

ブロックの削除やコピー

記事作成を進めていると、ブロックを誤って追加してしまったり、同じ内容を別の場所にも使いたいと感じることがあります。

そんなときに便利なのが ブロックの削除 と コピー の操作です。

これらの操作を覚えておけば、記事作成の効率がぐんと上がり、誤操作の修正もスムーズになります。

ブロックを削除する

1. 削除したいブロックをクリックして選択します。
2. ツールバー右端にある 「︙（オプションメニュー）」 をクリックします。
3. 一番下の 「削除」 を選択すると、そのブロックが消えます。

ブロックをコピーする

ブロックの内容を複製したい場合は、以下の方法があります。

• コピー＆ペースト：
  ツールバーの「︙」メニューから 「コピー」 を選び、貼り付けたい場所にカーソルを置いて貼り付けます。
• 複製（Duplicate）：
  「︙」メニューから 「複製」 を選ぶと、同じブロックがすぐ下に複製されます。繰り返し使いたい装飾やボタンを増やしたいときに便利です。

1. 段落ブロック

ここからは、各ブロックについて説明していきます。

Gutenbergで最も基本となるのが 段落ブロック です。

文章を入力すると自動的に段落ブロックとして追加され、改行すれば新しい段落が生成されます。

ブログ記事の大部分は段落ブロックで構成されるため、使い方に慣れておくことが大切です。

2. 見出しブロック

記事を読みやすく整理するために欠かせないのが 見出しブロック です。

見出しを設定することで、記事全体の構造が明確になり、読者が内容を理解しやすくなります。

また、検索エンジンも見出しを重要な要素として評価するため、SEOの観点からも必須です。

見出しはレベルごとに設定できます。

• H2：記事内の大きな区切り（章）
• H3：H2の下にぶら下がる小見出し（節）
• H4：さらに細かい小項目

記事全体の階層を意識して、見出しを使い分けましょう。

3. 画像ブロック

記事に視覚的な情報を追加するのに欠かせないのが 画像ブロック です。

文章だけでは伝わりにくい内容も、画像を入れることで直感的に理解しやすくなり、記事全体の印象も向上します。

画像ブロックでは、以下の方法で画像を挿入できます。

• PCから直接アップロード
• メディアライブラリから選択
• URLを入力して外部画像を挿入

また、サイドバーから「代替テキスト（ALT）」を入力できます。

これはSEOやアクセシビリティの観点で非常に重要で、画像が表示されない場合やスクリーンリーダーで利用されるため、必ず入力しておきましょう。

さらに画像をクリックすると、ツールがーが表示され、配置（左寄せ・中央・右寄せ）やリンクの追加、サイズ変更も簡単に行えます。

4. スペーサーブロック

記事の中に余白を入れたいときに便利なのが スペーサーブロック です。

段落や画像などの要素同士が詰まりすぎていると読みにくくなりますが、スペーサーを入れることで視認性が向上し、すっきりしたレイアウトになります。

サイドバーでスペーサーの高さを数値を設定できます。

主な使いどころ

• 見出しと本文の間に余白をつけたいとき
• 画像やボタンの上下にスペースを確保したいとき
• セクションの区切りをよりはっきり見せたいとき

設定できる内容

• 高さ：自由に数値を入力して余白の大きさを調整可能
• レスポンシブ対応：画面幅が変わっても自動的にスペースが確保される

必要以上に入れすぎると間延びしてしまうため、使う場所を見極めることが大切です。

5. 引用ブロック

他の文献や記事からの引用を示すときに使うのが 引用ブロック です。

文章を引用としてマークアップすることで、読者に「これは引用部分である」と明確に伝えられます。

引用ブロックを使うメリットは以下のとおりです。

• 見た目が整い、本文と引用の区別がつきやすい
• 引用元を明記することで記事の信頼性が高まる
• SEO的にも「引用」として認識されやすくなる

引用の最後には、出典リンク を添えるのがベストです。

6. リストブロック（箇条書き／番号付き）

記事の中で情報を整理したいときに便利なのが リストブロック です。

箇条書き（・）や番号付きリスト（1. 2. 3.）を簡単に作成でき、内容をわかりやすく伝えられます。

リストの入れ子（階層化）も可能なので、「大項目＋小項目」の整理も簡単です。

7. 区切りブロック（水平線）

記事の中で内容を区切りたいときに便利なのが 区切りブロック（水平線） です。

シンプルな横線を入れるだけで、文章のまとまりが分かりやすくなり、記事の可読性が上がります。

文章だけで続く記事よりも、適度に区切りを入れることで読者にとって読みやすい記事になります。

8. 埋め込みブロック（YouTubeなど）

外部サービスのコンテンツを記事に直接表示できるのが 埋め込みブロック です。

YouTubeの動画、Twitter（X）のポスト、Googleマップなどを記事に差し込むと、情報がリッチになり読者の理解も深まります。

埋め込みブロックの使い方

1. 埋め込みたいサービス（例：YouTube）のURLをコピー
2. Gutenbergの編集画面で「埋め込みブロック」を追加
3. URLを貼り付けると自動でプレビューが表示される

活用のポイント

• YouTube：動画解説やレビュー記事に便利
• Twitter（X）：公式の投稿を引用して情報の裏付けに
• Googleマップ：店舗やイベント会場の案内に有効

ただし、埋め込みを増やしすぎると記事の表示が遅くなることもあるので、必要な範囲で活用しましょう。

まとめ｜まずは10種類のブロックを覚えよう

WordPressのGutenbergには数多くのブロックが用意されていますが、日常的に使うのはごく一部です。

今回紹介した 10種類の基本ブロック を覚えておけば、ほとんどの記事は問題なく作成できます。

• 段落・見出し・リストで文章を整理する
• 画像・ギャラリーで記事を視覚的にわかりやすくする
• ボタンや引用でメリハリをつける
• 区切りやスペーサーで読みやすさを調整する
• 埋め込みで外部コンテンツを自然に取り込む

これらを組み合わせれば、シンプルな記事からデザイン性のあるページまで作れるようになります。