どうもおはようポテト(@ohayoupoteto22)です。
神テーマCocoonを使っていて多くの方が思うことがこちら。
記事下の関連記事のとこ見やすくする方法ないかな?
ということで今回は
「Cocoonの記事下の関連記事をオシャレにカスタマイズしたい」
「目を惹くような関連記事一覧にしたい」
という方に向けて「Cocoonで記事下の関連記事一覧をオシャレにカスタマイズする方法」をまとめました。
参考になれば幸いです⸝⸝- ̫ -⸝⸝
ブログ主
お品書き
関連記事一覧の完成イメージ
PCから見た場合
このようにアイキャッチ画像に立体感を出し角を丸め、記事間に線をつけることで見やすくしています。
「関連記事」という見出しもアイコンを付けオシャレに。
くるみ
スマホで見た場合
スマホから見るとこんな感じに。
スマホだとどのカードタイプに設定しても１列で表示されます。
ブログ主
関連記事一覧のカスタマイズ手順
手順はいたってシンプルかつ簡単です。
記事下の関連記事一覧をカスタマイズする方法
手順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におけるアイキャッチ画像の最適なサイズについて最後に
以上となります。
滞在時間を伸ばすためにも関連記事の見栄えはいい感じにしておきたいですね…！
最後まで読んでいただきありがとうございました！では⸝⸝- ̫ -⸝⸝
