2026年7月8日

WordPressのGutenbergブロックにSpacingを追加する

カスタマイズ

はじめに

GutenbergはWordPressにとって革命的なエディタであり、ブロックベースのコンテンツビルダーを提供しています。しかし、デフォルトでは多くのユーザーが求めるような柔軟なスペース調整機能はありません。この記事では、CSSを使用してGutenbergブロック間のスペースをカスタマイズする方法を紹介します。

症状・背景

ブロック間の余白が不十分で、コンテンツが詰め込まれている
特定のページや投稿で特定のスタイルが必要だが、デフォルトでは調整できない
サイト全体の視覚的なバランスを改善したい
スマートなレイアウトを実現するために、より高度なCSSスキルが必要

手順・設定方法

ステップ1: カスタムCSSファイルを作成または既存のCSSファイルを開く

# WordPressのテーマディレクトリに移動します。
cd wp-content/themes/your-theme-name/

# 既存のスタイルシート（style.css）を編集するか、新しいカスタムCSSファイルを作成します。
nano custom-spacing.css

ステップ2: ジェネラルブロック間のスペースを設定

# ブロック間の一般的なマージンを設定します。単位はpx, emなどに変更可能です。
.add-top-margin {
    margin-bottom: 30px;
}

# デフォルトでは、各ブロッククラス名がrandomなハッシュ値になっていますので、特定のブロックをターゲットにするにはそのIDやクラスを調べる必要があります。以下の例は一般的なヘッダーとフッター間のスペースを設定します。
header + .site-content {
    margin-top: 40px;
}

footer + .site-footer {
    margin-bottom: 60px;
}

ステップ3: 特定のブロックに応用

# 画像と次のパラグラフ間のスペースを調整します。
img[src*="example"] + p {
    margin-top: 25px;
}

# パーソナライズされたページで特定のスタイルを使用する場合、そのページ専用のCSSを追加できます。例えば、「about」ページの場合：
.about-page .block-class-name {
    margin-bottom: 10em;
}

ステップ4: 外部CSSファイルを読み込む

# テーマのfunctions.phpファイルを開き、カスタムCSSファイルを読み込みます。
nano functions.php

// 以下を追加：
function custom_css_enqueue() {
    wp_enqueue_style( 'custom-spacing', get_template_directory_uri() . '/css/custom-spacing.css' );
}
add_action('wp_enqueue_scripts', 'custom_css_enqueue');

注意事項

CSSの影響範囲: 特定のブロックだけに影響を与えるようにクラスやIDを正確に指定する。
視覚的なバランス: 全体的なデザインと統一感が失われないように注意深く調整を行うこと。
セキュリティ上の注意: カスタムCSSファイルを作成した場合、適切なアクセス権限を設定すること。また、公開前にテストを行い、脆弱性を確認する。
パフォーマンス/運用上の注意: 大量のCSSプロパティを使用するとパフォーマンスが低下する可能性があるため、必要な最小限のCSSのみを使用すること。

まとめ

1. 基本的なマージン設定: ジェネラルブロック間のスペースを設定します。

2. 特定ブロックのカスタマイズ: 特定のページやブロックでスタイルを調整します。

3. 外部CSSファイルの読み込み: functions.phpを使用して、カスタムCSSファイルを読み込みます。

4. 視覚的な統一感: カスタマイズしたスペースが全体のデザインと調和していることを確認します。

5. テストとレビュー: 変更内容が意図通りに機能し、パフォーマンスに影響がないことを確認する。

Post Views: 9