広告を利用しています

当サイトは広告を掲載しています。消費者庁が2023年10月1日から施行した景品表示法の規制対象(通称:ステマ規制)にならないよう配慮して記事を作成しています(記事はこちら、消す方法はこちら

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

2022年12月6日WordPress

「WordPress」のアイコン

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

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

PCウェブサイト版「WordPress」の右側サイドバーにあるカテゴリー欄の行数をCSSで増やした比較画像

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

WordPress編集画面のサイドバーにあるカテゴリー欄画像

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

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

インストール方法

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

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

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

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

WordPressの子テーマの編集にある「投稿エディタ用スタイル」画像

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

「Stylebot」拡張機能をインストールする手順画像1

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

「Stylebot」拡張機能をインストールする手順画像2

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

「Stylebot」拡張機能をインストールする手順画像3

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

「Stylebot」拡張機能を直接ツールバーに配置する手順画像

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

サイドバーにあるカテゴリー選択画面の高さを広げるCSS

スタイルシートを開く

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

「Stylebot」拡張機能のスクリーンショット1

CSSを書き込む

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

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

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

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

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

「Stylebot」拡張機能のスクリーンショット2

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

「Stylebot」拡張機能のスクリーンショット3

カテゴリー欄が広がったか確認する

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

WordPress編集画面のサイドバーにあるカテゴリー欄を広くする前と後の比較画像

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

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

その他のWordPress×CSS記事の紹介

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

感想

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

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

2022年12月6日WordPress

Posted by ナポリタン寿司