【WordPress】カテゴリー選択画面の高さを広げるCSS

2022年12月6日2023年11月9日WordPress

この記事では、PCウェブサイト版「WordPress（ワードプレス）」の記事編集画面の右側サイドバーにあるカテゴリー選択画面の高さを広げて、見やすくするCSSについて書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボット）」や「Stylus（スタイラス）」を利用します。

通常、PCウェブサイト版「WordPress」の右側サイドバーにあるカテゴリー欄は、下記画像のようになっています。せいぜい5～6個しかカテゴリーが表示されず、目的のカテゴリーを探すのが大変です。

マウスのスクロール量（行数）を増やしている方は、もっと大変です。ちょっとのスクロールで、ぐわっとカテゴリーが移動してしまいます。いちいち右側のスクロールバーを掴んで探さないといけません。

本記事のCSSを使うことで、高さを広げて、もう少し1ページに表示されるカテゴリー数を増やすことができます。ブロックエディター向けです。クラシックエディターの方は知りません。CSSを適用できる拡張機能を導入できるPCブラウザ向けです。スマホのアプリ版ではできません。

インストール方法

ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。

Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。

Stylebot

ウェブの外観を瞬時に変更

https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...

【ポイント】「WordPress」の投稿用エディタースタイルシートについて

使っているテーマで、WordPressの投稿用エディタースタイルシートがある場合は、そちらに書き込むと反映されるかもしれません。本記事では、シートがない方や、キャッシュの影響で反映されない方でもできるように、安定の拡張機能を利用します。

「Chromeに追加」をクリックします。

「拡張機能を追加」をクリックします。

拡張機能のオーバーフローメニューに追加されたらOKです。

頻繁に開く場合は、拡張機能のオーバーフローメニューを開いて、「Stylebot」の隣にあるピン留めアイコンをクリックします。ツールバーに直接配置されます。

詳しい使い方を知りたい方は、以下の記事を参考にしてみてください。

【Stylebot】サイトにCSSを適用できる拡張機能の使い方

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボッ ...

https://www.naporitansushi.com/stylebot/

「WordPress」の管理画面にアクセスします。ログインしていない場合は、ログインします。右上にある「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。

右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。以下のコードを書き込みます。

/*サイドバーのカテゴリー選択画面の高さを広げる*/
.editor-post-taxonomies__hierarchical-terms-list {
    max-height: 500px !important;
}

注意事項

本記事のCSSは、僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。

もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で、修正したいと思います。

下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。

再度拡張機能ボタンを押して、自身のサイトがオンになっていることを確認します。僕の場合、「www.naporitansushi.com」です。オンになっている間は有効になっているということです。

記事編集画面を開きます。導入前は5～6個でしたが、導入後は1ページに、15個前後のカテゴリーが表示されます。スクロール量が減って、目的のカテゴリーを探しやすくなります。

CSSの「max-height」の数値を調整することで、もっと高くできます。好みの数値に調整してみてください。

一時的に無効化したい場合は、インストールした「Stylebot」アイコンをクリック→自身のサイトをオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。

他にもCSSを使って、「WordPress」の環境を快適にする記事をいくつか書いています。記事編集画面を好みに改造することで、より効率的に記事執筆できます。

以上、PCウェブサイト版「WordPress（ワードプレス）」の編集画面の右側サイドバーにあるカテゴリー欄を広くするCSSでした。

一度CSSを書き込んでしまえば、アップデート等で使えなくなるまで有効なので便利です。

2022年12月6日2023年11月9日WordPress