【WordPress】編集画面の「画像の目的を説明」を非表示にするCSS

2022年4月21日ブログ

WordPressのアイコン

この記事では、WordPressの記事編集画面で、画像を選択した時に表示される右側サイドバーの「画像の目的を説明。画像が単なる装飾の場合、空欄にします。」のテキストを非表示にする方法(CSS)について書きます。

間違えてクリックしてしまう方におすすめです。

WordPressの編集画面の「Altテキスト (代替テキスト)」の下に表示されている「画像の目的を説明。画像が単なる装飾の場合、空欄にします。」テキスト

WordPressでブログ記事を書いている時に、うっかり「Altテキスト (代替テキスト)」の下にある「画像の目的を説明。画像が単なる装飾の場合、空欄にします。」というテキストをクリックしてしまうことがあります。

「画像の目的を説明」はリンクになっていて、クリックすると、こちらのページに飛びます。

リンク先は英語になっていて、画像にAlt属性を付ける意味、どういった付け方がいいのかなどについて書かれています。初心者さんは、一度目を通しておくとよいです。

慣れてくると、便利さよりも間違えてクリックした時のストレスの方が大きくなってきました。そこで、CSSで非表示にしてみたいと思います。

WordPressの投稿用エディターのスタイルシートにCSSを書き込むことで、非表示にできます。いつでも元に戻せます。

「画像に代替テキストを入力する時、間違えてその下のリンクをクリックしてしまう…」といった方、ぜひ試してみてください。

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

ポイント

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

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

非表示にする手順

WordPress管理画面を開きます。左側メニューにある使っているテーマ名(僕の場合、Luxeritas)→子テーマの編集をクリックします。

Luxeritas→子テーマの編集

「投稿エディタ用スタイル」をクリックします。

投稿エディタ用スタイル
注意点

調べると、ここの項目、使っているテーマによってはないようです。その場合は、各自で「テーマ名 投稿エディタ用スタイル」といった感じで、適用方法を調べてみてください。

めんどくさい場合は、Chrome拡張機能「Stylebot」などでも適用できます。

CSSを書き込めるスタイルシートが表示されるので、コードを書きます。既に書かれているコードは消さずに、新しく改行して下の行に書き込みます。書き込めたら、「保存」をクリックします。

CSSを書き込んで、「保存」をクリックする

コードは、以下のようになっています。

/*WordPress編集画面の「画像の目的を説明。画像が単なる装飾の場合、空欄にします。」テキスト非表示*/
.components-base-control p[id*=inspector-textarea] {
  display: none;
}

保存する時、ブラウザによっては「このサイトを離れますか?」とダイアログが表示されます。「このページを離れる」をクリックします。ページがリロードされて、「変更を反映しました」と表示されればOKです。

このサイトを離れますか? 変更を反映しました

新しく記事編集画面を開きます。既に開いている場合は、一度下書き保存して、再度開きます。(またはリロード)

適当に画像を選択します。右側サイドバーに画像設定の「Altテキスト (代替テキスト)」項目が表示されます。本来、その下に表示されていた「画像の目的を説明。画像が単なる装飾の場合、空欄にします。」文字がごっそり消えています。

画像設定の「Altテキスト (代替テキスト)」の下にある文字を非表示にした画像

間違えてクリックしてしまう心配がなくなります。元に戻したい時は、書き込んだコードを削除するだけです。

リンクだけ非表示にしたい場合

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

/*WordPress編集画面の「画像の目的を説明」のリンクだけ無効化*/
p[id*=inspector-textarea] .components-external-link {
  pointer-events: none !important;
  color: unset !important;
}

/*「画像の目的を説明」の右にある矢印アイコン非表示*/
p[id*=inspector-textarea] .components-external-link svg {
  opacity:0;
}

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

「画像の目的を説明」のリンクだけ無効化した画像

メディア挿入画面のテキスト非表示

おまけで、メディア挿入画面の代替テキストの下に表示される、以下のテキストを非表示にするコードを紹介します。

画像の目的を説明する方法について、詳しくはこちらをご覧ください(新しいタブで開く)。装飾のみが目的の画像であれば、空欄にしてください。

メディア挿入画面の代替テキストの下に表示される説明文

こちらのコードは、Stylebotなどで書き込まないと反映されないかもしれません。

/*メディア挿入画面の「画像の目的を説明する方法について~」テキスト非表示*/
p#alt-text-description {
  display: none !important;
}

適用前と適用後の比較画像を貼っておきます。

メディア挿入画面の代替テキストの下に表示される説明文を非表示にしてみた比較画像

感想

以上、WordPressの編集画面で、画像を選択した時に表示されるAltテキスト (代替テキスト)の下にある「画像の目的を説明。画像が単なる装飾の場合、空欄にします。」テキストを非表示にする方法についてでした。

あくまで自分の編集画面上の反映で、他の人に見られる場所ではないので、好きなようにカスタマイズしてみましょう。

同じく、WordPressの編集画面の「URLスラッグ」の下に表示される「URLの最後の部分。 パーマリンクの詳細」のテキストを非表示にする方法も書いています。気になった方は、以下の記事を合わせて参考にしてみてください。

Posted by ナポリタン寿司