【WordPress】リストビューの見出しを目立たせるCSS

2026年1月26日WordPress

この記事では、PC版「WordPressワードプレス」のブロックエディターにあるリストビューの見出しを見やすくするためのCSSを紹介します。

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

PCサイト版「WordPress」のブロックエディターでリストビュー（ドキュメント概観）を開くと、記事の全ブロックが表示されます。pタグ（段落）、見出し、画像、ブログカードなど全部です。

個人的には、この中の見出し（h2、h3など）はもう少し他ブロックより目立ってほしいと思いました。当然実際の編集画面では目立っているんですが、リストビュー内ではアイコンが違う程度です。

複数選択して削除とか移動とかする時に目印となるものがなくてちょっと困ります。

【WordPress】複数ブロックを選択→まとめて削除する方法

この記事では、WordPressのブロックエディターで複数ブロックをまとめて選択してまとめてポイッ（削除 ...

https://www.naporitansushi.com/wordpress-select-multiple-blo...

そこで、編集画面上だけに反映させるCSSを使って、リストビュー内の見出しを太字&背景色付与してみます。

拡張機能を導入できるPCブラウザ専用です。スマホやタブレットではできません。あくまで自身の見た目上だけで、実際の記事ページや他人には一切影響しません。

1. 前提
2. WordPressのリストビュー内の見出しを装飾するCSS
3. 感想

前提

「Stylebot」や「Stylus」などのCSSを適用できる拡張機能を既に導入している前提です。

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

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」について書き ...

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

WordPressのリストビュー内の見出しを装飾するCSS

スタイルシートを開く

「WordPress」にログインして、適当に記事編集画面ページを開きます。

開けたらインストールした「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。

右側に白紙のサイドバーが表示されます。

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

CSSを書き込む

以下のコードを書き込みます。

CSS

/*ブロックエディターのリストビュー（左側サイドバー）の見出し背景色*/
[id$="list-view-view"]:not([style*="none"]) tr:has([d^="M6 5V18.5911L12"]) {
    background-color: #dd4a4a38 !important;
}

/*ブロックエディターのリストビュー（左側サイドバー）の見出し太字装飾*/
[id$="list-view-view"]:not([style*="none"]) tr:has([d^="M6 5V18.5911L12"]) span[class*="title"] {
    font-weight: bold !important;
}

/*ブロックエディターのリストビュー（左側サイドバー）の見出し背景色*/
[id$="list-view-view"]:not([style*="none"]) tr:has([d^="M6 5V18.5911L12"]) {
    background-color: #dd4a4a38 !important;
}

/*ブロックエディターのリストビュー（左側サイドバー）の見出し太字装飾*/
[id$="list-view-view"]:not([style*="none"]) tr:has([d^="M6 5V18.5911L12"]) span[class*="title"] {
    font-weight: bold !important;
}