【WordPress】画像ファイルへリンクされていないメディアを目立たせるCSS

2025年6月6日WordPress

この記事では、PC版「WordPressワードプレス」のブロックエディターで「画像ファイルへのリンク」が設定されていないメディアファイルを目立たせるCSSを書きます。

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

【WordPress】画像ファイルへリンクされていないメディアを目立たせるCSS

僕はWordPressの「Luxeritasルクセリタス」テーマを使っていて、画像をクリックした時にふわっと拡大させるLightboxライトボックス（Tosrus）を使っています。

画像を拡大するには、ブロックエディターの編集画面に挿入したメディアブロックを「画像ファイルへのリンク」にする必要があります。デフォルトでは何も設定されていません。

僕は以下記事の方法で初期状態を「画像ファイルへのリンク」にしているので、普段は設定しないのですが、設定する前に挿入していた古い画像が今でもあります。

【WordPress】デフォルトで画像ファイルにリンク付ける方法

この記事では、PC版「WordPress」にアップロードした画像のデフォルトのリンク先を「画像ファイルへの ...

https://www.naporitansushi.com/wordpress-image-default-link-...

それらを見つけて気づいた時にリンク設定していますが、デフォルトだと設定済みと未設定の違いが分かりにくいです。いちいちブロックを選択してツールバーのリンクボタンが設定されているかどうか見分ける必要があります。

もっと簡単に見分けがつくようにしたいと思ったので、編集画面上だけに反映させるCSSを使うことにしました。

拡張機能を導入できるPCブラウザ専用です。スマホやタブレットではできません。

1. 前提
2. リンク付与されていないメディアブロックを目立たせるCSS
3. 感想

前提

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

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

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

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

リンク付与されていないメディアブロックを目立たせるCSS

スタイルシートを開く

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

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

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

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

CSSを書き込む

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

CSS

/*メディアリンクが設定されていない画像に枠線*/
[aria-label="ブロック: 画像"]>div:not(.block-editor-media-placeholder):not(:has(>a)) {
    &>img {
        outline: 20px solid red !important;
    }

    /* aタグに囲まれていない画像に赤いフィルターをかける */
    &::after {
        content: "";
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 0, 0, 0.5);
    }
}