【WordPress】カテゴリー選択画面の高さを広げるCSS
この記事では、「WordPress（ワードプレス）」の記事編集画面の右側サイドバーにあるカテゴリー選択画面の高さを広げて、見やすくするCSSについて書きます。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボット）」を使います。
本記事で紹介するCSSを使えば、WordPress記事編集画面ページの右側サイドバーにある「カテゴリー」欄を広くできます。いつでもオンオフできます。
通常は、以下のようになっています。せいぜい5～6個しかカテゴリーが表示されず、目的のカテゴリーを探すのが大変です。
マウスのスクロール量（行数）を増やしている方は、もっと大変です。ちょっとのスクロールでぐわっとカテゴリーが移動しちゃうので、いちいち右側のスクロールバーを掴んで探さないといけません。
そこで、高さを広げて、もう少し1ページに表示されるカテゴリー数を増やすことにしました。本記事は、ブロックエディター向けです。クラシックエディターの方は知りません。
「Stylebot（スタイルボット）」は、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。
使っているテーマで、WordPressの投稿用エディタースタイルシートがある場合は、そちらに書き込むと反映されます。本記事では、シートがない方やキャッシュの影響で反映されない方でもできるように、安定の拡張機能を利用します。
Chromeウェブストアからインストールできます。
https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。
「Chromeに追加」をクリックしてインストールします。
右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
https://www.naporitansushi.com/stylebot/サイドバーにあるカテゴリー選択画面の高さを広げるCSS
WordPressの管理画面にアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。
右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。
/*サイドバーのカテゴリー選択画面の高さを広げる*/
.editor-post-taxonomies__hierarchical-terms-list {
max-height: 33em;
}下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。
再度拡張機能ボタンを押して、自身のサイトがオンになっていることを確認します。オンになっている間は有効になっているということです。
記事編集画面を開きます。導入前は5～6個でしたが、導入後は1ページに15個前後のカテゴリーが表示されます。スクロール量が減って、目的のカテゴリーを探しやすくなりました。
CSSの「max-height: 33em;」の数値を調整することで、もっと高くできます。
一時的に無効化したい場合は、Stylebot→自身のサイトをオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。
感想
以上、WordPress編集画面のサイドバーにあるカテゴリー欄を広くするCSSでした。
記事編集画面を好みに改造することで、より効率的に記事執筆できます。