関連記事
「関連記事（関連記事の見出しを含む）」表示のカスタマイズについてまとめてみました。
関連記事の設定
「関連記事」の表示タイプは、デフォルトのエントリーカードから「ミニカード（表示数10）」に設定変更しています。
この「ミニカード（表示数10）」は、メタディスクリプションが表示されないタイトルとサムネイル画像表示となります。
「関連記事」の表示タイプの設定方法は、「Cocoon 設定」-「投稿」-「表示タイプ」から設定可能です。
この「ミニカード（表示数10）」の表示タイプに合わせたカスタマイズを行いたいと思います。
テーマCocoonの関連記事
WordPressテーマ Cocoonの「関連記事」表示のデフォルトは、このようになっています。
「記事関連の見出し」は、通常左側に位置する状態となっています。
（※今回のカスタマイズでは、サムネイル画像に対してシャドー及び角丸コーナーの対応は含まれていません。）
関連記事の見出しのカスタマイズ
今回「関連記事の見出し」をカスタマイズする内容は、
- 「関連記事」の表示タイプ「ミニカード」に合わせて、中央に「記事関連の見出し」を位置します。
- 小さいフォントが好みなのでフォントサイズ小さくします。
- 見出しの文字間隔を広げます。
- 「記事関連の見出し」の上下の空白を調整します。
の4点です。
カスタマイズ内容
「関連記事の見出し」のカスタマイズは、下記の通りです。
このカスタマイズ内容を「スタイルシート(style.css)」に追記します。
/************************************
** ■関連記事見出しカスタマイズ
************************************/
.related-entry-heading{
font-size: 22px; /*フォントサイズ*/
text-align: center; /*文字位置中央*/
letter-spacing: 4px; /*文字間隔*/
margin-top:40px; /*上余白*/
margin-bottom:8px; /*下余白*/
}
関連記事のカードとタイトルのカスタマイズ
「関連記事の見出し」に続いて、「関連記事のカードとタイトル」をカスタマイズします。
今回「関連記事のカードとタイトル」をカスタマイズする内容は、
- 「カード」の上下の空白を調整
- 「タイトル」を中央に位置します。
- フォントサイズを小さくします。
の3点です。
カスタマイズ内容
「関連記事のカードとタイトル」のカスタマイズは、下記の通りです。
このカスタマイズ内容を「スタイルシート(style.css)」に追記します。
/************************************
** ■関連記事カスタマイズ
************************************/
.related-entry-card-wrap.a-wrap.cf{ /*下余白クリア*/
margin-bottom:0px;
padding-bottom:0px;
}
.related-entry-card-content.card-content.e-card-content{ /*カード下余白設定*/
padding-bottom:16px;
}
.related-entry-card-title.card-title.e-card-title{
font-size: 16px; /*フォントサイズ*/
height: 67px!important; /*メニュー縦幅設定*/
display: flex;
align-items: center; /*縦中央寄せ*/
}
/* スマホでのフォントサイズと下余白 */
@media screen and (max-width: 480px){
.related-entry-card-title.card-title.e-card-title{
font-size: 14px;
}
.related-entry-card-content.card-content.e-card-content{
padding-bottom:0px;
}
}
カスタマイズ後の関連記事
上記2つのカスタマイズを行ったことで「関連記事（関連記事の見出しを含む）」はこのようになりました。
（※今回のカスタマイズでは、サムネイル画像に対してシャドー及び角丸コーナーの対応は含まれていません。）
最後に
「関連記事」表示については、記事の説明文まで必要無くカードとタイトルだけで十分だと思います。
また、「関連記事」表示は縦に長くなるよりも、コンパクトにまとめた方が記事を探しやすいと考えます。
なお、今回のカスタマイズでは、サムネイル画像に対してシャドー及び角丸コーナーの対応は含まれていませんが、別途「関連記事のサムネイル画像」のカスタマイズとしてエントリー記事をアップします。
コメント