②【中級編】WordPress管理画面の列幅をカスタマイズ！タイトルの「潰れ」をCSSで強制解決する方法

1. はじめに：設定だけでは限界がある理由

前回の記事では「表示オプション」で項目を減らす方法をご紹介しました。しかし、運営スタイルによっては「カテゴリーも、タグも、SEOスコアも、PV数も、全部一覧でパッと見たい！」という場合もあるはずです。

しかし、表示項目を増やすと、ブラウザは自動的に各列の幅を縮めてしまいます。特にCocoonなどの多機能テーマでは、特定のクラス（.widefat tdなど）に幅の制限がかかっていることがあり、いくら画面を広げてもタイトル列が細いまま……という現象が起こります。

そんな時は、管理画面専用のCSSを適用して、タイトルの幅を「強制固定」してしまいましょう。

2. なぜ「追加CSS」ではなく「functions.php」なのか？

通常、サイトのデザインを変える時は「外観 ＞ カスタマイズ ＞ 追加CSS」を使いますが、あそこに書いたコードは「管理画面」には反映されません。

管理画面の見た目を制御するには、functions.phpというファイルを使って、「管理画面のヘッダー部分にスタイルシートを読み込ませる」という命令を出す必要があります。

3. コピペでOK！タイトルの幅を確保するコード

以下のコードを、お使いのテーマ（できれば子テーマ）の functions.php の一番最後に貼り付けてください。チェックボックスの列も広がってしまうので、チェックボックス列は最小限に固定するコードも入れておきます。

PHP

// 管理画面の投稿一覧でタイトルの幅を確保する
function custom_admin_column_width() {
    echo '<style>
        /* 管理画面の投稿一覧テーブルの幅を調整 */
        .wp-list-table th, 
        .wp-list-table td {
            width: auto !important; /* 一旦、自動計算に戻す */
        }

        /* タイトル列（column-title）を優先的に広げる */
        .fixed .column-title {
            width: 50% !important; /* ここをお好みの % や px に調整してください */
        }

        /* チェックボックス列は最小限に固定 */
        .wp-list-table td.check-column {
            width: 30px !important;
            min-width: 30px !important;
            max-width: 30px !important;
            padding-left: 6px;
            padding-right: 6px;
        }

        /* チェックボックス中央寄せ */
        .wp-list-table td.check-column input[type="checkbox"] {
            margin: 0 auto;
            display: block;
        }
    </style>';
}
add_action('admin_head', 'custom_admin_column_width');

4. コードのポイント解説

• admin_head フック: これを使うことで、管理画面が表示される瞬間にCSSを注入します。
• .column-title: これが「タイトル」列の固有クラス名です。ここをピンポイントで狙い撃ちします。
• !important: 管理画面の元々のルールよりも自分の命令を優先させるための「合言葉」です。
• min-width: これを設定することで、どんなに項目が増えてもタイトルが一定の幅（例：350px）以下に縮むのを防ぎます。

5. 注意：作業前には必ずバックアップを！

functions.php は、たった1文字のミス（カッコの閉じ忘れなど）で管理画面が真っ白になってしまう非常にデリケートな場所です。

• 作業前に必ずファイルをバックアップする
• FTPソフトやサーバーのファイルマネージャーなど、万が一の時にファイルを直接書き換えられる手段を確保しておく

これらを守って、安全にカスタマイズを行いましょう。

6. まとめ

「表示オプション」で項目を絞っても解決しない場合は、このCSSによる強制上書きが最も確実な方法です。

「情報の網羅性」と「読みやすさ」を両立させて、ストレスのない編集環境を手に入れましょう！