...

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

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

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

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

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

ということで今回は

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

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

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

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

ブログ主

早速いってみよう!

 

関連記事一覧の完成イメージ

PCから見た場合

 

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

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

オシャ!

ソロモン

 

スマホで見た場合

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

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

ブログ主

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

 

カスタマイズ手順

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

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

 

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

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

ブログ主

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

 

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

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

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

ブログ主

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

「デフォルト」

 

「縦型カード3列」

 

「縦型カード4列」

 

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

 

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

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

以上でカスタマイズは終了です⸝⸝- ̫ -⸝⸝

お疲れ様!

ソロモン

 

CSSが反映されない場合

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

キャッシュ系プラグイン

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

 

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

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

 

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

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

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

設定が適切でない

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

Cocoonにおけるアイキャッチ画像の最適なサイズについてCocoonにおけるアイキャッチ画像の最適なサイズについて

 

最後に

以上となります。

滞在時間を伸ばすためにも関連記事の見栄えはいい感じにしておきたいですね…!

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

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA