テーマをカスタマイズするにしても、プラグインが多い管理画面をすっきりさせるにしても、あるいはどの画面でもブログ記事がきれいに見えるよう調整するにしても、CSSはプラグインを増やすことなくWordPressサイトを調整する手っ取り早い便利な方法です。
しかし、すべてのWordPress利用者が、テーマのスタイルシートを調べたり、ブロックエディターの癖を解読したりする時間があるわけではありません。そこで、WordPressサイトで使える効率化を助けるCSSの小技をまとめました。
ブロガー、サイト所有者、開発者、フリーランサーなど、WordPressを日々扱う人が直面するイライラを解決する役に立つはずです。
この記事では、以下の方法を説明します。
- アンカーリンクでヘッダーが邪魔をする問題を解決する
- 最新のレイアウトテクニックで長い投稿グリッドの表示を円滑に
- プラグインなしでログイン画面をカスタマイズする
- 肥大化したプラグインのUI要素を隠す
- その他多数
クラシックなテーマ、ブロックベースのテーマ、ビルダーのいずれを使用していても、ワークフローの整理やパフォーマンス向上は欠かせません。
1. メニューバーとアンカーリンクの問題を解決する
ページ内リンクをクリックした際、ジャンプ先の見出しが固定されたナビゲーションバー（スティッキーヘッダー）の裏に隠れてしまったことはありませんか？これは、特に目次を実装するプラグインを使った時に長い投稿でよく見られる、WordPress特有の問題です。
ほとんどのテーマは、position: stickyまたはfixedをナビゲーションバーに使っています。アンカーリンク（#faq や#pricing など）をクリックすると、ブラウザはそのセクションの一番上、ナビゲーションバーの真下まで移動します。
この問題を解決するには、scroll-margin-top CSSプロパティを使用します。これは見出しの上にスペースを追加するもので、ナビゲーションバーが邪魔な位置に表示されるのを防ぐことができます。
h2, h3 {
scroll-margin-top: 80px;
}ベストプラクティスは、ヘッダーの高さに値を合わせることです。ナビゲーションバーの高さが64pxの場合、scroll-margin-top: 64px 、またはそれよりも少し高い値を使用します。アンカーリンクで使用する見出しレベルにも適用してください。通常はh2 またはh3です。
2. <body>クラスで特定のWordPress管理画面を編集する
多くのWordPressプラグインにより、販売促進の通知やバナー、スタイルの整っていない要素が管理画面に出現します。しかし、サイト全体でそれを変更、削除するのが有効でないことがあります。WooCommerceの設定やカスタム投稿タイプエディターのような特定の画面だけを変更したい場合は特にそうです。
WordPressは、管理ページの<body>タグにコンテキストを考慮したクラスを自動的に追加します。そのクラスには、ページスラッグ、投稿タイプ、メニューアイテムの参照が含まれ、必要な場所にのみ適用されるスコープ付きのCSSを記述するのに非常に便利です。
例えば、WooCommerceの設定ページだけ通知を非表示にしたいとします。
body.toplevel_page_woocommerce .notice {
display: none;
}このクラスを見つけるには、WordPressの管理画面を開いて右クリックし、「検証」を選択します（または、Cmd+Option+I /Ctrl+Shift+I ）。そして<body>タグを探してください。いくつかの便利なクラスが見つかるはずです。
例えば、管理画面トップでは以下が確認できます。
<body class="wp-admin wp-core-ui index-php wp-dashboard theme-astra ...">典型的なクラス
post-type-product：WooCommerceプロダクトエディターedit-tags-php：カテゴリー/タグ管理settings_page_yoast：Yoest SEO設定toplevel_page_woocommerce：メインWooCommerce設定ページ
CSSでこれらを使用するには、カスタム管理スタイルシートをエンキューする必要があります。カスタマイザーから追加することはできません。
次をテーマのfunctions.php に追加してください。
function my_custom_admin_styles() {
wp_enqueue_style(
'my-admin-css',
get_stylesheet_directory_uri() . '/admin.css'
);
}
add_action('admin_enqueue_scripts', 'my_custom_admin_styles');次に、テーマフォルダにadmin.css というファイルを作成し、そこにスコープを定義したスタイルを追加します。
3. ページビルダーなしでレスポンシブグリッドを作る
ページビルダーでレイアウト作成が簡単になりますが、これは肥大化の原因にもなります。クラシックテーマ（AstraやGeneratePressなど）を使用している場合、あるいは独自のブロックテンプレートを作成する場合、CSSグリッドでレスポンシブレイアウトを素早く、きれいに作成できます。
これは特に次のような場合に便利です。
- ホームやアーカイブページのブログ記事グリッド
- イベント、チームメンバー、お客様の声などのカスタム投稿タイプのリスト
- テンプレートファイルを上書きしないWooCommerce商品レイアウト
これを実装するには、子テーマのスタイルシートに以下を追加するだけでOKです（またはfunctions.php 経由でエンキューします）。
.post-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}そして、ループをこのようにコンテナで囲みます。
<div class="post-list">
<?php while (have_posts()) : the_post(); ?>
<div class="post-card">
<h2><?php the_title(); ?></h2>
<p><?php the_excerpt(); ?></p>
</div>
<?php endwhile; ?>
</div>このCSSは、自動的に収まるだけのカラムを作成し、各アイテムの幅が少なくとも280pxになるようにします。小さな画面ではカラムが少なくなります。メディアクエリやプラグインは不要です。
4. レスポンシブフォントにclamp()を使用する
複数のスクリーンサイズに対応するデザインは、しばしばメディアクエリを使ってフォントサイズを調整することを意味します。しかしメディアクエリは、特に複数のブレイクポイントを扱う場合や、デバイス間で一貫したスケーリングが必要な場合に、面倒になることがあります。
そこで clamp()の出番です。モダンなCSS関数で、最小サイズ、優先サイズ、最大サイズの間の流動的な値を、すべて1行で定義できます。
基本的なコードは次のとおりです。
font-size: clamp(min, preferred, max);これは、ブラウザがビューポート幅に基づいてフォントサイズを自動的に調整できるようにするもので、メディアクエリを別途使用する必要はありません。
ほとんどのWordPressテーマ（特にブロックテーマ）は流動的デザインを取り入れています。しかし、Gutenbergのブロックエディターでは、特に以下のような場合、フォントの拡大縮小を完全に管理できるとは限りません。
- ヒーローセクションの見出し
- 注目記事のタイトル
- 全幅ページレイアウト
メディアクエリで複数のフォントサイズをハードコーディングする代わりに、clamp() を使うことで、デフォルトでよりすっきりとしたコード、無駄のない繰り返し、優れた応答性を確保できます。theme.json またはeditor-style.css を使って、カスタムブロックスタイル内の見出し、ボタン、ブロッククォートなどに使用できます。
h1 {
font-size: clamp(1.8rem, 4vw + 1rem, 3rem);
}clamp() はすべてのモダンブラウザでサポートされています。極端に時代遅れの企業向けブラウザ（WordPress自体がサポートしなくなったInternet Explorer 11など）をターゲットにしていない限り問題なく使用できます。
5. content-visibilityで長いページの読み込みを改善する
トップページでブログ記事一覧を表示したり、ショップページで何十もの商品を読み込んだり、カスタムクエリを使ってお客様の声を表示したりしている場合、特にモバイルでパフォーマンスの問題に直面したことがあるのではないでしょうか。長いリストをスクロールするときに感じる遅延は、ブラウザにかかる負荷の大きさが原因です。
そこで content-visibilityCSSプロパティが使えます。これはブラウザに「スクロールして表示されるまで、この要素をレンダリングしない」ように指示するものです。
.article-card {
content-visibility: auto;
contain-intrinsic-size: 400px;
}これはHTML要素の遅延読み込み（レイジーロード）のようなもので、画面外のコンテンツのレイアウトや描画コストを削減します。また contain-intrinsic-sizeはブラウザに推定の高さを与えてスペースを確保するため、コンテンツが読み込まれたときにレイアウトがずれることはありません。
テーマを編集する際に、.article-card または.product-cardのようなクラスを各ループアイテムに追加し、CSSを子テーマのスタイルシートに組み込むか、functions.php経由でエンキューできます。
Gutenbergを使用している場合は、ブロックにカスタムクラスを追加し（「詳細設定」で）、「追加CSS」セクションまたはテーマファイルでそれを対象にすることができます。
6. プラグインのスタイル上書きに!importantを適用する
WordPressサイトのスタイル設定がうまくいかない問題は決して珍しいことではありません。ルールを書いて、セレクタをチェックして、更新しても、プラグインに最初から組み込まれているスタイルが勝ってしまいます。
これは、多くのWordPressプラグインが、プラグインのスタイルを上書きしてしまうことで起こる問題です。以下のような特徴が顕著です。
- 高い特異性（長いクラスチェーン）
- インライン
style属性 - あなたのスタイルシートの後に読み込まれるスタイルシート
複雑なセレクタを探すよりも、!important を使うことができます。
例えば、Contact Form 7は.wpcf7-form-control のような特定のクラスを使っていますが、デフォルトのスタイルを!importantなしで上書きするのは困難です。
フォームの入力欄を丸く調整する方法は以下の通りです。
input.wpcf7-form-control {
border-radius: 6px !important;
}ただし、明確な意図を持って使うことが重要です。!important をあちこちにばらまくのではなく、専用の管理者用スタイルシートかプラグイン修正用スタイルシートに分離しましょう。こうすることで、メインテーマのCSSをきれいに保ち、後で偶発的な衝突を避けることができます。
クライアントサイトの開発を請け負っている場合、このアプローチは、テンプレートをフォークしたり、さらに別のプラグインを追加したりすることなく、「主張の強いプラグイン」のスタイルを調整するのに便利です。
7. where()でブロックスタイルを上書きする
Gutenbergブロックのデフォルトスタイルをいじろうとしたことがある人なら、その苦労をご存知でしょう。WordPressのコアやブロックベースのテーマには、非常に特殊なセレクタが同梱されていることが多いものです。ボタンの余白を調整したり、ブロックの間隔を削除したりといった些細な変更でさえ、複雑な上書きか、多くの試行錯誤が必要です。
これを解決するには :where()擬似クラスを使うことでこれを解決できます。擬似クラスは、CSSセレクタのラッパーで、その中に何を入れても、常に特異性がゼロになります。
:where(.wp-block-button) {
margin-bottom: 0;
}これは、.wp-block-button にスタイルを適用しますが、通常のセレクタとは異なり、他のCSSルールと「競合」しないため、安全で柔軟です。
例えば、ブロックテーマ（Twenty Twenty-FourやAstraのブロックスターターなど）を使ったサイトを制作しているとしましょう。ボタンの下の余分な余白を取り除きたいと仮定します。
.wp-block-button {
margin-bottom: 0;
}しかし、WordPressのコアやテーマには、もっと特殊なルールがあることでうまくいかないかもしれません。
.entry-content .wp-block-button:not(.is-style-outline) {
margin-bottom: 1.5rem;
}もっと具体性を持たせたり（保守が困難になりがち）、!important （ご存知の通り力づくの術）を使ったり、もしくは:where() でより全体とマッチしたCSS管理を実現できます。
8. プラグインなしでWordPressログイン画面を変更する
ログイン画面にロゴを追加したい。背景色を変えたい、フォントやボタンのスタイルを変更したい。そんな調整にプラグインは必要ありません。WordPressでは、CSSでログイン画面を簡単にカスタマイズできます。必要なのは1つのアクションフックだけです。
login_enqueue_scripts フックを使ってカスタムスタイルシートをエンキューするだけでOKです。以下のように行います。
function custom_login_styles() {
wp_enqueue_style(
'my-login-styles',
get_stylesheet_directory_uri() . '/login.css'
);
}
add_action('login_enqueue_scripts', 'custom_login_styles');そして、login.css ファイルに次のようにスタイルを追加します。
body.login {
background-color: #f9f9f9;
}
.login h1 a {
background-image: url('/wp-content/uploads/your-logo.png');
background-size: contain;
width: 100%;
height: 80px;
}
.login #loginform {
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}こうすることで外観を変えながら、余計なプラグインを増やさずに済みます。
9. 画像の予期せぬはみ出しを防ぐ
コンテナに対して幅が広すぎる画像を追加すると、WordPressのレイアウトが崩れることがあります。特にクラシックなテーマやページ/投稿コンテンツで顕著です。画像をCSSで制御しないと、親要素からはみ出し、横スクロールやセクションのずれを引き起こす可能性があります。
これは通常、次のような場合に起こります。
- コンテンツ編集者が配置やサイズを設定せずに画像を貼り付けた
- テーマにデフォルトのレスポンシブ画像処理がない
- カスタムブロックやレガシーショートコードの中に画像を追加している
これを解決するには、最大幅を設定し、レイアウトの動作をリセットする必要があります。
img {
max-width: 100%;
height: auto;
display: block;
}これが何をするかは次のとおりです：
max-width: 100%：イメージがコンテナからはみ出さないようにするheight: auto：元のアスペクト比を維持display: block：インラインレイアウトのデフォルトによって生じる、画像の下の予期せぬギャップを取り除く
同じパターンを動画の制約にも適用できます。
iframe {
max-width: 100%;
height: auto;
display: block;
}あるいは、お使いのテーマがモダンCSSをサポートしている場合は、aspect-ratio ラッパーを使用することもできます。
まとめ
CSSは、それ単体では目立たないかもしれませんが、WordPressサイトの管理となると、これを賢く使うことで、何時間もの作業にかかる手間を一気に取り除くことができます。
レイアウトのカスタマイズ、管理画面ダッシュボードの整理、フロントエンドのパフォーマンス向上など、あらゆる作業をスマートに変えられます。
しかし、どんなに最適化されたCSSでも、それには制限があります。フロントエンドを改善し、読み込みの速いページ、安定したレイアウト、スムーズなインタラクティブ性を実現するには、パフォーマンスを念頭に構築されたサーバーが必要です。
Kinstaのインフラストラクチャでは、組み込みの画像最適化、エッジキャッシュ、CDNサポート、WordPressを意識したサーバーレベルのパフォーマンス改善施策などを徹底しています。
CSSで見た目や操作性をコントロールする一方で、サイト訪問者に最高レベルのユーザーエクスペリエンスを提供することもお忘れなく。
