当サイトは、アフィリエイト・アドセンス広告を掲載しています。消費者庁が、2023年10月1日から施行予定である景品表示法の規制対象（通称:ステマ規制）にならないよう、配慮して記事を作成しています（記事はこちら、消す方法はこちら）

参考：令和5年10月1日からステルスマーケティングは景品表示法違反となります。 | 消費者庁

【WordPress】編集画面右側の不要な項目を非表示にするCSS

2022年12月29日WordPress

「WordPress」のアイコン

この記事では、PCウェブサイト版「WordPress（ワードプレス）」の記事編集画面の右側サイドバーにある「ブログのトップに固定」、「レビュー待ち」、「投稿者」、「ゴミ箱へ移動」の項目を非表示にするCSSを紹介します。

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

WordPressの右側サイドバーにある「ブログのトップに固定」、「レビュー待ち」、「投稿者」、「ゴミ箱へ移動」ボタンを非表示にする前と後の比較画像

通常、PCブラウザからアクセスした「WordPress」の右側サイドバーから不要なパネルを非表示したい場合、右上の三点リーダボタン→「設定」をクリックします。

ブロックエディターのWordPressサイドバーに表示するパネルを切り替える手順画像1

左側の「パネル」をクリックします。ここから不要なパネルをオフにすることで、見た目上非表示にできます。

ブロックエディターのWordPressサイドバーに表示するパネルを切り替える手順画像2

しかし、ブログのトップに固定、レビュー待ち、ゴミ箱へ移動といったボタンは、通常の設定からは削除できません。CSSを利用することで、自身の環境上で見えないよう非表示にできます。誰にも迷惑をかけません。いつでもオンオフできます。

これらのボタンを使っていない方、ついつい押し間違えてしまう方、参考にしてみてください。本記事は、PCユーザー向けです。Chrome拡張機能が利用できないスマホでは利用できません。また、僕はブロックエディター（Gutenberg）を利用しています。クラシックエディターは知りません。

インストール方法

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

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

使っているテーマによっては、拡張機能を使わなくてもいけるかも？

使っているWordPressテーマによっては、子テーマの編集ページに、「投稿エディタ用スタイル」があるかもしれません。これは記事編集画面だけに適用する専用のスタイルシートです。

拡張機能を使わなくても、ここに直接CSSを書き込めば、反映されるかもしれません。本記事では、エディタ用スタイルシートが用意されていない場合や、キャッシュの影響で反映されない方でもできるように、安定の拡張機能を利用します。

「Chromeに追加」をクリックしてインストールします。

「Stylebot」のインストール手順画像

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。

WordPress編集画面のサイドバー内の不要な項目を削除するCSS

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

Stylebotのスクリーンショット1

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

/*「ブログのトップに固定」削除*/
div[aria-label="エディター設定"] .edit-post-post-status .components-panel__row:nth-of-type(4) {
  display: none !important;
}

/*「レビュー待ち」削除*/
div[aria-label="エディター設定"] .edit-post-post-status .components-panel__row:nth-of-type(5) {
  display: none !important;
}

/*「投稿者」削除*/
div[aria-label="エディター設定"] .edit-post-post-status .components-panel__row.edit-post-post-author {
  display: none !important;
}

/*「ゴミ箱へ移動」削除*/
div[aria-label="エディター設定"] .edit-post-post-status button.editor-post-trash {
    display: none !important;
}
注意事項

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

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

全部を書き込む必要はありません。皆さんが消したい項目を選んで、書き込んでみてください。「display: none !important;」が非表示にするという意味です。下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。

Stylebotのスクリーンショット2

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

Stylebotのスクリーンショット3

記事編集画面を開きます。右側サイドバーを開いて、「ブロック」ではなく、「投稿」タブに切り替えます。書き込んだ項目が消えています。「ブログのトップに固定」、「レビュー待ち」、「投稿者」、「ゴミ箱へ移動」すべてを消せます。

WordPressの右側サイドバーにある「ブログのトップに固定」、「レビュー待ち」、「投稿者」、「ゴミ箱へ移動」ボタンを非表示にした画像

スッキリして、押し間違える心配もありません。

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

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

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

感想

以上、WordPress編集画面のサイドバーにある「ブログのトップに固定」、「レビュー待ち」、「投稿者」、「ゴミ箱へ移動」を個別に削除する方法でした。

余計なスペースを取るだけならいいんですが、「ゴミ箱へ移動」ボタンは、うっかり押しちゃうと大変なことになります。復元できるとはいえ、めんどくさいので消せてよかったです。

2022年12月29日WordPress