[Cocoon2021]アイキャッチ画像を非表示にするCSSは?WordPress

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

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

『外観→テーマエディター→CSSエディター』や『外観→カスタマイズ→追加CSS』で編集すると記事のIDを調べる手間が増えます。

そしてエディターはできるだけすっきりさせておいたほうが良いと思うので(他にCSSエディターには他に書かなければいけないことがたくさんあり分かりづらくなる可能性があるので)、今回は別のところで設定する方法をご紹介します。簡単です!

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

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

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

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

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

例えばこんな感じです。

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

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

.eye-catch {
display: none;
}

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

投稿画面の下

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

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

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

投稿画面↓カスタムCSS

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

CSS記入できる状態

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

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

以下のようにします。

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

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

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

アイキャッチ画像非表示

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

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

設定は以上です。

耳寄り情報

エックスサーバーを使いながらドメインは『お名前.com』や『ムームードメイン』などを利用しているというかたへ

ドメインをエックスドメイン に変更すればエックスサーバーと一元管理できてとっても楽です。

Xサーバー、Xドメインの管理画面です。サーバーとドメインが同じ画面で管理できてすっきりします。ミニマリストさんにもおすすめです。

エックスサーバー、エックスドメイン管理画面

◆エックスドメインただいまキャンペーン中

2021年3月31日までの期間限定で.jp .com .net他8種類ドメインの移管料金が利用料込みでなんと1年間110円(税込み)になるキャンペーン中です。

出典:エックスドメイン
詳しくはこちら→エックスドメイン

◆エックスサーバー以外のサーバーを利用しているというかたへ

エックスサーバー では、2021年4月1日(18:00)まで

“ドメイン永久無料&初期費用0円キャンペーン”を実施中です。

なんとエックスサーバーでアカウントを取るとドメインが1つ無料でもらえます。そしてそのドメインはエックスサーバーと契約している限りずっと無料で使っていいというのです。

ドメインの移管でもこのキャンペーンの対象となるのでこの機会にサーバーとドメインをXサーバーで統一してみてはいかがでしょうか?初回10日間は無料でお試しできます。

わたしはキャンペーンの少し前にXサーバーにドメイン移管をしてしまいました…。みなさんはこの機会をお見逃しなく!

\エックスサーバーキャンペーン中/

さらに上を行くWordpressのテーマはこちら↓

【THE THOR(ザ・トール)】 の特徴
  • 圧倒的にSEOに強い
  • おしゃれで美しいデザイナーズサイトが簡単に作れる
  • アクセスUP収益UPを強力に後押しする「集客・収益化支援システム」を搭載
  • ランキングサイト・口コミサイトなどが簡単に作れる など
ブロガー専用WordPressテーマ「OPENCAGE」 の特徴
  • ブロガー向けのシンプルで高機能なテーマ
  • カスタマイズに時間をかける必要がない
  • 全てモバイルファーストでつくられているのでスマホで見た時のデザインが抜群

インターネット接続キャッシュバックでお得です↓

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