記事のアイキャッチをCSSで非表示にする方法
「日産リーフまとめ | サウンドテック・ラボ」でカテゴリ一覧ページをつくるさいに、記事冒頭のアイキャッチを非表示にする必要がありました。
やり方はとても簡単なので、わかりやすい画像つきでメモしておきます。
というわけで今回は、WordPressで記事のアイキャッチを非表示にする方法を、解説していきます。
この記事の目次
WordPressブログ記事のアイキャッチを、非表示にする方法
WordPressのアイキャッチ画像を、CSS で非表示にするやり方を、解説していきます。
まずは、アイキャッチ画像の CSS クラス名を調べます。
アイキャッチ画像の上で、右クリックをし 検証をクリック。
検証ボタンを、クリック。
そのままアイキャッチ画像を、1回クリックしましょう。
アイキャッチ画像の HTML の IMG タグを、選択します。
画像だけではなく、アイキャッチ画像の親要素をふくめて非表示にします。
今回は DIV タグが親要素でした。
親要素の DIV をクリックします。
サイドバーに、クラス名が表示されました。
今回は「.pentry__thumnail」が、クラス名でした。
Chrome の機能を使って、画像のように試しに CSS を入力します。
display: none;アイキャッチが、非表示できたのを確認してください。
クラス名を、メモしておきましょう。
CSS に「disyplay: none;」を入力し、全記事のアイキャッチを削除
WordPress ダッシュボードをひらきます。
外観 → CSS編集をクリック
追加 CSS に、先ほどメモしたクラス名と非表示の CSS を記入します。
今回した CSS の例↓
.pentry__thumnail {dsyplay: none;}
最後に、公開をクリックしましょう。
「カスタムCSS」に「dsyplay: none;」を入力し、記事ごとアイキャッチを削除
個別の「投稿の編集」画面で、記事ごとにアイキャッチを非表示にできます。
投稿画面を、下にスクロールしてください。
カスタムCSSをひらき、下記のコードを入力します。
今回した CSS の例↓
.pentry__thumnail {dsyplay: none;}投稿画面の上までスクロールし、更新をクリックして保存しましょう。
これで、Wordpressで記事のアイキャッチを非表示にする方法の解説はおっわりです！
display: none;では、読み込んでしまう
CSSで非表示にする方法では、読み込みをとめることができません。
Google Chrome 検証機能の「Network」で、ネットワーク読み込みの状態がわかります。
つまり、表示されない無駄なネットワークが発生するため、読み込み速度が遅くなる可能性があります。
読み込まないようにするには、テンプレートを編集する必要があります。
難易度が高いため、私のように 1 つの記事だけアイキャッチ画像を消したい場合にかぎり使用するのがベストです。
visibility: hidden;では、空白が残ってしまうため使えません。
- visibility: hidden; → 非表示にする
- display: none; → 要素も非表示にする
このような違いがあるため、アイキャッチ画像を非表示にする場合は、display: none;の方がいいかもしれません。
まとめ
記事のアイキャッチを非表示にする方法を、解説してきました。
CSS の「display: none;」を指定すれば、簡単に非表示することができます。
非表示にするだけなので、読み込みで速度低下してしまう場合もありますが、テンプレートをいじるよりも、手軽にデザインで整えることができます。
アイキャッチ画像を非表示にする必要はないのですが、1つのTIPSとしてシェアさせていただきました。
使用した WordPress テーマ：TCD WordPress テーマ「Bloom」
そのほか、ブログのカスタマイズなど、WEBデザインに関する記事はこちら↓
