【Cocoon】記事下の関連記事をおしゃれにカスタマイズする方法

どうもおはようポテト(@ohayoupoteto22)です。

神テーマCocoonを使っていて多くの方が思うことがこちら。

という方に向けて、「Cocoonで記事下の関連記事一覧をオシャレにカスタマイズする方法」をまとめました。

参考になれば幸いです⸝⸝- ̫ -⸝⸝

関連記事の完成イメージ

PCから見た場合

このようにアイキャッチ画像に立体感を出し角を丸め、記事間に線をつけることで見やすくしています。

「関連記事」という見出しもアイコンを付けオシャレに。

スマホで見た場合

スマホから見るとこんな感じに。

スマホだとどのカードタイプに設定しても１列で表示されます。

関連記事一覧のカスタマイズ手順

手順はいたってシンプルかつ簡単です。

Cocoonの記事下の関連記事をカスタマイズする方法

手順1：CSSをコピペ！

/************************************
** 記事下の関連記事
************************************/
/*見出し前にアイコンをつける*/
h2.related-entry-heading span:before {
  content: "";
  z-index: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-family: "Font Awesome 5 Free"!important;
  content: "f15c";
  color:#fff;
  background-color:#f8c678;/*お好みの色に*/
  display:inline-block;
  text-align: center;
 }
h2.related-entry-heading span{
  color:#999;
}
.related-entry-card-thumb img {
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.entry-card-title, .related-entry-card-title {
  color:#555;
}
.rect-mini-card .related-entry-card-wrap {
  border-bottom: 1px dashed #CCCCCC;/*区切り線*/
}
.related-entry-card .cat-label {
  display: none;/*カテゴリー非表示に*/
}

手順2：お好みの色に変える

コピペしたCSSの「お好みの色に」とあるところのカラーコードをお好みの色にしてください

手順3：カードタイプを変更する(任意)

本記事と同じ見栄えにするためには、「Cocoon設定」→「投稿」→「関連記事設定」から、カードタイプで「ミニカード」を選択します。

それ以外に設定した場合、当記事のCSSだと線が表示されない場合などがあるかもしれません。

「デフォルト」

「縦型カード3列」

「縦型カード4列」

…ブログ主的にはやはり「ミニカード」が一番見やすくオシャレかなぁと思います。

手順4：見出しの文字を変える

見出しの文字を変えたい時は「関連記事見出し」という項目の設定を変えてあげればOK。

以上でカスタマイズは終了です。

不具合が起こる場合の対処法

CSSの変更が反映されない

「あれ…?CSSが反映されないぞ…」となった場合は、キャッシュが原因であることが多いので以下の方法を試してみてください。

キャッシュ系プラグイン

「WP Fastest Cache」や「WP Super Cache」をはじめとしたキャッシュ系プラグインをお使いの方は、そちらの方でキャッシュを削除してください。

テーマのキャッシュを削除

「Cocoon設定」→「キャッシュ削除」にいき、キャッシュを削除してください。

アイキャッチ画像が見切れる

アイキャッチ画像が上のように見切れてしまう場合は、

このどちらかが原因だと思われますので、以下の記事を参考にしてみてください。

【知ってた?】Cocoonにおけるアイキャッチ画像の最適なサイズ

最後に

他にもいい感じのCocoonカスタマイズをまとめているのでぜひ。
【初心者でも簡単】Cocoonのおしゃれなカスタマイズ総まとめ

最後まで読んでいただきありがとうございました！では⸝⸝- ̫ -⸝⸝