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

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

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

くるみ

記事下の関連記事のとこをいい感じにしたいんだぞ
ということで今回は

  • 記事下の関連記事をオシャレにしたい
  • いい感じのCocoonカスタマイズを探している

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

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

関連記事の完成イメージ

PCから見た場合

Cocoonの関連記事の完成イメージ(PCver)

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

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

オシャ!

くるみ

スマホで見た場合

Cocoonの関連記事の完成イメージ(スマホver)

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

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

ブログ主

ということで実際にカスタマイズしてみよう

カスタマイズ手順

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

手順
step1
CSSをコピペ!
step2
お好みの色に変える
step3
カードタイプを変更する
step4
見出しの文字を変える(任意)

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の「お好みの色に」とあるところのカラーコードをお好みの色にしてください

ブログ主

いい感じの色が思い浮かばない時は以下の記事が参考になります。
参考 配色パターン見本40選:ベストな色の組み合わせを探せるツールサルワカ

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

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

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

ブログ主

「ミニカード」以外のタイプがどんな感じか一応見てみよう

「デフォルト」

「縦型カード3列」

「縦型カード4列」

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

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

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

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

お疲れ様!

くるみ

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

CSSの変更が反映されない

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

キャッシュ系プラグイン

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

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

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

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

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

  • 画像そのもののサイズが適切でない
  • 設定が適切でない

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

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

最後に

以上、Cocoonの記事下の関連記事をおしゃれにカスタマイズする方法でした。

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

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

コメントを残す

この記事を書いた人
おはようポテトのプロフィール画像
おはようポテト

22年4月から自社開発企業のWebエンジニアとして働く大学生。このサイトでは主にプログラミングやWordPressカスタマイズについて発信しています。他に運営しているのは宅配冷凍弁当の特化ブログなど。お問い合わせはこちらよりどうぞ。