【WordPress】「URL の最後のパーツをカスタマイズ」を非表示にするCSS

2025年1月26日WordPress

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

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

【WordPress】「URL の最後のパーツをカスタマイズ」を非表示にするCSS

PCブラウザ版「WordPressワードプレス」でブログ記事を書いている時に、うっかりパーマリンク下の「URL の最後のパーツをカスタマイズ。さらに詳しく。↗」というテキストをクリックすることがあります。

WordPressのパーマリンクポップアップ内に表示されている「URL の最後のパーツをカスタマイズ。さらに詳しく。↗」画像

いつ頃変わったのか分かりませんが、本記事を書いた当初は「URLの最後の部分。さらに詳しく。」という表記でした。少なくともバージョン6.7.1（2024年11月24日公開）からは表記が変わってCSSも以前のだと使えなくなっています。本記事では対応済みです。

「さらに詳しく。」はリンクになっていてクリックするとこちらのページに飛びます。

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

CSSを適用できるChrome拡張機能（「Stylebot」や「Stylus」）を利用します。本記事では「Stylebot」拡張機能で解説します。

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

本記事はPCブラウザで「WordPress」のブロックエディター（Gutenberg）を使っている方向けです。僕はクラシックエディターを使っていないので同じ画面なのかどうか分かりません。スマホやタブレット向けの内容ではありません。

ポイント

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

いつの間にか重要なメッセージに変わっていたとしてもCSSで非表示にしていると気づきません。それで被害にあっても自己責任です。まぁパーマリンク下の説明文に重要な文章が書かれることはないと思いたいです。

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

インストール方法

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

Chrome拡張機能だけでなく「Microsoft Edge」と「Firefox」版もあります。本記事では「Stylebot」を紹介しますが「Stylus」などでもOKです。僕はメインでは「Stylus」を使っています。

Stylebot - Chrome Web Store

Change the appearance of the web instantly

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

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

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

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

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

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

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

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

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

編集画面の「URL の最後のパーツをカスタマイズ」を非表示にするCSS

スタイルシートを開く

「WordPress」の管理画面にアクセスします。ログインしていない場合はログインします。

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

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

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

CSSを書き込む

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

CSS

/*WordPress編集画面の「URL の最後のパーツをカスタマイズ。さらに詳しく。↗」テキスト非表示*/
.editor-post-url div:has(>a.components-external-link[href$="/#permalink"]) {
  display: none !important;
}

注意事項

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

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

下記画像のようになればOKです。

記事執筆時点で上記CSSを書き込むと「Stylebot」上でエラーっぽい表示（右側に赤ブロックがつく）になりますが、問題なく動作するので気にしなくてOKです。右上の「×」でスタイルシートを閉じます。

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

CSSが適用されたか確認する

新しく記事編集画面を開きます。右側サイドバーが「投稿」ページになっていることを確認し、パーマリンクのURLスラッグをクリックします。

ポップアップ内に表示されていた「URL の最後のパーツをカスタマイズ。さらに詳しく。↗（旧：URLの最後の部分）」テキストが非表示になっています。間違えてクリックする心配がなくなります。

WordPressの「URL の最後のパーツをカスタマイズ。さらに詳しく。↗」をCSSで非表示にした画像

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

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

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

CSS

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

	/*下線削除*/
	&>span {
		text-decoration: none !important;
	}

	/*右にある矢印アイコン非表示*/
	&>span[aria-label="(新しいタブで開く)"] {
		display: none !important;
	}
}