WordPress

【 WordPress 】記事内のアイキャッチを非表示にする方法

2020年4月1日

WordPress アイキャッチ 非表示

 

女性
・アイキャッチが記事上に表示されてしまう
・タイトル下のアイキャッチと2枚表示されてしまう

こんな悩みにお答えします。

アイキャッチは記事の見た目を飾るもので、

かなり重要なものですが、

表示の仕方を工夫しないとクリック数が大きく下がることになります。

 

今回は、そんなアイキャッチの非表示の仕方をご紹介いたします。

 

アイキャッチとは

「アイキャッチ」とは、「画像や映像などで見る人の注意を引きつけること」という意味で、広告業界で使われる手法のひとつです。

読者の注意を引きつけるような画像を使用することが多いです。絵やキャラクター画像、イラスト、写真、ロゴや文字などが用いられることが多いですね。

 

「アイキャッチ」の効果

・見た人の注意を引きつける
・その記事の看板。クリックしてもらいやすくなる
・アイキャッチが記事のイメージを促進する

 

 記事内のアイキャッチを削除する方法

アイキャッチ画像があるとないでは、全然サイトの印象が変わりますね。

アイキャッチ画像を非表示にする方法は2つあります。

 

①CSS(スタイルシート)を編集する
②テンプレートファイルを編集する

 

今回はWordPress初心者の方向けなので、①のみ紹介します。
テンプレートファイルの編集に失敗すると、WordPressサイトが真っ白になる場合があるからです。

必ずファイルの編集前にバックアップをとっておきましょう。

それでは、WordPressでアイキャッチ画像を非表示にする方法を紹介していきます。

CSSを編集してアイキャッチを非表示にする

 

CSS(スタイルシート)を編集してアイキャッチ画像を非表示にします。

やることは以下の6項目です

メモ

  1. 検証からアイキャッチ画像のCSSクラスを調べる
  2. CSSクラスに[ display none ] を追加して記載する

検証からアイキャッチ画像のCSSクラスを調べる

使用しているテーマのアイキャッチ画像のクラス名を調べるのには、

ブラウザのインスペクタ(開発者ツール)を使用する必要があります。

 

お使いのブラウザのインスペクタを起動し、アイキャッチ画像の要素を確認してください。

 

CSSクラスに[ display none ] を追加して記載する

テンプレートファイルに記述されているアイキャッチ画像を出力するコードを取り除き

アイキャッチ画像を非表示にします。

該当コードは、.attachment-fullという部分です。

追加CSSに以下を記載してください。

/*アイキャッチ非表示*/
.クラス名 {display: none;}

これを追記することで、アイキャッチの表示がきれいになると思います。

 

まとめ

以上、アイキャッチ画像を非表示にする方法を紹介しました。

アイキャッチ画像はテーマのデザインに合わせたいものですよね。
もし使っているテーマがあなた好みのデザインに合わないなと感じたら、
テーマを変えるべきかもしれません。

 

アイキャッチ画像の表示が不要のテーマやブログやアフィリエイトに

おすすめのテーマなど紹介していますので参考にしてみてください。

 

お疲れさまでした。

 

-WordPress

© 2021 RYO'S NOTE