【注意】このMASAa.netはWordPressテーマ Cocoonを使用しており、THE THORはZMASAa.blogで使用中です。クリックするとZMASAa.blogを開きます。
WordPressCocoon

【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の記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

……… THE THOR(ザ・トール)購入について ………
下記バナーからTHE THOR(ザ・トール)をご購入の方には、
当掲載のカスタマイズについて優先的にサポートさせて頂きます。

下記バナー経由でTHE THOR(ザ・トール)を購入した日付と時刻
を合わせてお問い合わせフォームからご連絡下さい。



気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
空島クロニクル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
MU:アークエンジェル
Cave Shooter
イース6オンライン
ザ・アンツ
リネージュ2M
クッキーランキングダム
ドラゴンとガールズ交響曲
魔剣伝説
パズにゃん
ブレイドエクスロード

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

MASAa.net

コメント