この記事にはプロモーションが含まれています。

WordPress管理画面の投稿一覧でカテゴリーやタグなど任意の列幅を調整する

2024-05-29

ケケンタ

管理画面の投稿一覧で表示項目増やしたら列幅が狭くなっちゃった……

ケケンタ

カテゴリーとかタグの列幅が広いから、もう少し狭くしたいな……

今回はこのようなお悩みをお持ちの方に向けて

WordPress管理画面の投稿一覧で
カテゴリーやタグなど任意の列の幅を調整する方法

をご紹介します。

ケケンタ

誰でも簡単にできるのでぜひご活用ください！

＼Web制作を仕事にしたいなら／

こちらの記事で

Web制作コース独学プラン

についてご紹介しています。

Web制作を10万円以下で学べるオンライン型プログラミングスクール｜忍者CODE

まずは無料相談してみる >>

￣￣￣

「仕事が忙しい」、「すぐに欲しい商品がある」という方、必見のサービス

　Amazon Prime　

by Amazon

日時指定便が「無料」で使えるので不在で商品を受け取れないという心配が無くなる

最短で注文した「翌日」に商品が届くので欲しいものがすぐ手に入る　
※ご注文の時間帯やお住まいの地域によります。

Amazonプライムの無料体験は「何度でも」利用可能

Amazonプライムの無料体験を何度も利用する方法

Amazonのカート画面で表示される「Amazon Primeの無料体験の案内」をクリック
会員の自動更新を解除しておく＝期限が来たら自動解約
１～３ヶ月ぐらいするとAmazonのカート画面で再度無料体験の案内が表示される

商品をカートに入れ、カート画面に行ったときに「無料体験の案内」が表示されていれば
1ヶ月間の無料体験を受け取ることが可能です。

ケケンタ

僕自身、過去に少なくとも３回は無料体験を利用しています。

※条件は不明ですが、解約後に一定期間が経過すると、再び「Amazon Prime無料体験の案内」が表示され、再度利用することが可能です。

Amazonで買い物をする　>>

【結論】functions.phpに列幅調整用のCSSを記述する

早速結論ですが、以下のソースコードをfunctions.phpに追加することで調整することが可能です。

以下は「カテゴリー」や「タグ」の列幅を調整する例です。

function my_admin_style() {
	echo '
	<style>
		th#tags, 
		th#categories {
    		width: 10%;
		}
	</style>'
	.PHP_EOL;
  }
  add_action('admin_print_styles', 'my_admin_style');

ハイライトされている行で列幅を指定しています。

僕が使用しているSWELLというテーマでは初期状態だと列幅が15％に指定されていたため、上記のコードは元々の列幅よりも5％狭くする指定という意味になります。

任意の列幅を調整する方法

「カテゴリー」や「タグ」以外の列の幅を調整したい場合は、CSSセレクターのID（#tagsや#categories）の部分をその列のものに変更するだけでOKです。

ケケンタ

以下は各列のIDを確認し、実際にソースコードに当てはめるまでの手順です。

STEP

Ctrl + Shift + Cを押して、任意の列名の部分をクリックする

管理画面の投稿一覧ページでCtrl + Shift + Cを押すと以下の画像のようにカーソルを当てた部分の表示が変化します。

その状態でクリックすると、STEP２のような画面が出てきます。

STEP

表示された画面内から「id=”○○”」の部分を読み取る

以下のような表示が現れたら、「id=”○○”」の部分を読み取ります。

例えばタグ列なら「tags」、カテゴリー列なら「categories」というidが表示されています。

STEP

読み取ったidを先ほどのソースコードに当てはめる

STEP２でidの確認ができたら、続いて先ほどのソースコードにそれを当てはめます。

例えばアイキャッチ列の幅を調整したいとしたら以下のようなソースコードになります。

アイキャッチ列の幅を調整する場合のソースコード

function my_admin_style() {
	echo '
	<style>
		th#thumbnail {
    		width: 10%;
		}
	</style>'
	.PHP_EOL;
  }
  add_action('admin_print_styles', 'my_admin_style');