次の記事／前の記事
「次の記事／前の記事」表示のカスタマイズについてまとめてみました。
テーマCocoonの次の記事／前の記事
WordPressテーマ Cocoonで使われている「次の記事／前の記事」は、次の様になっています。
枠が広く設定されてるのに対してフォントが小さいので、このフォントに対してカスタマイズしていきます。
次の記事／前の記事のカスタマイズ
今回のカスタマイズの内容は、
- フォントサイズの調整
- 文字強調
- 別途モバイル端末での表示設定
となります。
カスタマイズ内容
「次の記事／前の記事」のカスタマイズは、下記の通りです。
このカスタマイズ内容を「スタイルシート(style.css)」に追記します。
/************************************
** ■次の記事／前の記事のフォント
************************************/
.prev-post.a-wrap.cf,
.next-post.a-wrap.cf{
font-size: 16px; /*フォントサイズ*/
font-weight:bold; /*文字強調*/
}
/* スマホでのフォントサイズ */
@media screen and (max-width: 480px){
.prev-post.a-wrap.cf,
.next-post.a-wrap.cf{
font-size: 12px; /*フォントサイズ*/
font-weight:bold; /*文字強調*/
}
}
カスタマイズ後の次の記事／前の記事
今回のカスタマイズによって「次の記事／前の記事」は、フォントサイズが大きく強調したことで、設定枠に合ったフォントとなりました。
また、モバイル端末での表示設定では、これよりも小さいフォントサイズを採用しました。
最後に
「次の記事／前の記事」の上に表示される「関連記事」のフォントと同じになったことで、統一感が出たと思います。
コメント