WordPressの管理画面で記事本文のH1・H2見出しを非表示にする方法

公開日
最終更新日
WordPressのブロックエディターでH1やH2タグを使えないようにする方法

WordPressサイトを納品し、クライアントにブログ更新を任せるとき、「記事本文でH1やH2タグを使ってほしくない」というケースがあります。ページのヘッダーやタイトルですでにH1・H2を使っているのに、本文でも見出しレベルを自由に選べると、ページ全体の見出し構造が崩れてしまうためです。

結論から言うと、管理画面にだけCSSを読み込ませ、ブロックエディターの見出しドロップダウンからH1・H2を隠すことで、本文でH1・H2を選べないようにできます。この記事では、その2ステップの手順を解説します。

[1]見出しを隠すCSSファイルを作成する

まず、新しくCSSファイルを作成し、ブロックエディターの見出しメニューでH1とH2を非表示にするCSSを書きます。

[aria-label="Heading 1"], [aria-label="Heading 2"] {
    display: none;
}
[aria-label="見出し1"], [aria-label="見出し2"] {
    display: none;
}

見出しレベルの選択ボタンはaria-labelで識別されているため、それを対象に非表示にしています。英語表記・日本語表記の両方を指定しているのは、管理画面の言語設定がどちらでも効くようにするためです。作成したファイルは、テーマのassets/css/フォルダなど分かりやすい場所に保存しておきます(例:admin-style.css)。

[2]管理画面のときだけCSSを読み込む

次に、作成したCSSを管理画面(編集画面)でだけ読み込むようにします。functions.phpに、次のコードを追記します。

function admin_custom_enqueue($hook_suffix)
{
    wp_enqueue_style('admin_style_css', get_template_directory_uri() . '/assets/css/admin-style.css');
}
add_action('admin_enqueue_scripts', 'admin_custom_enqueue');

admin_enqueue_scriptsというアクションフックを使うと、WordPressの管理画面でだけ、任意のCSSやJSファイルを読み込めます。フロント側(実際のサイト表示)には影響しないため、安全に管理画面の見た目だけを調整できます。

あわせてJSファイルも読み込みたい場合は、次のようにwp_enqueue_scriptを追加します。

function admin_custom_enqueue($hook_suffix)
{
    wp_enqueue_script('admin_style_js', get_template_directory_uri() . '/assets/js/admin-style.js');
    wp_enqueue_style('admin_style_css', get_template_directory_uri() . '/assets/css/admin-style.css');
}
add_action('admin_enqueue_scripts', 'admin_custom_enqueue');

確認

ブロックエディターで見出しブロックを選び、レベルのドロップダウンがH3〜H6だけになっていれば成功です。これで、本文でH1・H2が多用されるのを防げます。

補足:この方法の位置づけ

この方法は、あくまで編集画面の選択肢を隠して「使いにくくする」ものです。見出し構造を運用ルールとして守ってもらうための補助と考えると、実務にフィットします。近年のWordPressでは、ブロックの設定側で見出しレベルを制限する方法も出てきていますが、今回のCSSで隠すやり方は、テーマを問わず手軽に導入できるのが利点です。

「H1タグは複数使ってもよい」とGoogleが述べているのは事実ですが、ページ全体のマークアップを見て見出しの階層を整えることは、読みやすさやアクセシビリティの面でも意味があります。クライアントに更新を任せるサイトほど、こうした仕組みで構造を保てると安心です。

1点だけ注意点があります。この方法はブロックエディターのaria-labelに依存しているため、WordPressのバージョンアップで表記が変わると効かなくなる可能性があります。アップデート後は、見出しメニューが意図どおり制限されているかを一度確認しておくと安心です。

まとめ

  • 見出しの選択ボタンをaria-labelで指定し、CSSでH1・H2を非表示にする
  • admin_enqueue_scriptsで、そのCSSを管理画面だけに読み込む
  • ドロップダウンがH3〜H6になれば成功。フロント側には影響しない

納品後の運用まで見据えると、見出し構造を保つ仕組みは地味ながら効果的です。admin_enqueue_scriptsは管理画面のカスタマイズ全般に使えるフックなので、覚えておくと応用が利きます。

IPPEI FUKUTA(株式会社バッズブルー 代表)

IPPEI FUKUTA(株式会社バッズブルー 代表)

WordPress専門のWeb制作者として15年・150サイト以上を担当。現場でつまずいた問題と解決策を、同じ制作者・フリーランスの方に向けて発信しています。無料のWeb便利ツール集「バドツール」を開発・運営中。