この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
WordPressのブロックエディターを使っていると、「この段落、いつも同じ囲みデザインにしたいな」「毎回おなじCSSクラスを手打ちするのが地味に面倒…」と感じること、ありませんか？
そんなときに便利なのがブロックスタイルです。
一度登録しておけば、ブロックの設定パネルからポチッと選ぶだけで、決まったデザインを何度でも呼び出せます。
この記事では、ブロックスタイルの追加方法を初めての方にもわかるように解説しつつ、そのままコピペで使える実例を8つ用意しました。
段落・引用・見出し・リスト・画像と、よく使うブロックをひととおりカバーしているので、気に入ったものだけ選んで使ってくださいね。
そもそもブロックスタイルって？
ブロックスタイルは、ブロックの見た目をワンクリックで切り替えられるWordPressの標準機能です。
たとえばボタンブロックには、最初から「塗りつぶし」と「輪郭」という2つのスタイルが用意されていますよね。
あの、設定パネルの「スタイル」欄に並ぶ選択肢が、まさにブロックスタイルです。
自分で作ったデザインをここに追加しておけば、記事を書くたびにCSSクラスを手入力する必要がなくなります。
「追加CSSクラス」欄に毎回おなじクラス名を打ち込む…みたいな手間から解放されるわけですね。
仕組みはとてもシンプルです。
スタイルを選ぶと、ブロックに is-style-スタイル名 というクラス名が自動で付きます。
あとはそのクラスにCSSを当てるだけ。
例
たとえば、次のような蛍光ペン風のマーカーを作るとします。
ここにマーカーを引いたような装飾がつきます。
この、文字に蛍光ペンで線を引いたようなマーカーの装飾は、marker という名前でスタイルを登録し、CSSを当てて作っています。
登録は、次の1行で行っています。
register_block_style( 'core/paragraph', array( 'name' => 'marker', 'label' => 'マーカー' ) );register_block_style が、スタイルを登録するための命令です。
最初の core/paragraph は、どのブロックに追加するかの指定で、これは段落ブロックを表します。
続く name がスタイルの名前、label が設定エリアに表示される名前です。
ここでは name に marker と付けているので、この marker がこのあと大事になります。
くわしい書き方や貼り場所はこのあとの章で説明するので、今はこの1行でマーカーを登録している、とだけ分かれば大丈夫です。
そして、この marker に対して当てているのが次のCSSです。
.is-style-marker {
background: linear-gradient(transparent 60%, #c3ebcb 60%);
}ここで注目したいのが、登録した marker という名前と、CSSの .is-style-marker のうしろ半分が、同じ marker になっている点です。
この2つは、次のように連動しています。
追加CSSに書く .is-style-marker は、このクラスが付いたブロックを狙ってデザインを当てるための目印です。
この関係さえ押さえておけば、あとは name を変えるだけで、いくらでも増やせます。
そこでマーカーを選ぶだけで、決めておいたデザインが呼び出される、という流れです。
この仕組みのおかげで、記事を書くときの操作がとてもシンプルになります。
ブロックを選ぶと右側に設定エリアが出ます。
そこでマーカーを選ぶだけで、決めておいたデザインが呼び出される、という流れです。
CSSクラスを毎回手で打ち込む必要がなくなるので、記事を書くスピードがぐっと上がります。
追加方法は大きく2つ（初心者はPHPでOK）
ブロックスタイルの登録方法には、PHPで登録する方法とJavaScriptで登録する方法の2つがあります。
PHPで登録する方法（register_block_style という関数を使います）は、functions.phpに数行書くだけで完結します。
JavaScriptファイルを別途用意する必要がなく手軽なので、この記事ではこちらを使います。
JavaScriptで登録する方法（registerBlockStyle という関数を使います）は、専用のJSファイルを作って読み込ませる必要があり、少し手間がかかります。
細かい制御をしたい上級者向けなので、まずはPHPの方法から始めるのがおすすめです。
| 比較 | PHP（register_block_style） | JavaScript（registerBlockStyle） |
|---|---|---|
| 書く場所 | functions.php | 専用のJSファイル |
| 手軽さ | ◎ 数行で完了 | △ ファイルの読み込みが必要 |
| おすすめ度 | まずはこれ | 細かい制御をしたい人向け |
【下準備】スタイルをまとめて登録する
まずは、これから使う8つのスタイルをまとめて登録してしまいましょう。
コードを貼る前に（大切な注意）
PHPのコードを扱う前に、いくつか知っておいてほしいことがあります。
functions.php は、書き方を1文字でも間違えると、サイト全体が表示されなくなる（いわゆる真っ白になる）ことがあるファイルです。
管理画面すら開けなくなる場合もあるので、さわるときは必ず事前にバックアップを取ってください。
また、配布テーマ（SANGOなど）の functions.php を直接編集すると、テーマが更新されたときに、書き足した内容がまるごと消えてしまいます。
そのため、コードは次のどちらかに貼るのがおすすめです。
子テーマの functions.php（テーマ更新の影響を受けません）
Code Snippets のようなコード管理プラグイン（管理画面から追加でき、問題があれば1クリックで止められます）
とくに慣れていないうちは、Code Snippets を使う方法が安全です。
貼ったコードが原因でエラーが出ても、プラグインの画面からそのコードだけを無効化すれば、すぐに元へ戻せるからです。
もし直接編集していて真っ白になってしまったときは、FTPソフトやサーバーのファイルマネージャーから、貼ったコードを削除すれば復旧できます。
この記事のコードは、手元の環境で動作を確認したうえで掲載していますが、WordPressやテーマ、プラグインのバージョン、ほかのコードとの組み合わせによっては、同じように動かないこともあります。
導入は、バックアップを取ったうえで、各自の環境と責任のもとで行ってください。
登録用コード
下の登録用コードを貼り付けてください。
register_block_style の第1引数がブロック名（段落ブロックは core/paragraph）、第2引数がスタイルの中身です。
name がクラス名のもとになり、label が設定パネルに表示される名前になります。
使わないデザインは、その行を消してしまってOKです。
add_action( 'init', 'clover_register_block_styles' );
function clover_register_block_styles() {
// 段落：囲みボックス
register_block_style( 'core/paragraph', array( 'name' => 'box', 'label' => '囲みボックス' ) );
// 段落：マーカー
register_block_style( 'core/paragraph', array( 'name' => 'marker', 'label' => 'マーカー' ) );
// 段落：メモ
register_block_style( 'core/paragraph', array( 'name' => 'memo', 'label' => 'メモ' ) );
// 段落：吹き出し
register_block_style( 'core/paragraph', array( 'name' => 'balloon', 'label' => '吹き出し' ) );
// 引用：クローバー引用
register_block_style( 'core/quote', array( 'name' => 'clover', 'label' => 'クローバー引用' ) );
// 見出し：下線
register_block_style( 'core/heading', array( 'name' => 'underline', 'label' => '下線' ) );
// リスト：チェック
register_block_style( 'core/list', array( 'name' => 'check', 'label' => 'チェック' ) );
// 画像：ポラロイド
register_block_style( 'core/image', array( 'name' => 'polaroid', 'label' => 'ポラロイド' ) );
}これで、各ブロックの設定パネルに「囲みボックス」「マーカー」などのスタイルが並びます。
あとは、選んだときに付く is-style-スタイル名 というクラスにCSSを当てるだけ。
そのCSSを次の章でデザインごとに用意しているので、好きなものを選んでコピペしてくださいね。
CSSの貼り先は、管理画面の 外観 → カスタマイズ → 追加CSS です。
ブロック名の調べ方
下準備の章では、register_block_style の第1引数にブロック名を書きました。
段落なら core/paragraph、引用なら core/quote、という具合です。
では、自分が使いたいブロックの名前は、どうやって調べればいいのでしょうか。
確実でわかりやすい方法を、2つ紹介します。
コードエディターで確認する（いちばん手軽）
いちばん手軽なのは、エディターの表示をコードエディターに切り替える方法です。
編集画面の右上にあるオプション（3つの点のアイコン）を開き、コードエディターを選びます。
キーボードからなら、Shift + Ctrl + Alt + M のショートカットでも切り替えられます。
すると、それぞれのブロックがHTMLコメントで囲まれているのが見えます。
<!-- wp:paragraph --><p>ここに本文が入ります</p><!-- /wp:paragraph -->この wp:paragraph の部分が、そのブロックの名前です。
実際の画面では、開始コメント・本文・終了コメントが数行に分かれて表示されますが、注目するのは先頭の wp:paragraph だけで大丈夫です。
ここでひとつ、大事なポイントがあります。
WordPressに最初から入っているブロック（コアブロック）は、コメントの中では core/ が省略され、wp: だけで表示されます。
そのため register_block_style に書くときは、省略されている core/ を自分で付け足す必要があります。
つまり、コメントで wp:paragraph と見えたら、コードには core/paragraph と書く、という読み替えです。
よく使うコアブロックの読み替えを、表にまとめておきます。
| コードエディターの表示 | register_block_style に書く名前 |
|---|---|
| wp:paragraph | core/paragraph |
| wp:heading | core/heading |
| wp:list | core/list |
| wp:quote | core/quote |
| wp:image | core/image |
一方、プラグインが追加したブロックには、この core/ の省略がありません。
コメントに表示された名前を、そのまま第1引数に書きます。
たとえば、コードを表示するHCBブロックをコードエディターで見ると、次のように表示されます。
<!-- wp:loos-hcb/code-block -->この場合のブロック名は loos-hcb/code-block です。
コアブロックと違って core/ には置き換えず、表示されたままの名前を使います。
コンソールで全ブロックを一覧表示する（確実）
プラグイン製ブロックの正確な名前を調べたいときや、登録済みのブロックをまとめて確認したいときは、ブラウザのコンソールが便利です。
エディターを開いた状態で F12 キーを押し（または画面を右クリックして検証を選び）、コンソールのタブを開きます。
コンソールの一番下に、文字を入力できる横長の入力欄があります。
そこに次の1行を入力し、Enterキーを押します。
console.log(wp.blocks.getBlockTypes().map(b => b.name).sort().join('\n'))はじめて貼り付けるときは、Chromeなどが安全のための警告を出し、allow pasting と入力するよう求めてくることがあります。
短いコマンドなので、警告が気になる場合は貼り付けずに手で打ち込むのが確実です。
登録されているすべてのブロックの名前が、アルファベット順に縦一列で並びます。
途中で省略されず全部表示されるので、上から順にスクロールして目当てのブロックを探せます。
core/paragraph や loos-hcb/code-block のように表示された文字列が、そのまま register_block_style に書くブロック名です。
コードエディターのコメントと違い、コンソールではコアブロックも core/paragraph のように core/ 付きで表示されるので、読み替えなしでそのままコピーできます。
【コピペ集】ブロックスタイル8選
ここからは、よく使うブロックのスタイルを8つ紹介します。
各デザインに「表示イメージ」と「CSS」を用意しているので、気に入ったものをコピペしてください。
登録用のPHPは、前の章のコードにすべて含まれています。
各デザインのCSSは、管理画面の 外観 → カスタマイズ → 追加CSS にまとめて貼り付けてください。
気に入ったものを続けて貼り足していけば、いくつでも増やせます。
囲みボックス（段落）
緑の枠でやさしく囲むスタイルです。
大事なポイントや補足をまとめるときに使いやすい、いちばん出番の多いデザインです。
ここが囲みボックスのスタイルです。大事なポイントをまとめるときに便利ですよね。
.is-style-box {
border: 2px solid #37a845;
border-radius: 8px;
background: #f4fbf5;
padding: 1em 1.2em;
}マーカー（段落）
蛍光ペンで線を引いたような装飾です。
強調したい一文にサッと使えます。
ここにマーカーを引いたような装飾がつきます。ワンクリックで強調できて便利ですよね。
.is-style-marker {
background: linear-gradient(transparent 60%, #c3ebcb 60%);
}メモ・付箋風（段落）
付箋のような枠で囲むスタイルです。
ちょっとした注意書きやひとことアドバイスにぴったりです。
付箋のようなメモ枠です。補足やひとことアドバイスを添えるときに。
.is-style-memo {
background: #fff9db;
border-left: 6px solid #ffd43b;
border-radius: 4px;
padding: 1em 1.2em;
}吹き出し（段落）
上に小さな三角形がついた、会話っぽく見えるスタイルです。
語りかけるような文章に合います。
.is-style-balloon {
position: relative;
background: #f4fbf5;
border: 2px solid #37a845;
border-radius: 12px;
padding: 1em 1.2em;
margin-top: 1.4em;
}
.is-style-balloon::before {
content: "";
position: absolute;
top: -20px;
left: 28px;
border: 10px solid transparent;
border-bottom-color: #37a845;
}
.is-style-balloon::after {
content: "";
position: absolute;
top: -16px;
left: 30px;
border: 8px solid transparent;
border-bottom-color: #f4fbf5;
}引用（引用）
左に太めのラインと大きな引用符をつけた、目に留まりやすい引用スタイルです。
ブロックが引用ブロックに変わる点にだけ注意してください。
引用をおしゃれに見せるスタイル。読者の目に留まりやすくなります。
.wp-block-quote.is-style-clover {
position: relative;
border-left: 4px solid #37a845;
background: #f4fbf5;
border-radius: 0 8px 8px 0;
padding: 1em 1.2em 1em 2.6em;
font-style: normal;
}
.wp-block-quote.is-style-clover::before {
content: "\201C";
position: absolute;
left: 0.5em;
top: 0.05em;
font-size: 2.4em;
line-height: 1;
color: #37a845;
}下線見出し（見出し）
見出しの下にアクセントカラーの線を引くスタイルです。
記事の区切りがはっきりして、読みやすくなります。
下線つきの見出し
.wp-block-heading.is-style-underline {
padding-bottom: 0.3em;
border-bottom: 3px solid #37a845;
}チェックリスト（リスト）
行頭にチェックマークをつけるスタイルです。
手順や「やることリスト」を見やすく整理できます。
- チェック付きのリスト
- 手順やチェックリストにぴったり
.wp-block-list.is-style-check {
list-style: none;
padding-left: 0;
margin: 0;
}
.wp-block-list.is-style-check li {
list-style: none;
display: flex;
align-items: flex-start;
gap: 0.5em;
margin-bottom: 0.5em;
}
.wp-block-list.is-style-check li::before {
content: "";
flex: 0 0 auto;
width: 1.3em;
height: 1.3em;
margin-top: 0.3em;
background: #37a845 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5 L10 16.5 L18 7.5'/%3E%3C/svg%3E") no-repeat center;
background-size: 0.8em;
border-radius: 50%;
}ポラロイド（画像）
写真に白いフチと影をつけて、ポラロイド写真のように見せるスタイルです。
さりげなく“こなれ感”が出ます。
.wp-block-image.is-style-polaroid img {
border: 10px solid #fff;
border-bottom-width: 40px;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
background: #fff;
}編集画面（エディター）にも反映させたいとき
追加CSSに貼ったスタイルは、公開後の記事にはちゃんと反映されますが、編集中のエディター画面には表示されません。
書きながら見た目を確認したい場合は、エディターにもCSSを届ける必要があります。
方法は2つあります。
ひとつめは、register_block_style の inline_style を使う方法です。
登録と同時にCSSも書いてしまえば、公開ページとエディターの両方に読み込まれます。
CSSを1行の文字列で渡すのが少し窮屈ですが、追加CSSを別に用意しなくていいのが手軽なところです。
register_block_style( 'core/paragraph', array(
'name' => 'box',
'label' => '囲みボックス',
'inline_style' => '.is-style-box { border: 2px solid #37a845; border-radius: 8px; background: #f4fbf5; padding: 1em 1.2em; }',
) );ふたつめは、CSSファイルを用意して、公開ページ用とエディター用の両方のフックで読み込む方法です。
スタイルが増えてきたら、こちらのほうが管理しやすいです。
子テーマ直下に block-style.css を置いて、そこにCSSをまとめる想定です。
最後に指定している filemtime は、CSSファイルの更新時刻を自動でバージョンに使うおまじないのようなものです。
これを入れておくと、ファイルを直したときにブラウザが新しいCSSを読み直してくれるので、「変更したのに反映されない」を防げます。
難しく感じたら、まずはそのままコピペで大丈夫です。
add_action( 'wp_enqueue_scripts', 'clover_block_style_css' ); // 公開ページ用
add_action( 'enqueue_block_editor_assets', 'clover_block_style_css' ); // 編集画面用
function clover_block_style_css() {
wp_enqueue_style(
'clover-block-style',
get_stylesheet_directory_uri() . '/block-style.css',
array(),
filemtime( get_stylesheet_directory() . '/block-style.css' )
);
}登録したスタイルを消したいとき
自分で追加したスタイルを消したいときは、unregister_block_style が使えます。
第1引数にブロック名、第2引数にスタイル名を指定します。
add_action( 'init', 'clover_unregister_block_styles' );
function clover_unregister_block_styles() {
unregister_block_style( 'core/paragraph', 'box' ); // 自分で追加した「囲みボックス」を消す例
}注意点
ひとつ注意点があります。
unregister_block_style で消せるのは、PHPの register_block_style で自分が登録したスタイルだけです。
WordPressに最初から入っている標準スタイル（画像ブロックの「角丸」など）は、この関数では消せません。
標準スタイルを消したいときは、JavaScriptの wp.blocks.unregisterBlockStyle を使います。
このJSファイルをエディター用に読み込めば、標準スタイルも隠せます。
ここは少し上級者向けなので、必要になったときに使ってみてください。
wp.domReady( function () {
wp.blocks.unregisterBlockStyle( 'core/image', 'rounded' ); // 画像の「角丸」を消す例
} );ここまでで方法がいくつか出てきたので、消したい対象ごとに整理しておきます。
大事なのは、登録した仕組みと同じ土俵で消すという点です。
PHPで足したものはPHPで、JavaScriptで用意されたものはJavaScriptで消す、と覚えておくと迷いません。
| 消したいスタイル | 方法 |
|---|---|
| 自分がPHPで追加したスタイル（この記事の囲みボックスなど） | 追加した register_block_style の行を消す（一番簡単） |
| 自分がPHPで追加したスタイルを、行は残したまま打ち消したい | PHPの unregister_block_style を使う |
| WordPress標準のスタイル（画像ブロックの角丸など） | JavaScriptの wp.blocks.unregisterBlockStyle を使う |
一番上の「行を消す」がもっとも簡単で確実なので、自分で足したスタイルを消すだけなら、まずはこれで十分です。
真ん中の unregister_block_style は、少し特殊な場面用です。
登録している元のコードが共通ファイルにあって直接さわりたくない、でも一部のスタイルだけ引っ込めたい、というときに、行はそのままで後から打ち消せます。
ふだんは、いちばん上の「行を消す」で足りるので、無理に使う必要はありません。
いちばん下の wp.blocks.unregisterBlockStyle は、自分では追加していない標準スタイルを選択欄から隠したいとき用です。
標準スタイルだけJavaScriptに変わるのは、ブロックエディターの画面そのものがJavaScriptで動いていて、標準スタイルもその一部として組み込まれているためです。
PHPを通さずに用意されているので、消すときも同じJavaScriptの側から指示する必要がある、というわけです。
うまくいかないときのチェックリスト
つまずきやすいポイントを、症状別にまとめておきます。
スタイルが選択欄に出てこない
まず、register_block_style が正しい枠組みの中に入っているかを確認します。
register_block_style は、それ単体で書くのではなく、add_action( ‘init’, … ) という枠の中に入れて呼び出す必要があります。
init というのは、WordPressが準備を整えるタイミングのことで、そのタイミングでスタイルを登録する、という約束事になっています。
下準備で貼ったコードは、次のような形になっていましたよね。
add_action( 'init', 'clover_register_block_styles' );
function clover_register_block_styles() {
// この中に register_block_style を書く
register_block_style( 'core/paragraph', array( 'name' => 'marker', 'label' => 'マーカー' ) );
}この add_action と function の枠が抜けていたり、閉じカッコが足りなかったりすると、スタイルは登録されず、選択欄にも出てきません。
コードのどこかにPHPのエラーがあるときも同じなので、下準備のコードをまるごとコピーし直して、貼り間違いがないか見直してみてください。
枠組みは合っているのに出てこない場合は、ブロック名の指定が間違っている可能性があります。
正しいブロック名の調べ方は、この記事のブロック名の調べ方の章で解説しているので、そちらを参考にしてください。
選べるのに見た目が変わらない
はじめに、そのCSSを 外観 → カスタマイズ → 追加CSS に貼れているかを確認してください。
別の場所に貼っていると、コードが正しくても反映されません。
次に、ブロックに付くクラス名とCSSのセレクタがズレていないかを確認します。
スタイルを選ぶと、ブロックには is-style-スタイル名 という形のクラス名が自動で付きます。
このスタイル名の部分には、登録のときに指定した name がそのまま入ります。
たとえば下準備で name を marker として登録したマーカーなら、実際に付くクラス名は is-style-marker になります。
一方、コピペしたCSSは、そのクラス名を狙って書かれています。
.is-style-marker {
background: linear-gradient(transparent 60%, #c3ebcb 60%);
}つまり、ブロックに付く is-style-marker と、CSSのセレクタの .is-style-marker が、同じ名前でそろっている必要があります。
ここがよくあるつまずきどころで、name を marker で登録したのに、CSSのほうを .is-style-highlight のように別の名前で書いていると、どこにも当たらず見た目が変わりません。
マーカーの m と、CSSの綴りが1文字違う、といったタイプミスでも当たらなくなります。
登録した name と、CSSのセレクタのうしろ半分が、まったく同じ文字になっているかを見比べてみてください。
実際にブロックにどのクラスが付いているか確かめたいときは、変わらない部分を右クリックして検証を選ぶと、そのブロックのHTMLとクラス名を直接確認できます。
名前は合っているのに変わらない場合は、ブラウザのキャッシュが残っているだけのこともあります。
CSS自体は正しくても、直す前の古い表示が残ってしまうケースです。
キャッシュを消して再読み込み（スーパーリロード）すると直ります。
ショートカットは、WindowsのChromeなら Ctrl + Shift + R、Macなら Command + Shift + R です。
テーマのCSSに負けて反映されない
SANGOなどテーマ側のCSSのほうが強い場合があります。
まずはセレクタの詳細度を上げてみましょう。
たとえば .wp-block-paragraph.is-style-marker のように書くと勝ちやすくなります。
それでもダメなときの最後の手段として !important もありますが、乱用は避けたいところです。
編集画面だけ反映されない
追加CSSは公開ページ専用です。
エディターにも出したいときは、前の章の inline_style かCSSファイルの読み込みを使ってください。
まとめ
- ブロックスタイルの追加は、思っているよりずっと簡単です。
- あらためて流れをおさらいすると、register_block_style で name と label を登録し、is-style-name にCSSを当てる。
- エディターにも出したいなら inline_style かCSSファイルの読み込みを足す。
基本はこれだけです。
よく使うデザインをスタイル化しておくと、記事を書くスピードがぐっと上がりますし、サイト全体のデザインもきれいにそろいます。
まずは気に入ったものを1つ、コピペして試してみてくださいね。
ボタンのデザインを増やしたい方は、別記事の【CSS】ボタンデザイン14選｜WordPressにコピペOKもあわせてどうぞ。
ブロックスタイルと組み合わせると、コピペだけでかなり表現の幅が広がります。
それでは。
