【Cocoon】初心者でもできる関連記事のおしゃれなカスタマイズ【コピペでOK】

こんにちは、yuji（@yuji_invest）です。
このブログでは、WordPressとアフィリエイトのノウハウについて詳しく解説しています。

ブログ初心者なりに、本文下の関連記事をおしゃれにデザインしたいです。

以上のような、ブログデザインについての要望にお答えします。

このブログではWordPressテーマのCocoonを使っていますが、本文下の関連記事は以下のようなデザインにしています。

このようにサムネイルとタイトルをバランスよく配置することで、記事を読み終えた読者からのクリックが期待できます。

この記事では、以上のようなCocoonの関連記事を簡単に再現できる方法を解説したので、参考にしていただけたらと思います。

※ブログ収益化を目指している方には、WordPress有料テーマの利用をおすすめしています。詳しくは以下の記事をご覧ください。
》【最新】SEOに強いおすすめWordPressテーマ16選

「WordPressのテーマはどれを使えばいい？」という方向けに、SEOに強いWordPressテーマ16選をまとめました。有料9個と無料7個のランキングで紹介しているので、是非役立てていただければと思います。

関連記事の設定方法
- 関連記事設定
- スタイルシートにコードをコピペする
「カスタマイズが上手くいかない…」と感じる方へ

関連記事の設定方法

Cocoon/ホワイトラーメンのデフォルトでは、このようなデザインになっています。

また、Cocoonの全体的な基本設定がまだの方は以下の記事をご覧ください。
》Cocoonおすすめの初期設定を解説

スタイルシートにコードをコピペする

１．「外観」から「テーマエディター」に進み「style.css」を開きます。

２．スタイルシートに以下のコードをコピペしてください。

✔スタイルシートに入力するときの注意点
・編集前に必ずスタイルシートのバックアップを取る
・編集するテーマが「CocoonChild」になっていることを確かめる
・「@charset “UTF-8”;」から始まる部分（最初から入力されている内容）は消さずに下に追記していく

/************************************
** 関連記事
************************************/
.e-card-title {
    font-weight: bold;
    color:#337AB7;
}
.related-entry-card-content {
    margin-left: 190px;
    margin-right: 5px;
}
a.related-entry-card-wrap.a-wrap.border-element.cf:hover{
    background-color: #fafafa;
    transform: none;
    transition: all 200ms;
}
.related-entry-card .cat-label{
    display:none;
}
@media screen and (max-width: 480px){
.related-entry-card-thumb {
    margin-right: 1em;
}
.e-card-title {
	font-size: 15px;
	line-height: 1.8;
}
article.related-entry-card.e-card.cf {
    margin-left: .5em;
    margin-right: .3em;
}
}

３．SNSシェアボタンのカスタマイズを入力していない場合は「MORE」部分のコードもコピペしてください。

.sns-share-message:before, .sns-follow-message:before, span.related-entry-main-heading.main-caption:before, .comment-title:before {
font-weight: normal;
letter-spacing:.4em;
border-radius:20px;
border: 0;
padding: 0.1em 4em;
background-color:#8b968d;
color:#fff;
}

４．コピペができたら「ファイルを更新」をクリックします。