WordPress初心者必見!ブロックエディタ(Gutenberg)の使い方を解説

WordPressのバージョン5.0から導入されたブロックエディタは、従来のクラシックエディタとは全く異なる、新しい記事作成方法です。最初は戸惑うかもしれませんが、使い方をマスターすれば、プロのようなデザインのコンテンツを直感的に作成できます。

この記事では、ブロックエディタの基本的な使い方から、知っておくと便利な応用テクニックまで、時間をかけてじっくりと解説します。

ブロックエディタとはすべてが「ブロック」

ブロックエディタの最も重要な概念は、ウェブサイト上のすべてのコンテンツが「ブロック」という独立した単位で構成されているということです。

従来のクラシックエディタは、大きなテキストエリアに文章や画像をまとめて書く形式でした。しかし、ブロックエディタでは、段落、画像、見出し、リスト、そしてボタンに至るまで、すべてが独立したブロックとして扱われます。
この「ブロック」単位で編集できることが、ブロックエディタ最大の強みです。それぞれのブロックに個別の設定(文字の大きさ、背景色、配置など)を適用できるため、HTMLやCSSの知識がなくても、複雑なレイアウトを直感的に構築できます。
文章を書くときも、改行して新しい行に移ると、自動的に新しい「段落ブロック」が生成されます。このように、ブロックエディタは私たちの思考の流れに沿った、自然なコンテンツ作成を可能にします。

基本操作:ブロックの追加と編集方法

ブロックの追加方法は非常にシンプルです。

左上の「+」ボタンから追加

「+」をクリックしたとき
「+」をクリックしたとき

エディタの左上にある青い「」ボタンをクリックすると、使用できるブロックの一覧が表示されます。ここには、テキスト、メディア、デザイン、ウィジェットなど、様々なカテゴリのブロックが用意されています。使いたいブロックをクリックするだけで、記事に挿入されます。

スラッシュ(/)で素早く検索

「/」を入力したとき
「/」を入力したとき

段落ブロックで「/」と入力すると、ブロック名を検索できます。例えば、「/画像」と入力すれば画像ブロックが、「/見出し」と入力すれば見出しブロックが瞬時に表示されます。このショートカットをマスターすれば、マウスを使わずにスムーズに作業を進められます。

ブロックごとの詳細設定を使いこなす

追加したブロックを選択すると、エディタの右側のサイドバーに、そのブロック固有の設定パネルが表示されます。このサイドバーを使いこなすことで、さらに記事の表現力を高めることができます。

  • 段落ブロック
    フォントサイズを「中」や「大」に変更したり、文字色や背景色をカスタマイズしたりできます。
  • 画像ブロック
    画像のサイズをピクセル単位で調整したり、代替テキスト(alt属性)やリンク先を設定したりできます。また、画像の角を丸くするデザインオプションなども用意されています。
  • 見出しブロック
    見出しレベル(H2, H3, H4など)を簡単に変更できます。これはSEOの観点からも非常に重要です。

記事作成を劇的に効率化する応用テクニック

ブロックエディタの真価は、基本的な操作だけでなく、応用的な機能にあります。

グループブロックの活用

複数のブロックをひとまとまりにしたい場合は、「グループブロック」を使います。例えば、見出しと本文と画像で一つのセクションを構成する場合、これらをグループ化することで、まとめて背景色をつけたり、全体を移動させたりできます。

これにより、複雑なレイアウトの管理が非常に楽になります。

再利用ブロックの作成

ブログ記事の末尾によく使う定型文や、デザインを統一したい「お問い合わせボタン」など、同じブロックの組み合わせを何度も使う場合は、「再利用ブロック」として保存しましょう。

一度作成して保存しておけば、他の記事でも「再利用ブロック」として簡単に呼び出して使うことができます。更新も一箇所で済むため、メンテナンスの効率も上がります。

ブロックパターンの利用

WordPressには、公式やテーマ開発者が提供する、あらかじめデザインされたブロックの組み合わせ「ブロックパターン」が用意されています。

これは、テンプレートのように一からデザインを組む手間を省き、プロが作った美しいレイアウトを簡単に利用できる機能です。

キーボードショートカットを覚える

ブロックエディタには、作業を効率化するための様々なショートカットが用意されています。

  • Ctrl + Alt + T(MacはCmd + Option + T):選択したブロックの直前に新しいブロックを挿入
  • Enter:新しい段落ブロックを作成
  • Ctrl + Shift + D(MacはCmd + Shift + D):選択したブロックを複製 これらを覚えると、マウスに持ち替えることなく、キーボードだけでスムーズに記事を作成できるようになります。

まとめ

WordPressのブロックエディタは、ただのテキストエディタではありません。ウェブサイトのコンテンツを構築するためのパワフルなツールです。最初は戸惑うかもしれませんが、「すべてはブロック」という概念を理解し、今回ご紹介した機能を使ってみることで、その便利さを実感できるはずです。

もし、自社のウェブサイト運用やブログ記事の作成でお困りのことがあれば、ぜひ一度ご相談ください。

CONTACTUS!

ホームページ制作のご依頼・ご相談

  • 効果測定が可能な、成果重視のホームページが欲しい
  • 問い合わせ件数を増やしたい
  • スマートフォンに対応したホームページが欲しい
  • 簡単な操作で自社管理できるホームページが欲しい
  • サポートと継続的なメンテナンスまで安心してお願いしたい
  • SEOに強い制作会社を探している

ホームページ制作のご依頼・ご相談は、Webディレクターのあがのが対応させていただきます。

新規制作 / リニューアル / 無料相談 070-9000-7474 平日 9:30〜18:00

ご対応エリア:広島県を中心に全国対応