【WordPress】CSSで簡単！投稿一覧の無駄な空白のためにタイトルが何行にもなるのを改善する方法
公開日： 使い方など
【この記事の目次】－ 必要な部分だけ見たいときにどうぞ － [表示する]
以前テーマのfunctions.phpに追記して解決する方法を紹介しました
これはこれで簡単なのですが、その後管理画面のいろいろな部分をカスタマイズしたくなった時にも使えるように、今回はもっと簡単にできる方法を紹介したいと思います。
CSSと言えば、テーマカスタマイザーの末尾にも枠がありますし、子テーマにも追加CSSが記述できるようになっています。が、WordpressのテーマのCSSは管理画面側のデザインには効きません。これは適用されるファイルが全く別物だからで、実際はここで躓く人も多いでしょう。
今回はそれも踏まえ、管理画面のデザインを変更できる環境の作り方と投稿一覧の列幅の調整方法を紹介したいと思います
管理画面用にCSSファイルを作り、テーマに読み込ませる方法
まずは管理画面側で適用されるCSSファイルと環境を作ります。手順は以下の２つです
管理画面側用のCSSファイルを作る
メモ帳でもなんでもいいので空のテキストファイルを作り、名前を「admin-styles」拡張子を「.css」に変更します。そしてできたファイルを現在有効化しているテーマ（または子テーマ）内に転送します。
管理画面用のCSSファイルを読み込ませる（適用させる）ようにする
以下のコードを有効化しているテーマ（子テーマ）のfunctions.phpへ追記します
//管理画面のCSS(admin-styles.css)を読み込む
function load_custom_wp_admin_style() {
wp_register_style( 'custom_wp_admin_css', get_stylesheet_directory_uri() . '/admin-style.css', false, '1.0.0' );
wp_enqueue_style( 'custom_wp_admin_css' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );【注意】コードをコピーして使用する前に必ずお読みください
この記事内にコードが記載されている場合、コードはそのままコピー（いわゆるコピペ）してお使いいただいても構いませんが、以下の件にご留意ください。
使用については自己責任でお願いします
コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。
万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません
コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります
コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります
その場合には以下の方法で修正を行ってみてください
- コードの中に全角の記号が入っていませんか？ 半角にすることで解消できます
- コードの中に全角の空白（スペース）がありませんか？ 半角にすることで解決できます
- コードは合っているはずなのに更新できないときは 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
- 「何かが間違っています．．．」と表示され、更新できないときは このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
コードを転載する場合には
ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします
・・・たったこれだけで環境作りは完了です。びっくりするほど簡単です。
投稿一覧の列幅調整のしかた
一番上にあるリンク先記事と重複する部分が多いですが、こちらでも紹介しておきます。
投稿一覧ではすべての列（要素）を表示して残った幅が投稿タイトルの表示に使われていますので、投稿タイトル以外の列すべてを設定する必要があります。
WordPressの標準で表示されるのは以下の通り
- author／作成者
- tags／タグ
- categories／カテゴリー
- date／日付
- post_thumb／アイキャッチ画像
- comments／コメント
これに対して基本となるCSSコードを使って先ほど作成した「admin-styles.css」へ追記していくだけです
th#幅の名前{
width:110px;
}【注意】コードをコピーして使用する前に必ずお読みください
この記事内にコードが記載されている場合、コードはそのままコピー（いわゆるコピペ）してお使いいただいても構いませんが、以下の件にご留意ください。
使用については自己責任でお願いします
コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。
万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません
コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります
コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります
その場合には以下の方法で修正を行ってみてください
- コードの中に全角の記号が入っていませんか？ 半角にすることで解消できます
- コードの中に全角の空白（スペース）がありませんか？ 半角にすることで解決できます
- コードは合っているはずなのに更新できないときは 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
- 「何かが間違っています．．．」と表示され、更新できないときは このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
コードを転載する場合には
ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします
複数の列をまとめて設定する場合には
th#author,
th#tags,
th#categories{
width:100px;
}【注意】コードをコピーして使用する前に必ずお読みください
この記事内にコードが記載されている場合、コードはそのままコピー（いわゆるコピペ）してお使いいただいても構いませんが、以下の件にご留意ください。
使用については自己責任でお願いします
コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。
万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません
コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります
コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります
その場合には以下の方法で修正を行ってみてください
- コードの中に全角の記号が入っていませんか？ 半角にすることで解消できます
- コードの中に全角の空白（スペース）がありませんか？ 半角にすることで解決できます
- コードは合っているはずなのに更新できないときは 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
- 「何かが間違っています．．．」と表示され、更新できないときは このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
コードを転載する場合には
ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします
カスタムフィールドなどの幅は「th#カスタムフィールドのスラグ」で設定できますし、ブラウザのデベロッパーツールを使えば要素の名前は分かると思います。
もしも変更したのに適用されないという場合は、デベロッパーツールを起動した状態（投稿一覧のどこかで「右クリック」→「検証」）で画面のリロードを行うアイコンを右クリックし、「キャッシュを消去してハード再読み込み」をクリックすれば適用されると思います。
これでWordpress管理画面の投稿一覧にある余分な余白が調整され、すっきりした一覧になると思いますよ。
また今回作った「admin-styles.css」では管理画面側のいろいろな場所に対するCSSの編集ができますから、その他の項目の色などの調整も簡単にできるようになりますね。
Wordpressの本
Amazonの人気商品楽天市場の人気商品
いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ) / 石川..
1,738 円 (税込)
基本情報ジャンル建築・理工フォーマット本出版社インプレス発売日2019年07月ISBN9784295006664発売国日本サイズ・ページ280p 21×19cm関連キーワード 9784295006664 出荷目安の詳細はこちら＞＞楽天市場内検索 『在庫あり』表記について
いちばんやさしいWordPressの教本 人気講師が教える本格Webサイトの作り方／石川栄和／大串肇／星野邦敏【合計3000円以上で送料無料】
1,738 円 (税込)
著者石川栄和(著) 大串肇(著) 星野邦敏(著)出版社インプレス発行年月2019年08月ISBN9784295006664ページ数280P9784295006664内容紹介Webサイトをはじめて作る初心者でも安心！大きな画面の操作手順で迷わない。人気のテーマで、パソコン＆スマホ両対応のWebサイトを作れる！..
いつでもご相談・サイトカスタマイズの依頼を受け付けています
Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。
※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちら
から登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。
【スポンサーリンク】
記事の拡散にご協力をお願いします
閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします
