gutenberg-patterns-usage

※ 当サイトは、プロモーションが含まれます サイト作成・運営

【Gutenberg実践02】ブロックパターンの使い方と活用法

WordPressのGutenbergには、記事作成を効率化するための便利な機能 「パターン」 が用意されています。

パターンを使えば、複数のブロックを組み合わせたレイアウトをワンクリックで挿入でき、テキストや画像を差し替えるだけで完成度の高い記事が作れます。

「毎回同じデザインを作るのが面倒…」

「見栄えの良いレイアウトを最初から組み立てるのが難しい…」

そんな悩みも、パターンを活用すれば解決できます。

この記事では、Gutenbergのパターンの基本から、呼び出し方・編集方法・便利な活用例までを初心者向けに解説します。

記事の見た目を整えつつ、作業を効率化したい方はぜひ参考にしてください。

スポンサーリンク

Gutenbergの「ブロックパターン」とは?

パターン とは、複数のブロックを組み合わせた「レイアウトのひな形」のことです。

例えば「見出し+段落+ボタン」がセットになったデザインや、「画像+説明文の2カラム」など、よく使う構成をすぐに呼び出せます。

従来の「再利用ブロック」がすべての記事で同期される仕組みだったのに対し、パターンは 記事ごとに自由に編集できる点 が大きな違いです。

一度挿入したパターンを修正しても、他の記事に影響はありません。

特に「デザインが苦手」「見栄えの良い記事にしたい」という方にとって、パターンは強力な味方になります。

ブロックパターンを使うメリット

  • レイアウトをゼロから組み立てる手間を省ける
  • デザインの統一感を出せる
  • 初心者でも完成度の高い記事が作れる

便利なパターンの活用例

パターンは「時間短縮」だけでなく、「デザインの統一感」を出すのにも役立ちます。

ここでは初心者でもすぐに使える代表的な活用例を紹介します。

記事冒頭のリード文+ボタン

記事の導入文と一緒に「続きを読む」や「詳しく見る」ボタンを配置できるパターン。

読者をスムーズに本文や別ページへ誘導できます。

料金表や比較表

複数のプランや商品の特徴を並べて比較するレイアウト。

自分でカラムを組む手間が省け、見やすさと統一感を両立できます。

CTA(行動喚起エリア)

「お問い合わせはこちら」「資料をダウンロード」など、アクションを促すボタン付きセクション。

記事の最後に設置すると効果的です。

ヒーローセクション(カバー+見出し+ボタン)

記事やページの冒頭を飾る大きな背景画像+見出し+ボタン。

LP(ランディングページ)やトップページに最適です。

プロフィール紹介エリア

ブログ運営者や著者を紹介するレイアウト。

画像・名前・簡単な説明文をワンクリックで配置できます。

ブロックパターンの呼び出し方

ブロックパターンは、Gutenbergの編集画面から簡単に呼び出して使うことができます。

操作はブロックを追加するときとほぼ同じで、慣れれば数秒でレイアウトを挿入できます。

1. +ボタンから呼び出す

編集画面で左上、または本文内に表示される 「+」ボタン をクリック

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

上部に「ブロック」「パターン」「メディア」などのタブが並んでいるので 「パターン」 を選択します。

一覧から好みのパターンをクリックすると記事内に挿入されます。

2. カテゴリーから探す

パターンは用途ごとにカテゴリー分けされています。

記事の目的に合ったカテゴリーを選べば、欲しいレイアウトをすぐに見つけられます。

  • 文章
  • メディア
  • ヒーロー(トップビジュアル)
  • CTA(行動喚起)
  • ギャラリー
    など

3. テーマやプラグインの独自パターン

WordPressのテーマやプラグインによっては、独自のパターンが追加される場合もあります。

たとえば企業サイト用のテーマなら「料金表」「FAQ」などが最初から用意されていることもあります。

パターンの作成方法

まず見出しや段落、ボタンなど、パターンにしたいものを作成しておきます。

パターン化したい部分を選択し、ツールバーの「︙」をクリックします。

パターンの作成方法

「パターンを作成」をクリックします。

Gutenberg パターンを追加

「パターンを追加」の入力画面が表示されたら、分かりやすい名前とカテゴリーを入力します。

カテゴリーは未入力の場合「未分類」カテゴリーに入ります。

「同期」の選択には注意が必要です。

同期/非同期は、パターンを再利用した際に編集ができるか・できないかの設定です。

例えば、パターンを作成後再利用した際、挿入されている文章を変更するとします。

同期他のページで使用されているパターンにも変更が更新される
非同期他のページで使用されているパターンに影響がでない

つまり、記事作成などのレイアウトテンプレートを作りたい場合は「非同期」を設定することで、記事毎に文章や画像を差し替えることができます。

同期を使う場合は、全ての記事に表示されるパターンは同じであり、URLなど変更があった場合、パターンを修正するだけで、パターンを使用した全記事の修正内容も更新されます。

ブロックパターンの管理・一覧を見る

ブロックパターンの一覧や管理について。

WordPressテーマによって、パターンのメニューの場所は違う場合があります。

WordPress画面左のメニュー、もしくは上部のメニュー(管理メニューなど)にある場合があります。

AFFINGER6[ACTION]の場合

画面左メニューに「パターン」の項目があるので、クリックします。

wordpressパターンメニュー

登録されているパターンが記事一覧と同じように一覧として表示されます。

wordpressパターンメニュー一覧

パターン名にカーソルを充てると、メニューが表示されます。

編集をクリックすると、登録したパターンの修正を行えます。

削除する場合はここで「ゴミ箱へ移動」をクリックし、ゴミ箱内を削除します。

パターンを使う注意点

ターンは便利な機能ですが、いくつか気をつけるべき点があります。

使いすぎに注意

手なパターンを多用すると記事全体が重くなり、読みづらくなることがあります。

必要な部分だけに絞って活用しましょう。

テーマ依存のパターンがある

一部のテーマやプラグインが提供するパターンは、そのテーマを使っているときだけ利用可能。

テーマを切り替えると使えなくなる場合があります。

まとめ|パターンを活用して記事作成を効率化しよう

WordPressのGutenbergに備わっている「パターン」は、記事作成を効率化しつつ、見栄えの良いレイアウトを簡単に実現できる便利な機能です。

  • ワンクリックで複数ブロックをまとめて挿入できる
  • 文章・画像・ボタンなどを差し替えるだけで完成度の高い記事に仕上がる
  • 料金表やCTA、プロフィール紹介など、活用できる場面は多い

ただし「同期と非同期がある」「テーマ依存のパターンがある」といった注意点も理解しておく必要があります。

基本ブロックに慣れたら、ぜひパターンを活用して記事作成を効率化してみてください。初心者でも、短時間で統一感のある記事を作れるようになります。

パターンはテーマやプラグインによっても違うので、よりデザインにこだわりたい場合などはそちらも検討してみましょう。

WordPressテーマについてはこちらの記事でも解説しています。

WordPressテーマの選び方 | 目的別や無料と有料の違いについて - シルシクリエイト
WordPressテーマの選び方 | 目的別や無料と有料の違いについて - シルシクリエイト

WordPressでホームページやブログを始めようとしたとき、まず悩むのが「テーマ選び」です。 テーマとは、サイトの見た目や構造を決めるテンプレートのようなもので、見栄えだけでなく操作性や集客にも大き

464factory.com

-サイト作成・運営