【WordPress】編集画面が壊れちゃった!?
ACFメタボックス固定術

2026.06.18

WordPressの投稿画面で、ACF（Advanced Custom Fields）を使ってカスタムフィールドを設置している際、クライアントから「入力欄が見つからない」「編集画面がぐちゃぐちゃになってしまった」と相談を受けたことはありませんか？

多くの場合、原因は「メタボックス（入力欄の外枠）」をうっかり閉じてしまったり、ドラッグして移動させてしまったりすることにあります。

ACFの入力画面で意図しない操作を防ぎ、運用ストレスをゼロにするための2つの方法をご紹介します。

なぜメタボックスの操作制限が必要なのか

WordPressの標準機能では、メタボックスの右端にある矢印をクリックすると、中身を折りたたむ（アコーディオン）ことができます。しかし、慣れていないユーザーにとっては、一度閉じると「入力項目が消えた！」とパニックになりがちです。
これを未然に防ぐことで、運用のサポート工数を減らし、ユーザーフレンドリーな編集画面を実現できます。

メタボックスが閉じている投稿画面
メタボックスを閉じてしまい、投稿の仕方がわからない編集画面

方法1：フィールドグループの設定を「シームレス」にする

ACF（Advanced Custom Fields）の設定を変更し、WordPressの標準的な枠線自体をなくしてしまいます。
クラシックエディターを利用する中で、WordPressへの負荷も少なく、最も手軽な方法です。

こちらの方法はクラシックエディターのみに対応しております
グーテンベルクの方は「方法2：CSSで「開閉ボタン」だけを非表示にするグーテンベルクの場合」を参照してください

設定手順

WordPress管理画面の「ACF（フィールドグループ）」から、該当のグループの編集画面を開きます。
画面下部にある「設定」タブ（または「位置」の下の設定項目）を確認します。
「スタイル」という設定項目を「シームレス（メタボックスなし）」に変更して保存します。

メリット：枠線とヘッダー（タイトル部分）が消えるため、そもそも「閉じる」という概念がなくなります。
デメリット: フィールドグループのタイトルも画面上から消えてしまいます。背景の白枠がなくなり、編集画面の見た目が変わります。

シームレス（メタボックスなし）の編集画面

方法2：CSSで「開閉ボタン」だけを非表示にする

「見た目は今のままがいいけれど、クリックして閉じないようにしたい」という場合は、管理画面に少しだけCSSを追加して、ボタンを物理的に消すのが有効です。

お使いのテーマのfunctions.phpにメタボックス右側のボタンを非表示、クリック判定の無効化を追記します。

クラシックエディターの場合


add_action('admin_head', function() {
    echo '';
});

グーテンベルクの場合


/**
 * GutenbergエディタのACFメタボックス右側の操作ボタンを非表示にする
 */
function my_custom_hide_acf_metabox_buttons() {
    echo '<style>
        /* ACFのメタボックスのみを対象に指定 */
        div[id^="acf-group_"].postbox .postbox-header .handle-order-higher,
        div[id^="acf-group_"].postbox .postbox-header .handle-order-lower {
            display: none !important; /* ▲▼ボタンを非表示 */
        }

        div[id^="acf-group_"].postbox .postbox-header .components-dropdown-menu,
        div[id^="acf-group_"].postbox .postbox-header button[aria-label*="オプション"],
        div[id^="acf-group_"].postbox .postbox-header button[aria-label*="options"] {
            display: none !important; /* 三点リーダーメニューを非表示 */
        }
    </style>';
}
add_action('admin_head', 'my_custom_hide_acf_metabox_buttons');

右側の矢印などの操作ボタンが消え、タイトル行をクリックしても何も起きなくなります。
pointer-events: none; により、ドラッグによる並び替えも制限できるため、レイアウトを固定したい場合にも有効です。

functions.phpの設定により、メタボックスの操作ボタンが消えた編集画面

まとめ

今回は、ユーザーが編集画面を快適に利用するために、メタボックスを無くす手法とメタボックス右側のボタンを非表示・無効化する手法を紹介してまいりました。

WordPressの編集画面は自由度が高い反面、慣れていないユーザーにとっては「どこを触ればいいか」「なぜ消えてしまったのか」といった不安の種になりやすい場所でもあります。
今回ご紹介した方法は、単なるカスタマイズではなく、「ユーザーを迷わせないための親切な設計」としてとり入れてみてはいかがでしょうか。

よくある質問

CSSでの非表示設定は、すべての投稿タイプに適用されますか？: 方法2の functions.php に記述したコードは、管理画面全体に適用されます。特定の投稿タイプ（例：お知らせのみ）に限定したい場合は、get_post_type() などの条件分岐をコードに追加することで制御可能です。
メタボックスの「ドラッグ＆ドロップによる移動」だけを禁止することはできますか？: はい。方法2のCSS設定に含まれる .postbox-header { pointer-events: none; } によって、ヘッダー部分の掴み操作が無効化されるため、結果としてドラッグ移動もできなくなります。入力順序を固定したい際にも非常に有効な手段です。
この設定はACF以外の入力欄（標準の「カテゴリー」や「公開」パネル）にも影響しますか？: 方法2のCSS（.postboxを指定する方法）を使用した場合、同じ構造を持つ標準のメタボックスにも影響し、開閉や移動ができなくなります。もしACFの特定のフィールドグループだけに限定したい場合は、そのグループ固有のID（例：#acf-group_0x000000000xx）をCSSのセレクタに加えることで、ピンポイントな制御が可能です。