WordPressのデフォルトブロックを自分好みにカスタマイズ！スタイル追加の完全ガイド

WordPressのデフォルトブロックを自分らしくカスタマイズしたいと思ったことはありませんか？本記事では、PHPによるスタイル登録からCSSでのデザイン追加まで、プラグインに頼らずにデフォルトブロックを効率的にカスタマイズする方法を詳しく解説します。

この記事内ではテーマや子テーマの作成を前提に説明しています。
プラグイン作成時にはファイル名などは読み替えてください。

子テーマの作り方は以下の記事で解説しています。

標準デザインの壁とプラグインの限界

WordPressの標準ブロックエディタ（Gutenberg）は、多くのサイト制作者にとって便利なツールとなっています。しかし、デフォルトで用意されているブロックデザインだけでは、オリジナリティあふれるウェブサイトを構築するのに限界があります。

デフォルトデザインだけでは足りない理由

WordPressのデフォルトブロックは基本的な機能を備えていますが、視覚的なカスタマイズ性については制限があります。例えば、段落ブロックは単純なテキスト表示の機能しか持たず、ボーダーや背景色などのスタイリングオプションが限られています。ボタンブロックも同様に、色やサイズのバリエーションが少なく、サイトのブランドカラーやデザインコンセプトに合わせるのが難しい場合があります。これらの制約は、クリエイティブな表現を追求するウェブデザイナーやコンテンツクリエイターにとって大きな障壁となっています。

また、WordPressのアップデートによって標準機能は徐々に拡充されているものの、多様化するウェブデザインのトレンドにすぐに対応することは難しく、常に最新のデザイン要素を取り入れたいユーザーにとっては物足りなさを感じる場面が多いです。

外部プラグインに頼るカスタマイズの問題点

多くのWordPressユーザーは、デザインの自由度を高めるために外部のプラグインに頼りがちです。確かにブロックエディタ拡張プラグインを使えば、短時間で多様なスタイルを追加できることは魅力的です。しかし、プラグインへの過度な依存には様々な問題点が存在します。

まず、プラグインの増加はサイトの読み込み速度低下につながります。各プラグインは独自のJavaScriptやCSSファイルをロードするため、使用するプラグインが増えるほどページの表示速度が遅くなる傾向があります。これはユーザー体験を損なうだけでなく、SEO評価にも悪影響を及ぼす可能性があります。

さらに、複数のプラグインを組み合わせると互換性の問題が発生することがあります。あるプラグインの更新が他のプラグインの機能を破壊してしまうなど、安定性の面でリスクが高まります。また、プラグイン開発者のサポート終了や更新停止により、セキュリティ上の脆弱性が放置されるケースも少なくありません。

独自スタイル追加のメリット

こうした課題を解決する一つの方法が、WordPressのブロックに独自スタイルを追加することです。コードを用いて自分だけのスタイルを定義することで、プラグインに頼らずに柔軟なデザインカスタマイズが可能になります。

独自スタイル追加の最大のメリットは、必要最小限のコードで実現できる点にあります。不要な機能や重複するコードを含むプラグインと比較して、サイトのパフォーマンスへの影響が少なく、軽量な実装が可能です。また、自分のサイトに必要な機能だけを実装できるため、余計なオプションによる管理画面の複雑化を避けられます。

さらに、テーマの一部としてスタイルを定義することで、テーマ更新時にも設定が失われる心配がありません。長期的な運用の安定性を確保しながら、サイト全体の一貫性のあるデザインを維持することができるのです。

デフォルトブロックへのスタイル追加手順

WordPressのブロックエディターに独自スタイルを追加するには、適切なコードを記述してテーマに組み込む必要があります。この作業は一見難しく感じるかもしれませんが、基本的な手順を理解すれば、プログラミングの初心者でも実装可能です。ここでは、オリジナルのブロックスタイルの登録と実装の基本的な流れを解説します。

PHPによるスタイル定義の基本構文

テーマのファイルか、または子テーマを使用している場合はその子テーマのfunctions.phpに、必要なコードを追加します。

別のPHPファイルに記述して、functions.phpで呼び出す形でも問題ありません

デフォルトのブロックにスタイルを追加する際は、次のような基本構文を使用します：

function my_custom_block_styles() {
    register_block_style(
        'core/paragraph',
        array(
            'name'  => 'emphasis',
            'label' => '強調',
        )
    );
}
add_action( 'init', 'my_custom_block_styles' );

この例では、デフォルトブロックの段落ブロックに対して、「emphasis」という名前のスタイルを追加しています。エディター上では「強調」というラベルで表示されます。このコードを読み込むと、ブロックエディターのサイドバーにスタイルオプションが表示されるようになります。

主要なデフォルトブロックの名称は次の通りです：

その他のブロックについては以下から確認可能です。

参考

コアブロックリファレンスJapanese Team

複数スタイルの一括登録

複数のスタイルを適用したい場合は、次のようにコードを書くことができます：

function register_multiple_block_styles() {
    $block_styles = [
        "emphasis" => "強調",
        "exclamation-mark" => "注意",
        "question-mark" => "疑問"
    ];
    foreach ($block_styles as $key => $value) {
        register_block_style( 'core/paragraph', array( 'name'  => $key, 'label' => $value ) );
    }
}
add_action( 'init', 'register_multiple_block_styles' );

このコードでは、連想配列$block_stylesのkeyへ名前、valueへラベルを定義し、foreachでスタイルを登録しています。

スタイルの名前とラベル設定のポイント

スタイルの名前はシステム内部で使用される識別子で、CSSクラス名としても使用されます。
英数字とハイフンのみを使用した簡潔で意味のある値にすることが推奨されます。また、他のプラグインやテーマと競合しないよう、プレフィックスをつけるとよいでしょう。

スタイルのラベルはエディター上でユーザーに表示される文字列です。
管理画面で表示されるため、ユーザーにとって分かりやすい名称を日本語で設定することをお勧めします。

スタイルバリエーションの効果的な命名規則

複数のスタイルバリエーションを作成する場合、一貫性のある命名規則を設けることが重要です。例えば、色に関するスタイルであれば「color-blue」「color-red」のように接頭辞を統一し、レイアウトに関するスタイルは「layout-wide」「layout-narrow」というように分類するとよいでしょう。

また、目的別にスタイルをグループ化することも効果的です。例えば、「attention-」で始まる注意喚起用スタイルや、「seasonal-」で始まる季節限定デザインなど、用途に応じた命名を行うことで、管理しやすくなります。

CSSによるビジュアルデザインの定義

独自ブロックスタイルの登録後、次はCSSを使って実際のビジュアルデザインを定義していきます。ここでは、登録したスタイル名に基づいたCSSセレクタを使って、ブロックの見た目をカスタマイズする方法を解説します。

スタイルの設定方法

スタイルに関するCSSは、style.cssに記述する方法と別のCSSファイルに記述する方法があります。どちらにもメリット・デメリットがあるため、必要に応じて使い分けてください。

スタイル適用時のCSSセレクタは、基本的に .is-style-{スタイルのname} という形式になります。
先ほど登録した「emphasis」スタイルの場合、次のように書きます：

.is-style-emphasis {
    /* スタイルを記述 */
}

PHPによるスタイル定義の基本構文

スタイルをstyle.cssに記述した場合、この見出しは読み飛ばして問題ありません。

別のCSSファイルに記述した場合、次のようにphpファイルに記述してください：

function enqueue_custom_block_styles() {
    wp_enqueue_style(
        'my-custom-block-styles',
        get_template_directory_uri() . '/assets/css/block-styles.css'
    );
}
add_action( 'enqueue_block_assets', 'enqueue_custom_block_styles' );

enqueue_block_assetsフックを使用して、エディター画面とフロントエンド両方にCSSを読み込んでいます。これにより、編集中の表示と実際のサイト表示が一致するようになります。

エディタパネルでの使いやすさを向上させる工夫

ブロックエディターでの作業効率を高めるには、単にスタイルを追加するだけでなく、それらを使いやすくすることが重要です。この章では、スタイルを簡単に見つけて適用できるようにするためのUIの最適化テクニックについて解説します。

スタイル選択UIの最適化

サイドバーパネルに表示されるスタイル選択ボタンは、デフォルトでは単純なテキストボタンとして表示されます。
この表示方法をカスタマイズすることで、ユーザーのスタイル選択体験を大幅に向上させることができます。

サイドバーに表示されるスタイル選択ボタンのCSSセレクタは、基本的に .block-editor-block-styles__item[aria-label="{スタイルのlabel}"] という形式になります。
先ほど登録した「強調」スタイルの場合、次のように書きます：

.block-editor-block-styles__item[aria-label="強調"] {
    /* スタイルを記述 */
}
.block-editor-block-styles__item[aria-label="強調"] span {
    /* スタイルを記述 */
}

このアプローチにより、エディターのサイドバーにあるスタイル選択UI要素がスタイルの特徴を視覚的に表現する洗練された要素へと進化します。ユーザーはスタイルを選ぶ際に、その適用結果をより直感的に把握できるようになり、コンテンツ作成効率が大幅に向上するでしょう。

このCSSはエディター画面でしか使用しないため、次のようにphpファイルに記述してください：

function enqueue_custom_block_editor_styles() {
    wp_enqueue_style(
        'my-custom-block-editor-styles',
        get_template_directory_uri() . '/assets/css/block-editor-styles.css'
    );
}
add_action( 'enqueue_block_editor_assets', 'enqueue_custom_block_editor_styles' );

enqueue_block_editor_assetsフックを使用して、エディター画面のみにCSSを読み込んでいます。

エディタとフロント表示の一貫性確保

WordPressのブロックエディターの大きな利点の一つは、編集画面での表示と実際のフロントエンド表示の一貫性です。一貫性を確保するためには、同じCSSを両方の環境で読み込むことが基本です。前述のように、enqueue_block_assetsフックを使用すると、エディター画面とフロントエンドの両方でスタイルが適用されます。

しかし、エディター画面とフロントエンドではhtmlの構造が異なっているため、正常に表示できないことがあります。そういった場合は表示調整用のCSSファイルを作成し、enqueue_block_editor_assetsフックを使用して、エディター画面のみに読み込みます。

自作スタイルで実現する理想のデザイン

WordPress サイトの真の魅力を引き出すには、独自のブロックスタイルの活用が鍵となります。自社ブランドに合わせたカラーやフォント、共通のデザインパターンを一貫して適用することで、サイト全体に統一感のある洗練されたビジュアルアイデンティティを確立できます。

まず、ブランドカラーやフォントなどの基本的なデザイン要素を定義し、それらを一貫して使用するスタイルを作成します。たとえば、企業サイトなら企業カラーに合わせたアクセントスタイルを作り、それを見出しや重要なコンテンツブロックに適用することで、視覚的な一貫性が生まれます。

また、共通のデザインパターンを識別し、それらをブロックスタイルとして実装することも効果的です。例えば、「注意喚起ボックス」や「ポイント解説ボックス」など、サイト全体で繰り返し使用されるUIパターンをスタイル化しておくことで、コンテンツクリエーターは簡単に統一されたデザイン要素を使用できるようになります。

このようなブロックスタイルの戦略的な活用によって、単なる情報発信の場を超えた、ブランドの世界観を表現するWebサイトへと進化させることができるでしょう。