2026年7月5日

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

カスタマイズ

はじめに

WordPressでコンテンツを作成する際、Gutenbergブロックエディタは非常に強力なツールです。しかし、デフォルトの設定では特定のビジュアル効果を達成するのが難しい場合があります。例えば、ページや投稿内の特定のセクションにボーダーを追加したいというニーズがよくあります。

この記事では、CSSを使用してGutenbergブロックにボーダーを追加する方法について詳しく説明します。これにより、ユーザーはコンテンツの区切りや視覚的な強調表示を容易に行うことができます。

症状・背景

このテーマが必要になる主な場面:

ページ内でのセクション間の区別
投稿内の特定の情報の強調表示
ウェブサイトのデザインの一貫性を保つため
読者の視覚的なナビゲーションを改善するため

手順・設定方法

ステップ1: CSSを使用して基本のボーダーを適用する

# WordPressテーマの子テーマディレクトリまたはカスタマイズ可能なCSSファイルを開きます。
nano wp-content/themes/twentytwentytwo-child/style.css

# 新しいセレクタとルールを追加します。この例では、すべての「段落」ブロックに1pxの実線ボーダーを適用しています。
.add-border .block-editor-block-list__layout .wp-block-p-paragraph {
	border: 1px solid #ccc;
	padding: 10px;
	margin-bottom: 20px;
}

# ファイルを保存して閉じます。変更が反映されるまで、WordPressサイトを更新またはリロードします。

ステップ2: 特定のブロックタイプにボーダーを適用する

# WordPressテーマの子テーマディレクトリまたはカスタマイズ可能なCSSファイルを開きます。
nano wp-content/themes/twentytwentytwo-child/style.css

# 新しいセレクタとルールを追加します。この例では、「列」ブロックにボーダーを適用しています。
.add-border .block-editor-block-list__layout .wp-block-columns {
	border: 2px dashed #999;
	padding: 15px;
	margin-bottom: 30px;
}

# ファイルを保存して閉じます。変更が反映されるまで、WordPressサイトを更新またはリロードします。

ステップ3: CSSの応用と組み合わせ

# WordPressテーマの子テーマディレクトリまたはカスタマイズ可能なCSSファイルを開きます。
nano wp-content/themes/twentytwentytwo-child/style.css

# 新しいセレクタとルールを追加します。この例では、「列」ブロック内にある「テキスト」ブロックにボーダーを適用しています。
.add-border .block-editor-block-list__layout .wp-block-columns > .wp-block-text {
	border: 1px solid #ccc;
	padding: 5px;
	margin-bottom: 0;
}

# ファイルを保存して閉じます。変更が反映されるまで、WordPressサイトを更新またはリロードします。

ステップ4: 実践的なトラブルシュートと監視

# CSSの変更が意図した通りに適用されているか確認するために、ブラウザのデベロッパーツールを使用します。
# 以下はChromeの場合の手順です。

# F12 キーを押してデベロッパーツールを開きます。
# ページ上で問題があるブロックをクリックし、「Elements」タブで該当するCSSセレクタを確認します。

# CSSの変更が意図した通りに適用されていない場合、以下の手順を行います。
# エラーメッセージやスタイルシートのパスを確認し、問題箇所を探します。

注意事項

CSSのオーバーライド: 外部のプラグインやテーマがカスタムCSSを上書きする可能性があります。その場合は、子テーマを使用することをお勧めします。
ブラウザキャッシュ: ファイルの変更が反映されない場合、ブラウザキャッシュまたはサーバーキャッシュをクリアしてみてください。
セキュリティ上の注意: カスタムCSSは脆弱性を引き起こす可能性があります。信頼できるソースからのみコードを使用してください。
パフォーマンス/運用上の注意: 大量のカスタムCSSを追加すると、ページの読み込み速度が遅くなる場合があります。最小限に抑えることをおすすめします。

まとめ

1. 基本的なボーダー適用: 全体的なスタイルにボーダーを追加する方法

2. 特定ブロックへの適用: 特定のブロックタイプだけにボーダーを適用する方法

3. 応用と組み合わせ: 複数のセレクタを使用して複雑なスタイルを作成する方法

4. トラブルシュート: CSSが意図した通りに適用されない場合のチェックポイント

5. 保守管理: 定期的にCSSコードを確認し、不要な部分を削除することでパフォーマンスを維持します。

Post Views: 13