【2020年】アイキャッチ画像を非表示にするCSSは?WordPressコクーン使用

ワードプレスタブレット ワードプレスCocoon

はじめに… 一番簡単な方法かと思います

『外観→テーマエディター→CSSエディター』や『外観→カスタマイズ→追加CSS』で編集すると記事のIDを調べる手間が増えます。そしてエディターはできるだけすっきりさせておいたほうが良いと思うので(他にCSSエディターには他に書かなければいけないことがたくさんあり分かりづらくなる可能性があるので)、今回は別のところで設定する方法をご紹介します。簡単です!

アイキャッチ画像が不要なページとは

サイト型(ホームページ風)のトップページなどにはアイキャッチ画像は必要ないですよね。そういったときに役立つ方法です。

記事作成画面の“アイキャッチ画像を設定”で設定しなければいいだけじゃないの?

アイキャッチ画像を設定しないと…

その方がさらに簡単ですが(笑)、例えばそのページを他のページでリンクさせたい(紹介したい)時に【NO IMAGE】になってしまいます。

例えばこんな感じです。

アイキャッチ画像を設定しないでリンクさせたとき

アイキャッチ画像を非表示にするCSSはこちら!

.eye-catch {
display: none;
}

アイキャッチ画像を非表示にするCSSを貼りつける場所

投稿画面の下

アイキャッチ画像を非表示にしたい投稿画面の

ワードプレスCocoon新規投稿画面

一番下に『カスタムCSS』と書かれているところがあります。記入できる状態になっていない時は右の『▼』をクリックしてください。

投稿画面↓カスタムCSS

記入できる状態になりました。

CSS記入できる状態

こちらに先ほどのCSSをコピーして貼り付けます。

アイキャッチ画像非表示CSSの貼り付け

以下のようにします。

実際にアイキャッチ画像を非表示にしてみます

アイキャッチ画像非表示CSSなし(通常の場合)

アイキャッチ画像非表示CSSあり

めでたくアイキャッチ画像が非表示になりました!

設定は以上です!

タイトルとURLをコピーしました