記事のアイキャッチをCSSで非表示にする方法

この記事のURLとタイトルをコピーする
WEBデザイン
読者さん
読者さん
Wordpress ブログの記事で、先頭に表示される画像を非表示にしたい!
チビおるびす
チビおるびす
って疑問を、解決していきます。

日産リーフまとめ | サウンドテック・ラボ」でカテゴリ一覧ページをつくるさいに、記事冒頭のアイキャッチを非表示にする必要がありました。

やり方はとても簡単なので、わかりやすい画像つきでメモしておきます。

というわけで今回は、WordPressで記事のアイキャッチを非表示にする方法を、解説していきます。

WordPressブログ記事のアイキャッチを、非表示にする方法

WordPressのアイキャッチ画像を、CSS で非表示にするやり方を、解説していきます。

Blog thumnail none2

まずは、アイキャッチ画像の CSS クラス名を調べます。

アイキャッチ画像の上で、右クリックをし 検証をクリック。

Blog thumnail none1

検証ボタンを、クリック。

Blog thumnail none3

そのままアイキャッチ画像を、1回クリックしましょう。

Blog thumnail none4

アイキャッチ画像の HTML の IMG タグを、選択します。

画像だけではなく、アイキャッチ画像の親要素をふくめて非表示にします。

今回は DIV タグが親要素でした。

Blog thumnail none5

親要素の DIV をクリックします。

サイドバーに、クラス名が表示されました。

今回は「.pentry__thumnail」が、クラス名でした。

Blog thumnail none8

Chrome の機能を使って、画像のように試しに CSS を入力します。

display: none;

アイキャッチが、非表示できたのを確認してください。

クラス名を、メモしておきましょう。

CSS に「disyplay: none;」を入力し、全記事のアイキャッチを削除

Blog thumnail none6

WordPress ダッシュボードをひらきます。
外観CSS編集をクリック

追加 CSS に、先ほどメモしたクラス名と非表示の CSS を記入します。

今回した CSS の例↓

.pentry__thumnail {dsyplay: none;}

Blog thumnail none7

最後に、公開をクリックしましょう。

「カスタムCSS」に「dsyplay: none;」を入力し、記事ごとアイキャッチを削除

Blog thumnail none9

個別の「投稿の編集」画面で、記事ごとにアイキャッチを非表示にできます。

投稿画面を、下にスクロールしてください。

Blog thumnail none10

カスタムCSSをひらき、下記のコードを入力します。

今回した CSS の例↓

.pentry__thumnail {dsyplay: none;}

投稿画面の上までスクロールし、更新をクリックして保存しましょう。

これで、Wordpressで記事のアイキャッチを非表示にする方法の解説はおっわりです!

display: none;では、読み込んでしまう

Blog thumnail none11

CSSで非表示にする方法では、読み込みをとめることができません。

Google Chrome 検証機能の「Network」で、ネットワーク読み込みの状態がわかります。

つまり、表示されない無駄なネットワークが発生するため、読み込み速度が遅くなる可能性があります。

読み込まないようにするには、テンプレートを編集する必要があります。

難易度が高いため、私のように 1 つの記事だけアイキャッチ画像を消したい場合にかぎり使用するのがベストです。

visibility: hidden;では、アイキャッチ部分に空白がのこる

Blog thumnail none12

visibility: hidden;では、空白が残ってしまうため使えません。

  • visibility: hidden; → 非表示にする
  • display: none; → 要素も非表示にする

このような違いがあるため、アイキャッチ画像を非表示にする場合は、display: none;の方がいいかもしれません。

まとめ

記事のアイキャッチを非表示にする方法を、解説してきました。

CSS の「display: none;」を指定すれば、簡単に非表示することができます。

非表示にするだけなので、読み込みで速度低下してしまう場合もありますが、テンプレートをいじるよりも、手軽にデザインで整えることができます。

アイキャッチ画像を非表示にする必要はないのですが、1つのTIPSとしてシェアさせていただきました。

使用した WordPress テーマ:TCD WordPress テーマ「Bloom」

そのほか、ブログのカスタマイズなど、WEBデザインに関する記事はこちら↓

関連する記事

この記事のURLとタイトルをコピーする
記事へのお問い合わせ

サウンドオルビス

1,735,993 views

悩みからの解放宣言!!「音楽」と「テクノロジー」の悩みを解決するために、情報発信しています。現在「モバイルDTM」といえば、サウンドオルビス!!って言われるような記事をたくさん書いています。

プロフィール