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

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

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

記事下の関連記事のとこ見やすくする方法ないかな?

ということで今回は

「Cocoonの記事下の関連記事をオシャレにカスタマイズしたい」

「目を惹くような関連記事一覧にしたい」

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

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

ブログ主

早速いってみよう！

お品書き

関連記事一覧の完成イメージ
- PCから見た場合
- スマホで見た場合
カスタマイズ手順
記事下の関連記事一覧をカスタマイズする方法
CSSが反映されない場合
- キャッシュ系プラグイン
- テーマのキャッシュを削除
アイキャッチ画像が見切れる場合
最後に

カスタマイズ手順

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

手順

step1

CSSをコピペ！

step2

お好みの色に変える

step3

カードタイプを変更する

step4

見出しの文字を変える(任意)

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

手順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;/*カテゴリー非表示に*/
}