WordPressの不愉快でうざいアイキャッチ画像をStylishを使って非表示にする方法とそのCSSコード

このブログを始めたのは2016年の3月。WordPressを「本格的」に利用したのも今回が初めてでした。

その前の3年間はDrupal7でサイトを運営していました。

本当は、WordPress自体は2007年から使ってはいました。しかし、メインサイトの運営で手一杯だったので、これまでWordPressについて全く不勉強でした。

アイキャッチ画像？

以前のサイトはDrupal7。嫌になるほど勉強して使い方はある程度覚えました。しかし今回のメインサイトはブログ。ブログなら単純にWordPressで運用するほうが楽だろうと思い、WordPressで運用することにしました。そこで驚いたことがいくつかあります。

Drupalに比べカスタマイズ性が劣る
PHPコードを書く機会が圧倒的に多い（Drupal7の時はPHPコードはほとんど書かなかった）
セキュリティが非常に甘い

上の3つの他に何だこれ？と思ったのが「アイキャッチ画像」です。

おかしな仕様

「アイキャッチ画像」というもの自体は、WordPressのVer3.0からある歴史のあるものらしいですが、全然知りませんでした。

ということで取り敢えず何も考えず、「必須項目なんだろう」と思い適当な画像を設定してみました。

そうしたらタイトルの上にいきなりアイキャッチ画像が表示されました。

何だこれ。うざい。不愉快。正直言って要らないなんじゃない

これが素直な感想でした。ちなみにアイキャッチ画像を設定しなかった場合は、以下の様になります。

確かにインパクトは無いかもしれませんが、かわりに1画面当たりの情報量は多くなります。スッキリもします。どっちの方が閲覧者目線なんでしょうか？

サムネイルが表示できない

ということで当サイトではアイキャッチ画像は設置しないことにしました。ところが、そのことで以下のようなデメリットが生じることがわかりました。

抜粋（excerpt）にサムネイル画像を表示できない
SNSでシェアされた時、画像がないタイトルとサマリーだけになる

上がアイキャッチ画像なし。下があり。出展：ブログの集客を加速させる「アイキャッチ」とそのデザインについて | 株式会社LIG

シェアされた時、画像が有った方が「拡散力の増大」に繋がるそうです。でも私はこのブログがSNSでシェアされるとは全く思っていません。「拡散」なんてほとんど想定していません。

ですから、閲覧者ファーストの視点で「アイキャッチ画像」は、やはり設置しないことにしました。

ちなみに抜粋（excerpt）にサムネイル画像が表示されない問題は、「Thumbnail For Excerpts」プラグインで解消できます。※但し記事の中で最初の画像がサムネイルになる仕様。任意の画像をサムネイルには出来ない。更新も随分されていません。

SNSの拡散対策としては「All In One SEO Pack」プラグインで十分対応可能。アイキャッチ画像を設定していなくても「ソーシャル設定」の「画像」の所で、シェアされた時用の画像を選択できます。

これでアイキャッチ画像の呪縛から離れられます。

おでんツンツン男と同じ

ただし、いくらこのブログ運営者である私が「閲覧者ファースト」の視点でアイキャッチ画像を設置しなくても、他のWordPress運営者はほぼ全員アイキャッチ画像を設定しているでしょう。

事実、数年前からなんだこの画像、「記事に関係ないよね」と思うような画像が、いくつものサイトで表示されるようになりました。本当にうんざりです。

SNS上での「拡散力の増大」を目的としているのでしょう。記事とは無関係の目立ちたがり画像、うざい画像が表示され、すごくイライラしていました。

閲覧者の気持ちを考えず、とにかく目立つことだけやる。やっていることは「おでんツンツン男」と同じです。

出展：おでんツンツン男の免許証の写真…酷すぎると話題に… - おもしろチャンネル

Stylshで非表示にする

とにかくうざくて不愉快なアイキャッチ画像。結論から言いますと、「Stylish」というアドオン、拡張機能を活用することでほとんど非表示にすることが出来ます。

今回は、そのために約1年近くかけて考え出したCSSコードを公開したいと思います。

不具合があるかもしれませんが、もし良かったらぜひご利用下さい。

ユーザースタイルシートを使うためには他にも色々なアドオン、拡張機能があると思います。しかし、多くのブラウザで利用できることを考慮し今回は「Stylish」を前提に説明をします。私が大嫌いな「Google Chrome」でも問題なく動作すると思います。ChromeではなくVivaldiで検証済です。

Firefoxの場合

ChromeウェブストアでStylishで検索

WordPressのアイキャッチ画像の特徴

WordPressのアイキャッチ画像には以下のような特徴があります。

記事の先頭に表示される画像
画像のURLに必ず「wp-content/uploads/」という文字が入る
WordPressの画像、imgタグは<p>タグで囲まれている

ちなみに2番めの「wp-content/uploads/」の文字列が含まれるという特徴は「CDN」サービスを利用しているサイトでも当てはまります。

これら3つの法則をうまく利用することで、WordPressサイトのアイキャッチ画像の9割近くは非表示にすることが出来ます。

記事の先頭に現れる画像

1.記事の先頭に表示される画像≒アイキャッチ画像

WordPressサイトの画像は必ず<p>タグで囲まれている。

なおかつWordPressサイトの画像は「メディアライブラリ」を利用しているので必ず、そのURLには「wp-content/uploads/」という文字が入る。以上の要件を利用し、アイキャッチ画像を非表示にするCSSコードの一例は以下の様になります。


#contents p:first-of-type img[src*="wp-content/uploads/"] {
    display: none;
}

この場合、#contentsというのが記事本文ラッパーのID。「#contents p:first-of-type」というのは記事本文の中で最初に現れるpタグと言う意味。img[src*="wp-content/uploads/"]というのは、URLの中に「wp-content/uploads/」という文字が含まれる画像（img要素）という意味です。

この3つの条件を満たす画像を「display: none;」で非表示にするという考え方です。至ってシンプルですが、これを思いつくには半年近くかかりました。こうした手法で、アイキャッチ画像を非表示にするCSSコードは以下の様になります（執筆時点）。


/*記事の中で最初に現れた画像を消す*/
#contents p:first-of-type img[src*="wp-content/uploads/"] {
    display: none;
}

#the-content p:first-of-type img[src*="wp-content/uploads/"] {
    display: none;
}

.article p:first-of-type img[src*="wp-content/uploads/"] {
    display: none !important;
}

.content p:first-of-type img[src*="wp-content/uploads/"] {
    display: none !important;
}

.entry p:first-of-type img[src*="wp-content/uploads/"] {
    display: none !important;
}

.entry-content p:first-of-type img[src*="wp-content/uploads/"] {
    display: none !important;
}

.post p:first-of-type img[src*="wp-content/uploads/"] {
    display: none;
}

.post_content p:first-of-type img[src*="wp-content/uploads/"] {
    display: none;
}

/*たまにpではなくdivタグで囲まれているケースも有り*/
#page-artcle div:first-of-type img[src*="wp-content/uploads/"] {
    display: none;
}

.l-main div:first-of-type img[src*="wp-content/uploads/"] {
    display: none;
}

製作者独自のCSSを上書きする

先ほどのCSSコードで大半のうざいアイキャッチ画像は表示されなくなります。しかし、それでも消えないアイキャッチ画像もあります。その場合は、そのアイキャッチ画像に割り振られているIDやクラス名を「開発者ツール（インスペクタ）」で調べて、「display:none;」として非表示にする以外ありません。代表的なのは以下のようなCSSコードになります。


.attachment-post-thumbnail {
    display: none;
}

アイキャッチ画像に付与されるIDやクラスは使われているテーマによって違ったり、製作者が独特のID、クラスを割り振っている場合があります。

それでも約1年間調べた限り、以下に列挙するCSSコードでほとんどのアイキャッチ画像は消せます。


/*製作者独自のcssを上書きして消す*/
.attachment-post-thumbnail {
    display: none;
}

.column-eyecatch {
    display: none;
}

.entry-post-thumbnail {
    display: none;
}

.eyecatch {
    display: none;
}

.eye-catch {
    display: none;
}

.eyecatch-under-title {
    display: none;
}

.featured-media {
    display: none;
}

.post-featured-image {
    display: none;
}

.post_image {
    display: none;
}

#post_image {
    display: none;
}

.post-thumbnail {
    display: none;
}

/*わざと？クラスが""でくくられている*/
.“post-thumbnail” {
    display: none;
}

.single_featured_image {
    display: none;
}

例外的なケース

上で説明した2パターンのCSSコードで大体の「不愉快でうざい画像＝アイキャッチ画像」は非表示に出来ます。しかし、アイキャッチ画像を上記以外の方法でサイトに埋め込んでいる場合が2つあります（執筆時点）。それについても説明します。

headerタグに埋め込んでいる

1つ目はheaderタグの中にアイキャッチ画像を埋め込んでいる場合です。その場合は以下の2つのCSSコードで「不愉快でうざい画像」は非表示に出来ます。


header img[src*="wp-content/uploads/"] {
    display: none !important;
}

#header img[src*="wp-content/uploads/"] {
    display: none;
}

タイトル直下の場合

もう1つの例外は記事の先頭、タイトルの「直上」以外にアイキャッチ画像が配置されているケースです。言い換えれば記事のタイトルの「直下」にアイキャッチ画像が配置されている場合です。

かなりまれですが、その場合は以下のCSSコードでアイキャッチ画像を非表示に出来ます。


h2:first-of-type + p img[src*="wp-content/uploads/"] {
    display: none;
}

複雑なので解説します。まず「h2:first-of-type」は記事の中で一番最初に現れるH2タグという意味です。つまり記事のタイトルです。

「h2:first-of-type + p」というのはその一番最初のH2タグ、タイトルの直後に現れるPタグという意味です。以降の説明は省略。

Stylishの使い方

これまではまず、不愉快でうざいアイキャッチ画像を消すCSSコードの方を先に説明しました。次はStylishを使い方です。既にFirefox、ChromeなどでStylishが追加されている事を前提とします。

どのサイトでも構いません。例えばgoogleを開いた状態で説明します。右上のStylishの「S」ボタンを押下します。この後はFirefoxとChrome系では操作が違ってきますので、まずはFirefoxの場合から説明します。

ドロップダウンメニューから「白紙のスタイル」を選択します。

次のような画面に遷移しますので、今まで掲載してきたCSSを全てコピペして、適当な名前を付けて保存して下さい。これで全てのサイトに適用する、うざいアイキャッチ画像を消すための「ユーザースタイルシート」が作成出来ます。

Chrome系の場合

Google Chromeは本当に嫌いなので、同系列の「Vivaldi」での操作方法をご案内致します。同様にgoogleのサイトを開いた状態でStylishの「S」ボタンを押下します。

ここで「Create New Style」をクリックして下さい。以下のような画面になります。

このままだとgoogle用のスタイルシートを書くことになりますので、必ず右下の「削除」をクリックします。

そうすると適用先が「すべて」に変わります。この状態で今まで掲載してきたCSSコードを全てコピペして適当な名前を付けて保存して下さい。以上です。

これでFirefox、Chrome系ブラザで不愉快でうざいアイキャッチ画像をほとんど見ることが無く、快適なブラウジングが出来るはずです。

ただし、今回のCSSコードでアイキャッチ画像を非表示出来るのはWordPressで作られたサイトのみです。他のブログサービスには対応していません。あしからず。

不具合が出た場合

以上のコードで表示に乱れや、表示されるべき画像が表示されない場合、Firefoxの場合、Stylishの「S」ボタンをクリックし、「すべてのスタイルを停止する」を選択してみたください。

Chrome系の場合は、やはり「S」のボタンをクリックし、「All styles」を「on」→「off」にしてみて下さい。

以上のように一時的にStylishの動作を停止することで、本来見たい画像を見ることが出来ると思います。見終わったら、逆の手順でStylishを有効にしましょう。

自身のサイトがWordPressの場合

ここまでで説明してきたCSSコードはWordPressサイトならどのサイトにでも適用される「ユーザースタイルシート」です。もしご自身がWordPressでサイトを運用していた場合、そのアイキャッチ画像も非表示になります。多分それは、厄介なことでしょう。

その場合は「開発者ツール」を利用しましょう。

まずは一旦Stylishを無効にして、ご自身のアイキャッチ画像の再表示させます。インスペクタでアイキャッチ画像に与えられているID、クラス名、HTMLの構造などを確認します。

Firefoxで開発者ツールを使った場合

今回は、header要素の中にアイキャッチ画像が埋め込まれています。

その場合もう一度Stylishの「S」ボタンをクリックし「このURL専用」をクリック（Firefoxの場合）。

Chrome系の場合やはり「S」ボタンから「Create New Style」をクリックします。

そして、今回については以下のように記述します。


header img[src*="wp-content/uploads/"] {
    display: block !important;
}

「display:none;」が「display:block;」に書き換わっているのがポイントです。

このようにして貴方のサイトのアイキャッチ画像を非表示にしているCSSコードを確認し、そのプロパティを「display:none;→block;」に変更します。ご面倒をおかけしますが、これが唯一の解決方法です。

Getty Imagesの画像を消す

以上で不愉快でうざいアイキャッチ画像とはおさらばです。しかし、私にはもういくつか不愉快に思うことがあります。その1例がGetty Imagesの素材を多用したサイトです。

見栄えやインパクト優先で、本文と脈絡の無い画像を多用されるとイラッと来ます。同感される方は、今までのCSSコードに以下のコードを追記して下さい。


.gettyimage-img {
    display: none !important;
}

アイキャッチ画像を消すCSSコード一覧

WordPressのアイキャッチ画像を非表示にするCSSコードを今までケース別に紹介してきました。それらを1つにまとめたCSSコードは以下のようになります。もし良かったらお使い下さい。


/*記事の中で最初に現れた画像を消す*/
#contents p:first-of-type img[src*="wp-content/uploads/"] {
    display: none;
}

#the-content p:first-of-type img[src*="wp-content/uploads/"] {
    display: none;
}

.article p:first-of-type img[src*="wp-content/uploads/"] {
    display: none !important;
}

.content p:first-of-type img[src*="wp-content/uploads/"] {
    display: none !important;
}

.entry p:first-of-type img[src*="wp-content/uploads/"] {
    display: none !important;
}

.entry-content p:first-of-type img[src*="wp-content/uploads/"] {
    display: none !important;
}

.post p:first-of-type img[src*="wp-content/uploads/"] {
    display: none;
}

.post_content p:first-of-type img[src*="wp-content/uploads/"] {
    display: none;
}

/*たまにpではなくdivタグで囲まれているケースも有り*/
#page-artcle div:first-of-type img[src*="wp-content/uploads/"] {
    display: none;
}

.l-main div:first-of-type img[src*="wp-content/uploads/"] {
    display: none;
}

/*製作者独自のcssを上書きして消す*/
.attachment-post-thumbnail {
    display: none;
}

.column-eyecatch {
    display: none;
}

.entry-post-thumbnail {
    display: none;
}

.eyecatch {
    display: none;
}

.eye-catch {
    display: none;
}

.eyecatch-under-title {
    display: none;
}

.featured-media {
    display: none;
}

.post-featured-image {
    display: none;
}

.post_image {
    display: none;
}

#post_image {
    display: none;
}

.post-thumbnail {
    display: none;
}

/*わざと？クラスが""でくくられている*/
.“post-thumbnail” {
    display: none;
}

.single_featured_image {
    display: none;
}


/*headerタグに埋め込まれたうざい画像を消す*/
header img[src*="wp-content/uploads/"] {
    display: none !important;
}

#header img[src*="wp-content/uploads/"] {
    display: none;
}

/*タイトル直下のアイキャッチ画像を消す*/
h2:first-of-type + p img[src*="wp-content/uploads/"] {
    display: none;
}

/*gettyイメージを消す*/
.gettyimage-img {
    display: none !important;
}

SNS、ソーシャル系も不愉快でうざい

最近では、SNS、ソーシャル系のボタンなどがどのサイトでも設置されるようになりました。シェアされてほしいためか、記事より目立つようになっている本末転倒なサイトも多く見られます。それも不愉快です。しかしそれらの8割ぐらいは非表示にできます。機会があれば、それらを非表示にする方法を紹介する記事も書きたいと思います。

いずれにしても今後も「アイキャッチ画像撲滅運動」は続きます。

基本的には今回紹介したCSSコードとその応用で、ほぼ9割程度の不愉快でうざいアイキャッチ画像は表示されずに済むと思います。ただし、もし他のパターンのCSSコードを思いついた場合は、随時紹介したいと思います。