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

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

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

関連記事の設定

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

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

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

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

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

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

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

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

の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】関連記事をカスタマイズする』と合わせて読んで頂ければ幸いです。