【WordPress】register_block_styleで囲みボックスをワンクリックで切り替える！

〜コードなしで使えるスタイル登録の仕組み〜

theme.jsonでサイトの土台が整ったら、次のステップはここです！

register_block_styleを使えば、エディターのサイドパネルからワンクリックでスタイルを切り替えられるようになります。

コードはAIに丸投げでOK！仕組みの理解と使い方だけ覚えれば十分です。

この記事では
・register_block_styleの仕組み
・ファイルを分けてスッキリ管理する方法
・すぐ使えるボックススタイルの全コード

を、実例を交えながら解説します。

① register_block_styleって何をするもの？

AD – 読み進める前のひとやすみ

WordPressのブロックには、デフォルトで「スタイル」を切り替える機能があります。
register_block_styleは、そこにオリジナルのスタイルを追加登録できる関数です。

📋 登録前（デフォルト）

スタイル

デフォルト 点線

デフォルトのスタイルしかない

✅ 登録後

スタイル

デフォルト ✅ まとめ 💡 ポイント ⚠️ 注意

オリジナルスタイルが追加された！

エディターでスタイルを「選べる」ようになる仕組み

グループブロックを選択したとき、右側の設定パネルに「スタイル」という項目があります。
ここに自分で登録したスタイルが並ぶようになります。

📝

グループブロックを
選択する

→

🎨

右パネルの
「スタイル」を選ぶ

→

✨

スタイルが
即反映される！

✅ つまりregister_block_styleは
「グループブロックを選んで、右パネルからスタイルをポチッと切り替えるだけ」
HTMLを毎回書かなくても囲みボックスが使えるようになる仕組みです！

② どこに書くの？ファイル構成の確認

AD – 読み進める前のひとやすみ

register_block_styleはPHPで書く関数です。
「PHPって難しそう…」と思った方、大丈夫です！
コードはAIに丸投げでOK。仕組みと使い方だけ理解すれば十分です😊

ファイルを分けて管理する理由

functions.phpに全部書くこともできますが、スタイルが増えるにつれてどこに何が書いてあるかわからない状態になりがちです。

😓 functions.phpに全部書く

functions.php
├── テーマセットアップ
├── スクリプト読み込み
├── register_block_style①
├── register_block_style②
├── register_block_style③
└── …どんどん増える😭

😊 ファイルを分けて管理

functions.php
└── require 'inc/block-styles.php'

inc/block-styles.php
└── register_block_styleを全部ここに
    CSSもインラインで一緒に書く！

inc/block-styles.phpに登録する

テーマフォルダの中にincフォルダを作り、
その中にblock-styles.phpを作ります。

kk-theme/
├── style.css
├── theme.json
├── functions.php
├── inc/
│   └── block-styles.php  ← ここを新規作成
└── templates/
    └── index.html

functions.phpは読み込むだけ

functions.phpには1行追加するだけでOKです👇

// ブロックスタイルの登録
require get_template_directory() . '/inc/block-styles.php';

📝 ポイント
get_template_directory()はテーマフォルダのパスを取得する関数です。
これを使うことでどんな環境でも正しいパスで読み込めます。

CSSはインラインで書く（おすすめ）

register_block_styleにはCSSをインラインで一緒に書けるオプションがあります。
PHPファイル1つで完結するので、AIに追加をお願いするときも管理するときもラクです😊

register_block_style( 'core/group', [
    'name'         => 'kk-summary',
    'label'        => '✅ まとめ',
    'inline_style' => '
        .wp-block-group.is-style-kk-summary {
            background-color: #eef6f0;
            border-left: 4px solid #4a7c7e;
            border-radius: 8px;
            padding: 1.25rem 1.5rem;
        }
    ',
] );

（補足）CSSファイルに分ける方法もある

スタイルが増えてきたり、CSSだけ別で管理したい場合は
assets/css/block-styles.cssに分ける方法もあります。

// functions.phpでCSSファイルを読み込む
function kk_block_styles_css() {
    wp_enqueue_block_style( 'core/group', [
        'handle' => 'kk-group-styles',
        'src'    => get_theme_file_uri( 'assets/css/block-styles.css' ),
        'path'   => get_theme_file_path( 'assets/css/block-styles.css' ),
    ] );
}
add_action( 'init', 'kk_block_styles_css' );

✅ 全体の流れまとめ
① inc/block-styles.php　→　スタイルをPHP＋CSSインラインで登録
② functions.php　→　①を読み込むだけ（1行）
③ AIに追加をお願いするのが一番ラク😊

実際に作ってみよう（まとめボックスを例に）

AD – 読み進める前のひとやすみ

実際に「まとめボックス」を1つ作ってみましょう。
このコードをそのままAIに渡して「同じ形式でポイントボックスも追加して」と
お願いするだけで、どんどん増やせます😊

inc/block-styles.phpのコード

inc/block-styles.phpを新規作成して、このコードを貼り付けます👇

function kk_register_block_styles() {

    // ✅ まとめ（緑）
    register_block_style( 'core/group', [
        'name'         => 'kk-summary',
        'label'        => '✅ まとめ',
        'inline_style' => '
            .wp-block-group.is-style-kk-summary {
                background-color: #eef6f0;
                border-left: 4px solid #4a7c7e;
                border-radius: 8px;
                padding: 1.25rem 1.5rem;
            }
        ',
    ] );

}
add_action( 'init', 'kk_register_block_styles' );
‘core/group’ どのブロックに追加するか。ここではグループブロックに追加しています。 ‘name’ スタイルの識別名。.is-style-kk-summaryというCSSクラスになります。 ‘label’ エディターの右パネルに表示される名前です。 ‘inline_style’ 適用するCSSをここに直接書きます。

エディターでの使い方（図解）

コードを保存したら、エディターでこの手順で使えます👇

➕

グループブロックを
追加する

→

👆

グループブロックを
選択する

→

🎨

右パネルの
「スタイル」を開く

→

✨

「✅ まとめ」を
クリック！

選択すると、こんな見た目になります👇

── 仕上がりイメージ ──

✅ まとめ

ここにまとめの内容を書きます。グループブロックの中にテキストや画像を自由に入れられます。

④ スタイルの種類を増やしていく

AD – 読み進める前のひとやすみ

「まとめ」が動いたら、同じ形式でどんどん追加していくだけです。
AIに「同じ形式でポイント・注意・メモ・も追加して」とお願いするだけで全部揃います😊

ポイント・注意・メモ・ボックスを追加

こんなふうにお願いしてみてください👇

🤖 AIへの頼み方の例

「下記のコードに、同じ形式でポイント（薄い青）・注意（薄いオレンジ）・メモ（薄いグレー）も追加して。
ボーダーカラーはポイント#4a7c7e、注意#c8956c、メモ#888888」

追加すると、こんなスタイルが揃います👇

✅ まとめ

記事のまとめや結論を書くときに使います

💡 ポイント

覚えておきたいポイントや補足を書くときに使います

⚠️ 注意

気をつけてほしいことや注意事項を書くときに使います

📝 メモ

補足情報や余談を書くときに使います

全コードまとめ（コピペ用）

これがinc/block-styles.phpの完成版です。
＊PHPファイルは必ず先頭に <?php が必要です。

そのままコピーして使えます👇

<?php
/**
 * ブロックスタイルの登録
 */
function kk_register_block_styles() {

    // ✅ まとめ（緑）
    register_block_style( 'core/group', [
        'name'         => 'kk-summary',
        'label'        => '✅ まとめ',
        'inline_style' => '
            .wp-block-group.is-style-kk-summary {
                background-color: #eef6f0;
                border-left: 4px solid #4a7c7e;
                border-radius: 8px;
                padding: 1.25rem 1.5rem;
            }
        ',
    ] );

    // 💡 ポイント（青）
    register_block_style( 'core/group', [
        'name'         => 'kk-point',
        'label'        => '💡 ポイント',
        'inline_style' => '
            .wp-block-group.is-style-kk-point {
                background-color: #e8f2f8;
                border-left: 4px solid #4a7c7e;
                border-radius: 8px;
                padding: 1.25rem 1.5rem;
            }
        ',
    ] );

    // ⚠️ 注意（オレンジ）
    register_block_style( 'core/group', [
        'name'         => 'kk-caution',
        'label'        => '⚠️ 注意',
        'inline_style' => '
            .wp-block-group.is-style-kk-caution {
                background-color: #fdf0e8;
                border-left: 4px solid #c8956c;
                border-radius: 8px;
                padding: 1.25rem 1.5rem;
            }
        ',
    ] );

    // 📝 メモ（グレー）
    register_block_style( 'core/group', [
        'name'         => 'kk-memo',
        'label'        => '📝 メモ',
        'inline_style' => '
            .wp-block-group.is-style-kk-memo {
                background-color: #f4f4f4;
                border-left: 4px solid #888888;
                border-radius: 8px;
                padding: 1.25rem 1.5rem;
            }
        ',
    ] );


}
add_action( 'init', 'kk_register_block_styles' );

✅ ポイントおさらい
追加したいスタイルが増えたらAIに丸投げするだけ！
インラインスタイルでとお願いすれば、PHPとCSSが1つのファイルにまとまるのでコピペも一回ですみます😊

⑤ theme.jsonとの役割分担まとめ

AD – 読み進める前のひとやすみ

ここまで読んで「theme.jsonとregister_block_style、
結局どっちに書けばいいの？」と思った方へ。
迷ったときの判断基準を整理します！

📋 theme.jsonの役割

サイト全体のデザインルール

  • 色・フォントの登録
  • 見出しの基本スタイル
  • レイアウトの幅
  • コアブロックの初期スタイル

🎨 register_block_styleの役割

ブロックのスタイルバリエーション追加

  • まとめ・ポイント・注意ボックス
  • 使いたいときだけ選んで使う
  • 記事ごとに使い分けられる
  • エディターからワンクリックで適用

どっちに書けばいいか迷ったときの判断基準

この一言で判断できます👇

「すべての記事で同じにしたい？」

YES → theme.json

見出しのサイズ・フォント・
背景色など
サイト全体で統一したいもの

NO → register_block_style

まとめ・ポイント・注意など
記事によって
使い分けたいもの

具体的にはこんな感じです👇

やりたいこと theme.json register_block_style
h2の文字サイズを統一したい ✅ —
引用ブロックに左ボーダーをつける ✅ —
まとめボックスを記事に使いたい — ✅
注意ボックスを時々使いたい — ✅
カラーパレットを登録する ✅ —

もっと使いこなしたい人へ

AD – 読み進める前のひとやすみ

基本が理解できたら、次のステップに進んでみましょう！
register_block_styleはグループブロック以外にも使えます。

グループ以外のブロックにも使える

第1引数のブロック名を変えるだけで、
どのコアブロックにもスタイルを追加できます👇

📝 段落ブロック

'core/paragraph'

リード文に背景色をつけたり
強調スタイルを追加できます

🖼️ 画像ブロック

'core/image'

角丸・ボーダー付きなど
画像スタイルを追加できます

📋 リストブロック

'core/list'

チェックリスト風など
オリジナルのリストスタイルが作れます

🔢 見出しブロック

'core/heading'

背景色付き・左ボーダー付きなど
見出しスタイルを追加できます

🤖 AIへの頼み方の例

伝えることは3つだけです。

  • どのブロックに追加したいか（例：見出しブロック）
  • どんな見た目にしたいか（例：背景色つき・左ボーダーつき）
  • インラインスタイルで書いてほしいと一言添える

💬 「見出しブロック（core/heading）に背景色つきのスタイルを追加して。背景は薄い黄色、左ボーダーはオレンジ。インラインスタイルで」

✅ 今日のまとめ
① register_block_styleでエディターにスタイルを追加できる
② コードはAIに丸投げでOK！
③ theme.json＝全体のルール、register_block_style＝使い分けるパーツ
④ グループ以外のブロックにも応用できる

最後まで読んでいただき、ありがとうございました。
おつかれさまでした 🍵

スポンサーリンク