【備忘録】WordPressの管理画面にある投稿一覧で項目の幅を調整する方法

公開日: 更新日: Wordpress
CMSのアイキャッチ画像




WordPressでいろいろな機能を使っているとだんだん見にくくなってくるのが管理画面の「固定ページ一覧」や「投稿一覧」といった一覧。列が追加されるたびにどんどんタイトルが狭くなって、隙間がいっぱいあるのになぜかタイトルだけが何行にも表示されるなんてことありませんか??

もちろん表示させる列を管理画面上の「表示オプション」を開いて限定すればそれなりにはなるものの、やっぱり無駄な隙間が多いままですよね?その分をタイトルの幅にできたら見やすくなるのに・・・。

これを完全に制御できる方法はないの??と調べていたら紹介されているページを発見しました。そのページは

です。やっぱり調べれば何でも載ってるインターネット、最高ですね!!

今回はここで紹介されているコードを基本にして、実際に私が設定したときのことを紹介したいと思います。

WordPressの管理画面にある投稿一覧で項目の幅を調整する方法

まずはコードが失われてしまうといけないのでコピーさせていただき、以下に表示します

function colwidth_css(){
	?><style>
	th#author,
	th#tags,
	th#categories{
		width:100px;
	}
	th#date{
		width:110px;
	}
	th#post_thumb{
		width:60px;
	}
	td.column-post_thumb img{
		max-height:32px!important;
	}
	</style><?php
}
add_action('admin_head','colwidth_css');
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

こんな簡単なコードで・・・とびっくりする位ですが本当に調整できるんです。

使い方は参考ページにある通り、このコードをテーマのfunctions.phpへ追記するだけです。

コードを少し解説すると

function colwidth_css(){
	?><style>
ここに幅の設定をしていく
	</style><?php
}
add_action('admin_head','colwidth_css');
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

というのが管理画面の一覧の幅をここで設定したものにしなさいっていうコードで、その中に幅を設定したいものの要素を追加していくんですね。

まず前提となるのが、Wordpressの一覧の設定がいろいろな項目を表示した余りの部分がタイトルに割り当てられるようになっているということ。絶対に表示されるものの何かの幅が自動で変わるようにしておかないと全体の幅が崩れてしまいますからね。タイトルのないものは一覧には絶対表示されませんからそういう設定になっているのでしょう(勝手な憶測ですけど)。

したがって、タイトルの幅をここで調整するのは避けた方がいいと思います。

それでは上の基本となるコードの「ここに幅の設定をしていく」というコードを追加していきましょう。

基本となるコードは

	th#幅の名前{
		width:110px;
	}
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

です。幅の名前の部分の代表的なものは

  1. author/作成者
  2. tags/タグ
  3. categories/カテゴリー
  4. date/日付
  5. post_thumb/アイキャッチ画像
  6. comments/コメント

ですからそれぞれに対して幅の設定をしていきます。

一番上のサンプルコードでは

	th#author,
	th#tags,
	th#categories{
		width:100px;
	}
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

と複数行になっているところがありますが、これはCSSの基本で、上のコードだとauthor/tags/categoriesの3つの要素をすべて110ピクセルにしなさいという意味なんですね(最後のcategoriesの後ろにだけ「,」がないのはこれで複数指定の終了ですよという意味です)。

そして最後の行にある

	td.column-post_thumb img{
		max-height:32px!important;
	}
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

で、アイキャッチ画像が縦向きなどで高さが大きい場合にはこの高さを最大値にしなさいという意味の設定です。こうしておくことで縦にも無駄な余白ができないようにしてあるんですね。

他の列がある場合にはデベロッパーツールで列名(id=〇〇の〇〇の部分)を指定して調整すればOKです。

興味のある方はぜひやってみてくださいね!

最後に「結局タイトルの幅がおかしいじゃん・・」と思った方、前述したように全体の幅の中で余ったものがタイトルの幅になるわけですから、一覧に表示している要素すべてを調整しないとタイトルが狭く、どこかに大きな余白ができることになるので気を付けてくださいね。

※phpタグの書き方にちょっと疑問が残りますけど(同じこと思った方もいるかと思います)これで動作したのでまあいいか・・・って感じです。

WordPressって面白い!!そしてこの情報を公開してくれてる参考サイトの作者に感謝!!です。

また管理画面用のCSSを作ってそこに追記して適用させる方法もありますので

を参考にどちらかの方法で一覧をすっきりさせましょう!!

Wordpressの本

Amazonの人気商品楽天市場の人気商品
CS Shop
たった1日で基本が身に付く! WordPress 超入門【電子書籍】[ 佐々木恵 ]

たった1日で基本が身に付く! WordPress 超入門【電子書籍】[ 佐々木恵 ]

1,944 円 (税込) 送料込
<p>WordPressによるWebサイト作成の基本を一から学べる書籍です。1日8時間の勤務時間内に読むことができる程度に解説内容を絞り込み,初心者・新人が最初の1冊目として読むのにふさわしい内容となっています。本書ではローカル環境にWordPressをインストールしてWebサイト..
サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル【電子書籍】[ 宮内 隆行 ]

サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル【電子書籍】[ 宮内 隆行 ]

3,456 円 (税込) 送料込
<p>プラグインの開発から運用までを網羅</p> <p>※この電子書籍は固定レイアウト型で配信されております。固定レイアウト型は文字だけを拡大することや、文字列のハイライト、検索、辞書の参照、引用などの機能が使用できません。</p> <p>CMSのデファクト・スタン..
楽天ウェブサービスセンター CS Shop

いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】