【WordPress】「URLの最後の部分。さらに詳しく」を非表示にするCSS

2022年4月21日2022年12月6日WordPress

この記事では、WordPressの記事編集画面の右側サイドバーにある「URLの最後の部分。さらに詳しく。」のテキストを非表示にする方法（CSS）について書きます。

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

WordPressでブログ記事を書いている時に、うっかりパーマリンク下の「URLの最後の部分。さらに詳しく。」というテキストをクリックしてしまうことがあります。「さらに詳しく。」はリンクになっていて、クリックすると、こちらのページに飛びます。

ブログを始めた頃は、参考になりましたが、慣れてくると、こういったリンクは不要になってきました。間違えてクリック→ページが新しいタブで開く→閉じる。の作業が、めんどくさくなってきたので、CSSで非表示にしてみたいと思います。

WordPressのパーマリンクポップアップ内に表示されている「URLの最後の部分。さらに詳しく。」画面

WordPressの投稿用エディターのスタイルシート書き込むか、CSSを適用できるChrome拡張機能（StylebotやStylus）を利用します。本記事では、「Stylebot」で解説します。Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。

「パーマリンクの編集・コピーする時に、うっかりその下のリンクを押してしまう…」といった方、ぜひ試してみてください。

本記事は、WordPressのブロックエディター（Gutenberg）を使っている方向けです。僕は、クラシックエディターを使っていないので、同じ画面なのかどうか分かりません。

ポイント

本記事の方法で非表示にする場合、頭の片隅に、「本来表示されるコンテンツを非表示にしている」ということを忘れないようにしてください。

いつの間にか、重要なメッセージに変わっていたとしても、CSSで非表示にしていると気づきません。それで被害を被っても、自己責任です。

まぁ、パーマリンク下の説明文に重要な文章が書かれることは、ないと思いたいです。

1. インストール方法
2. 編集画面の「URLの最後の部分。さらに詳しく。」を非表示にするCSS
3. 「さらに詳しく。」のリンクを無効化するCSS
4. 感想

インストール方法

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

Chromeウェブストアからインストールできます。

Stylebot - Chrome ウェブストア

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

https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...

Firefox・Edgeをご利用の場合

Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。

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

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

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

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

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

編集画面の「URLの最後の部分。さらに詳しく。」を非表示にするCSS

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

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。

/*WordPress編集画面の「URLの最後の部分。さらに詳しく。」テキスト非表示*/
.editor-post-url p.components-base-control__help:has(a[href$="/#permalink"]) {
  display: none;
}

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

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

新しく記事編集画面を開きます。

パーマリンクのURLスラッグをクリックします。ポップアップ内に表示されていた「URLの最後の部分。さらに詳しく。」テキストが非表示になります。間違えてクリックする心配がなくなります。

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

「さらに詳しく。」のリンクを無効化するCSS

「さらに詳しく。」のリンクだけを無効化するコードを紹介します。文字は消さずに、クリックできないようにしたいだけの方は、こちらを使ってみてください。

/*WordPress編集画面の「さらに詳しく。」のリンクだけ無効化*/
.editor-post-url p.components-base-control__help>a[href$="/#permalink"] {
  pointer-events: none !important;
  color: inherit !important;
}

/*「さらに詳しく。」の右にある矢印アイコン非表示*/
.editor-post-url p.components-base-control__help>a[href$="/#permalink"]>svg {
  display: none !important;
}

適用すると、リンクの証である青の文字色が、元の黒になり、クリックしてもページが開かないようになります。見た目は、以前のままなので、人によってはこちらの方が好みかもしれません。