WordPressCocoon

【WordPress】関連記事のサムネイル画像をカスタマイズする

アイキャッチ画像 Cocoon
スポンサーリンク

関連記事のサムネイル画像

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

コメント