コードエディタを開いたら、<!– wp:paragraph –> という見慣れない文字が並んでいた…そんな経験、ありませんか？
WordPress歴15年の私も、最初にGutenbergへ移行したときは同じように戸惑いました。でも、これはWordPressがブロックを管理するための「目印」のようなもの。仕組みを知ると、急に親しみが湧いてくるから不思議です。
この記事では、ブロックコードの意味・主要なブロックの種類・実際の使い方まで、初心者の方でも迷わないようにまとめています。現在のWordPress（6.x系）に対応した最新の情報でお届けします。
<!– wp:paragraph –> って何？ブロックコードの正体
Gutenbergのコードエディタを開くと、こんな記述が見えます。
<!-- wp:paragraph -->
<p>ここに文章が入ります</p>
<!-- /wp:paragraph -->これは、HTMLのコメント構文（<!-- -->）を使ったWordPress独自の「ブロック識別タグ」です。ブラウザには表示されないけれど、WordPressにとっては「ここは段落ブロックだよ」と教える大切な合言葉。
従来のクラシックエディタにはなかった仕組みで、ブロックごとに種類・設定・順番を管理できるようになったことで、ページのデザインが格段に自由になりました。
「ブロックって何？」と思った方へ——1つの段落、1枚の画像、1つの見出し、それぞれが独立した「ブロック」です。レゴのパーツみたいなイメージが一番近いかな。
ブロックはどこにある？追加方法をおさらい
編集画面でブロックを追加するには、段落と段落の間に出てくる ⊕ボタン をクリックします。マウスを行間に近づけると現れる小さなプラスマークがそれです。
ちなみに、ショートカットキーを覚えておくと操作がぐっとスムーズになります。よく使うものだけでも頭に入れておくと、作業効率が変わってきますよ。
主要ブロックのコード一覧と使い方【最新版】
現在のWordPress（6.x系）のブロックは、大きく「テキスト系」「メディア系」「デザイン系」「ウィジェット系」「埋め込み系」に整理されています。以前の5カテゴリー分類から名称・構成が変わっているので、最新の情報で確認していきましょう。
テキスト系ブロック
段落ブロック
コード：<!– wp:paragraph –> タグ：<p>
一番よく使う、文章入力の基本ブロック。<p>タグで囲まれたHTMLが出力されます。改行するたびに新しい段落ブロックが生まれる——これが、クラシックエディタとの一番大きな違いです。
イメージするなら、レゴブロックで部屋を作る感じ。1つの段落 ＝ 1つの部屋。Enterキーを押すたびに新しい部屋が増えていくわけです。
見出しブロック
コード：<!– wp:heading –> タグ：<h2>〜<h6>
段落の次によく使う、見出し専用のブロック。h1〜h6まで選べますが、記事内ではh2から使い始めるのがSEOの基本です。h1はページタイトルに使われるため、本文で重複させないよう注意しましょう。
【豆知識】 TinyMCEプラグインを有効にすると、段落ブロックが「Classic Paragraph（クラシック段落）」に変わってしまうことがあります。そのときはプラグインを停止すれば元に戻ります。
テーブルブロック
コード：<!– wp:table –> タグ：<table>
表（テーブル）を手軽に作れるブロック。行・列の追加も直感的にできます。デザインは「デフォルト」と「ボーダー」の2種類から選択可能。以前はHTMLを手書きしていたことを思うと、本当に楽になりました。
コードブロック
コード：<!– wp:code –> タグ：<pre><code>
HTMLやCSSなどのコードをそのまま表示できるブロック。タグが自動変換されてしまう通常の段落ブロックとは違い、コードを「コード」として見せたいときに使います。このブログでもプログラム紹介記事でよく活用しています。
プルクオートブロック
コード：<!– wp:pullquote –> タグ：<figure><blockquote>
記事の中で特に強調したい一文を、デザインを変えて引き立てるブロック。読者の目を引きたい重要なフレーズに使うと効果的です。
デザイン・レイアウト系ブロック
HTMLやCSSを書かなくても、見栄えのするレイアウトが作れるのがGutenbergの強み。レスポンシブ対応も自動で行われます。
カラムブロック
コード：<!– wp:columns –> タグ：<div>
2〜6カラムの横並びレイアウトを簡単に作れます。デフォルトは2カラム。原文と現代語訳を並べたり、比較表代わりに使ったりと、応用範囲が広いブロックです。
【原文（本文）】春はあけぼの。やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。
【現代語訳】春は夜がほのぼのと明けようとする頃が良い。だんだんと白んでいく山際がいくらか明るくなって、紫がかった雲が横に長く引いている様子が良い。
メディアと文章ブロック
コード：<!– wp:media-text –> タグ：<div>
画像とテキストを横並びにできるブロック。画像を左右どちらに置くかも簡単に切り替えられます。商品紹介や人物紹介など、ビジュアルと説明文を組み合わせたいときに重宝します。
誰もが1度は読んだことがある「ウサギとカメ」の物語。実は続きがあったり、別のストーリーがあったりすることをご存知でしょうか。
スペーサーブロック
コード：<!– wp:spacer –> px単位で余白を指定
ブロック間に余白（空白）を入れるためのブロック。「なんか詰まった印象になるな」というとき、数値で微調整できるのが便利です。デザインのバランスを整えるときにひそかに活躍するブロックです。
ボタンブロック
コード：<!– wp:button –> タグ：<div>
クリックしてほしい場所にボタンを置けます。スタイルは四角・角丸・アウトラインの3種類、背景色や文字色も自由に変更できます。外部リンクや内部リンクにも対応しています。
区切りブロック
コード：<!– wp:separator –> タグ：<hr>
セクションの区切りに使う水平線のブロック。「短い線」「幅広線」「ドット」の3パターンから選べます。シンプルだけど、記事にメリハリをつけるのに意外と使えます。
改ページブロック
コード：<!– wp:nextpage –> <!–nextpage–> が挿入される
長い記事を複数ページに分割できるブロック。挿入した箇所でページが切り替わります。ただし、1ページ当たりのコンテンツ量が減るとSEO的に不利になる場合もあるため、本当に必要かどうか検討してから使うのがおすすめです。
埋め込み系ブロック
埋め込みブロック（YouTube・Googleマップなど）
YouTubeの動画、Googleマップ、X（旧Twitter）のポストなどを、URLを貼り付けるだけで埋め込めるブロック。以前はショートコードや手書きiframeが必要でしたが、今はずっとシンプルになりました。
カスタムHTMLブロック（<!-- wp:html -->）を使えば、独自のHTMLコードを自由に挿入することも可能です。Googleマップの埋め込みなど、特殊なコードを貼りたいときに活躍します。
クラシックエディタとGutenbergの違いを整理する
WordPress 5.0でGutenbergが導入されたとき、「使いにくい！」と感じた人は多かったはず。私もその一人でした。でも慣れると、クラシックエディタには戻れないと感じています。何が変わったのか、改めて整理してみます。
| 比較項目 | クラシックエディタ | Gutenberg（ブロックエディタ） |
| 文章入力 | ワープロ感覚で自由に書ける | 段落ごとにブロックで管理 |
| 画像配置 | テキストの流れに挿入 | 画像ブロックとして独立配置 |
| レイアウト | カラムや横並びはHTMLが必要 | ブロックを選ぶだけでOK |
| コード管理 | 一続きのHTMLとして保存 | ブロックごとにコードが分かれる |
| カスタマイズ | CSSの知識がないと難しい | GUIで色・サイズ・配置を変更できる |
一度慣れてしまえば、Gutenbergの方が圧倒的に速くて自由。特にカラムレイアウトやボタン配置が、HTMLなしでできるのは大きなメリットです。
テーマでブロックの見栄えは大きく変わる——SWELLを使っている理由
じつは、Gutenbergのブロックはテーマによってデザインや機能が大きく変わります。同じ段落ブロックでも、テーマが違えば見た目がまったく別物になる。そのことに気づいてから、テーマ選びをかなり真剣に考えるようになりました。
このブログが使っているのは「SWELL」というWordPressテーマ。いくつものテーマを渡り歩いた末に辿り着いた、今のところいちばんしっくりきているテーマです。
SWELL（スウェル）とは
初心者から上級者まで幅広く支持されている有料WordPressテーマです。ブロックエディターとの相性が良く、独自の装飾ブロックが豊富なのが特徴。「使いやすさ」と「デザインの自由度」が高いレベルで両立しています。
| 商品名 | WordPressテーマ SWELL |
| 公式サイト | SWELLの特徴を見てみる |
| 販売価格 | ￥17,600（税込） ※買い切り・追加費用なし |
| 販売元 | 株式会社LOOS |
| ライセンス | GPL100%テーマ ※複数サイトで利用可能 |
価格はちょっとお高め（17,600円）ですが、買い切りで複数サイトに使えるのでコスパは悪くありません。表示速度が速いのもSEO的に助かっています。
Gutenbergキーボードショートカット一覧
ブロックの追加・削除・移動は、ショートカットキーを使うと格段に速くなります。マウスを使わず手元だけで操作できると、記事作成のテンポが全然違う。よく使うものだけでも覚えておく価値があります。
まとめ：ブロックの仕組みを知ると、WordPressがもっと楽しくなる
最初は謎に見えた <!-- wp:paragraph --> というコード。正体は「ここはどんなブロックか」をWordPressに伝えるための識別タグで、実はHTMLの基本構文を応用したシンプルな仕組みでした。
ブロックの種類は多いですが、最初からすべて覚える必要はまったくありません。段落・見出し・画像の3つを使いこなすだけで、記事の8割は作れます。そこから少しずつ、カラムやボタンなど便利なブロックを足していけばいい。
ブロックエディターに慣れてくると、「あ、これもブロックで解決できる」という発見が増えてきます。ぜひ、実際に触りながら使い方を覚えてみてください。
コメント