【お知らせ】このサイトではWordPressテーマ Cocoonを採用しています。THE THORのカスタマイズ状況についてはZMASAa.blogをご参照下さい。
WordPress関連Cocoon

【Cocoon】関連記事のアイキャッチ画像をカスタマイズする

アイキャッチ画像 Cocoon
この記事は約2分で読めます。
スポンサーリンク

関連記事のアイキャッチ画像

エントリー記事『【WordPress】関連記事をカスタマイズする』の中でも書きましたが、今回「関連記事」カスタマイズの続きとして、「関連記事のアイキャッチ画像」のカスタマイズについてまとめてみました。

関連記事の設定

今回は「関連記事のアイキャッチ画像」のカスタマイズについてなので、「関連記事」の表示タイプ設定は特に関係ありません。

一応自分の場合は、メタディスクリプションが表示されないタイトルとアイキャッチ画像表示の「ミニカード(表示数10)」の表示タイプに設定しています。

「関連記事」の表示タイプの設定方法は、「Cocoon 設定」-「投稿」-「表示タイプ」から設定可能です。

テーマCocoonの関連記事のアイキャッチ画像

WordPressテーマ Cocoonの「関連記事のアイキャッチ画像」表示のデフォルトは、このようにシンプルなアイキャッチ画像となっています。

【WordPress】関連記事のアイキャッチ画像をカスタマイズする

関連記事のアイキャッチ画像のカスタマイズ

今回「関連記事のアイキャッチ画像」をカスタマイズする内容は、

  • 関連記事のアイキャッチ画像にシャドー(影)を付ける
  • 関連記事のアイキャッチ画像を角丸コーナーにする

の2点です。

カスタマイズ内容

「関連記事の見出し」のカスタマイズは、下記の通りです。

このカスタマイズ内容を「スタイルシート(style.css)」に追記します。

/************************************
** ■関連記事のアイキャッチ画像カスタマイズ
************************************/
.related-entry-card-thumb-image.card-thumb-image.wp-post-image{
  border-radius: 4px!important;/*角丸コーナー*/
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.3)!important;/*シャドー*/
}

カスタマイズ後の関連記事のアイキャッチ画像

今回のカスタマイズを行ったことで「関連記事のアイキャッチ画像」は、このように立体感の有るアイキャッチ画像になりました。

【WordPress】関連記事のアイキャッチ画像をカスタマイズする

最後に

今回の「関連記事のアイキャッチ画像」のカスタマイズによって、エントリー記事『【WordPress】関連記事をカスタマイズする』を含めて「関連記事」に関するカスタマイズは完了しました。

エントリー記事『【WordPress】関連記事をカスタマイズする』と合わせて読んで頂ければ幸いです。

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

おすすめWordPressテーマ!
WordPressテーマ WING(AFFINGER6)
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver

下記バナーからスマホゲームのインストールお願いします!
アルケミストガーデン
最強でんでん
れじぇくろ! ~レジェンド・クローバー~
イース6 オンライン〜ナピシュテムの匣〜
黒い砂漠 MOBILE
グランドサマナーズ
ロードモバイル
駅メモ!-ステーションメモリーズ!

オンラインくじ引き
オンラインくじ引き INAKUJI(いなくじ)INABA.TECH
MASAa.net

コメント