(確認事項)このMASAa.netには【広告】【PR記事】が掲載されています。MASAa.netご利用の方はプライバシーポリシーをご確認下さい。
WordPress関連Cocoon

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

アイキャッチ画像 Cocoon
この記事は約2分で読めます。

【広告】

※ 本ページには【広告】が含まれています

次の記事/前の記事

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

テーマCocoonの次の記事/前の記事

WordPressテーマ Cocoonで使われている「次の記事/前の記事」は、次の様になっています。

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

枠が広く設定されてるのに対してフォントが小さいので、このフォントに対してカスタマイズしていきます。

次の記事/前の記事のカスタマイズ

今回のカスタマイズの内容は、

  • フォントサイズの調整
  • 文字強調
  • 別途モバイル端末での表示設定

となります。

カスタマイズ内容

「次の記事/前の記事」のカスタマイズは、下記の通りです。

このカスタマイズ内容を「スタイルシート(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; /*文字強調*/
  }
}

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

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

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

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

最後に

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

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

シェアする
※ 本ページ内には【広告】が含まれています

コメント

【広告】