神テーマCocoonを使っていて多くの方が思うことがこちら。
くるみ
- 記事下の関連記事をオシャレにしたい
- いい感じの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カスタマイズをまとめているのでぜひ。
Cocoonのおしゃれなカスタマイズ全集【初心者もコピペで簡単】
最後まで読んでいただきありがとうございました！では⸝⸝- ̫ -⸝⸝
