WordPressのメディアライブラリ（リスト表示）で、右端が画面外にはみ出たり、左側のスペースが広すぎてガタガタに見えたりする場合、表示オプションの項目が多すぎることによる横幅の限界、またはプラグイン・テーマによるCSSの競合が主な原因。
以下の手順を上から順番に試すことで、きれいにバランスよく収めることができるようになる。
【最も簡単】不要な「表示項目」をオフにする
プラグインを導入すると、メディアライブラリのリストに自動で新しい列（カラム）が追加されるようになる。これにより1行の要素が増えすぎて横に潰れたり、はみ出したりすることになる。
以下では、投稿者、コメント、日付、ファイルサイズの表示をオフにしている。
それを少しでも解消するには「表示オプション」というタブをクリックして必要がない「項目」を削除すると簡単に整理することができる。最後に「適用」ボタンをクリック。
CSSでレイアウトを強制調整する
「どうしてもすべての項目を表示させておきたい」「特定の列が広すぎるのを固定したい」という場合は、WordPressの管理画面だけに反映されるCSSを追加して強制的に見栄えを整える方法がある。
テーマの functions.phpの末尾に、以下のコードを貼り付けて保存。
以下は実際に入れている。うまくレイアウトができていると思う。
function custom_media_list_table_css() {
// メディアライブラリの一覧画面（upload.php）でのみCSSを適用
$screen = get_current_screen();
if ( isset( $screen->id ) && $screen->id === 'upload' ) {
echo '<style>
/* 1. ファイル列の幅を固定・調整する例 */
.wp-list-table .column-title {
width: 25% !important; /* 好みの幅に調整してください */
word-break: break-all; /* 長い英単語で崩れるのを防ぐ */
}
/* 2. 作者列の幅を調整する例 */
.wp-list-table .column-author {
width: 10% !important;
}
/* 3. 日付列の幅を調整する例 */
.wp-list-table .column-date {
width: 12% !important;
}
/* 4. タイトルが長すぎて2行目以降を三点リーダー(...)で省略したい場合 */
/*
.wp-list-table .column-title .row-title {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
*/
</style>';
}
}
add_action( 'admin_head', 'custom_media_list_table_css' );これはAIに聞いたもので、実際に試していないのであくまでも参考に。
function custom_admin_media_list_css() {
echo '<style>
/* メディアライブラリのリストテーブルが外にはみ出るのを防ぐ */
.wp-list-table.attachments {
table-layout: fixed !important;
width: 100% !important;
}
/* 各列の幅のバランスを最適化 (必要に応じて％を微調整してください) */
.wp-list-table .column-title { width: 25% !important; } /* タイトル */
.wp-list-table .column-author { width: 10% !important; } /* 作成者 */
.wp-list-table .column-parent { width: 15% !important; } /* 添付先 */
.wp-list-table .column-date { width: 15% !important; } /* 日付 */
/* タイトルなどの長い文字列やURLが枠を突き抜けないようにする */
.wp-list-table td, .wp-list-table th {
word-break: break-all !important;
overflow-wrap: break-word !important;
}
</style>';
}
add_action('admin_head', 'custom_admin_media_list_css');※ table-layout: fixed; を指定することで、文字量に関わらず指定した幅（%）で各カラムが均等または固定配置されるようになり、前の方だけ無駄に広くなる現象を解消できるようになる。