PR PR

アイキャッチ画像がない時にアイキャッチを表示する方法

スポンサーリンク
新着情報
2023.04.09
2023.04.06
2023.04.03
2023.03.19
スポンサーリンク
スポンサーリンク
Blogger

この記事は2023年3月19日の1年以上前に書かれたものです。現在は状況が異なる可能性がありますのでご注意ください。

記事内に広告が含まれています。

以前の記事ですが、FC2ブログやBloggerブログなどのアイキャッチ画像を設定できないブログサービスからWordPressに移行した場合、過去の記事についてはアイキャッチ画像がない記事の状態になります。

アイキャッチ画像がない場合後でプラグイン使わずアイキャッチ画像設定方法
アイキャッチ画像がない場合後でプラグイン使わずアイキャッチ画像設定方法
WordPressでアイキャッチ画像を設定していない過去の投稿記事に記事内の画像やあらかじめ設定しておいたアイキャッチ画像をプラグインを使わずに表示させる方法で.....

スポンサーリンク

上記記事内に参照先サイトにあるfunctionに記載する独自関数に少し手を加えたりしながらCocoonテーマのアイキャッチ画像表示のようにしました。

スポンサーリンク

Cocoonテーマにおいては、アイキャッチ画像がない場合にアイキャッチ画像を表示する方法として標準で備わっています。

Cocoonの設定にて、以下のように画像の設定欄で設定します。

次に、この画像のタブの下の方にいくとアイキャッチ画像の設定する部分があります。

このアイキャッチ画像設定の部分を上記のようにチェックします。
(最重要箇所は、一番下の「アイキャッチ自動設定を有効にする」にチェックを入れることです。その他の部分はご自分の趣味などに合わせてチェックしたり外していたりでアイキャッチ画像の位置や表示方法のされかたが変わります。)

そして、最後に「アイキャッチ自動設定を有効にする」にチェックを入れただけでも記事内に画像があればアイキャッチ画像として表示されますが、記事内に画像がまったくない場合には自分の意図するアイキャッチ画像が表示されません。(デフォルトの画像のno-image画像が表示されます。)

最下部にあるNOIMAGE設定にてNO IMAGE画像を自分好みの画像を選択して設定します。

ここの設定部分の最下部に、しっかりと「アイキャッチ画像が存在しない投稿・固定ページのサムネイルに利用される画像ファイル」と記載されています。ここで設定した画像が記事内に画像がない場合にアイキャッチ画像として表示されます。

この設定でこれからの投稿記事においては、自動的にアイキャッチ画像を設定し忘れた場合には最下部に設定した画像がアイキャッチ画像として表示されます。

ですが、他のアイキャッチ画像が設定できなかったFC2ブログやBloggerブログなどから移行した場合には、このままだと表示されません。

アイキャッチ画像が設定されていなかった記事にアイキャッチ画像を表示させるには、以下のcssを追加することで、表示されるようになります。

/*アイキャッチ画像非表示を表示させる方法のCSS*/
.eye-catch-wrap.display-none {
  display:flex;
}

You may choose to prevent this website from aggregating and analyzing the actions you take here. Doing so will protect your privacy, but will also prevent the owner from learning from your actions and creating a better experience for you and other users.

コメント

スポンサーリンク
タイトルとURLをコピーしました