ページごと(特定の記事ページで)にアイキャッチ画像を非表示にする ~worpress~

wordpressで
アイキャッチ画像を
「一覧にはサムネイルとして表示させたいけれど
記事の中には表示させたくない」という場合が何度かありました。

検索すると、方法はいろいろあるように思いますが
私にとって理解しやすかった方法を覚え書きとして。

wordpressはcssの知識がなくても既製のテーマをアレンジしている方もいるようなので
初心者向けの説明も含みます。

結論を先に言うと
これです
(画像はクリック拡大)

外観→テーマの編集で最初に表示されている
style.cssに追記します。
※スマホサイズなどサイズごとに分かれている場合があるので
一番下などがわかりやすいかと思います。

以下はどうしてこうなるかの解説です。

例1)
消したいページを右クリックでソース表示(「ctrl+U」でも同じ)
(図2 図3)
→ 

記事部分全体を囲っている段落(div)にページ名があります。

idかclassに該当のページidがあるので探してください。

cssでは、
idは、#
classは、.(ドット)
で、指定します

display:none;
で非表示

#post-xxx .eye-catch{display:none;}

このテーマですと、
id
class

両方設定があるので、どちらでも効きます
(「図3」赤で囲った①と緑で囲った「予」を使った場合↓)
図4

クラス名はテーマを設定した人がつけたものなので
テーマによって異なっています。

消えました
(図5、図6)

→ 

記事一覧(トップページやカテゴリーページ、関連ページ表示など)にはあります↓

違うサイトを
例2)にします

このサイトは、パーマリンク設定でpostのページ名が入らないことを選択していますが
※post名は編集中にアドレスバーに表示されています。

やり方は同じです
ソース表示でページの構成を確認し、
段落名とアイキャッチの指定部分を探してください。

  

このサイトの場合はidのみです

【注意】
例1と例2をよく見てください
クラス名は、テーマ作成者が任意につけたものなので、
例1)は、クラス名がeye-catchとハイフォンが入っていて
例2)のクラス名はeyecatchです

ダウンロードしたものを使っていると気づかないことがあるので
効かないなと思ったら、クラス名をよく見てみてください。

まとめ
効かない場合に考えられること

・クラス名とID名を間違えている
クラス名は=. IDなら=#

・クラス名のスペルミスなど
改行などをあまり余分に入れない
逆に、クラス名をべったりつけない空白をあける

・キャッシュクリア
キャッシュが残っていたり、またログインしたままだと確認できない場合があります
他のブラウザ、スマートフォンなどを使って確認してみてください。

スポンサーリンク
広告
広告

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
広告