【Cocoon】次の記事／前の記事をカスタマイズする

次の記事／前の記事

「次の記事／前の記事」表示のカスタマイズについてまとめてみました。

テーマ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; /*文字強調*/
  }
}

カスタマイズ後の次の記事／前の記事

今回のカスタマイズによって「次の記事／前の記事」は、フォントサイズが大きく強調したことで、設定枠に合ったフォントとなりました。

また、モバイル端末での表示設定では、これよりも小さいフォントサイズを採用しました。

最後に

「次の記事／前の記事」の上に表示される「関連記事」のフォントと同じになったことで、統一感が出たと思います。