【AFFINGER5】CSSでアーカイブのデザインをカスタマイズする

今回は、CSSをコピペしてAFFINGER5のアーカイブのデザインをカスタマイズする方法を解説します。

AFFINGER5のアーカイブをカスタマイズする

AFFINGER5のアーカイブは、月ごとに記事をまとめて表示できます。

今回は、このアーカイブのデザインをCSSでカスタマイズする方法を解説します。

AFFINGER5のCSSのコピペ場所

まず、AFFINGER5でCSSをコピペする場所を解説します。

最初に、WordPressの管理画面を開いてください。

次に『外観➡︎カスタマイズ➡︎CSS追加』を選択すると、以下のようになると思います。

ここに、今回紹介するCSSをコピペしましょう。

場所は1番下でOKです。

CSSをコピペしてアーカイブをカスタマイズする

アーカイブをカスタマイズするCSSを以下の3つに分けて解説します。

それでは順番に紹介します。

デザイン①：文字

まずは文字なのですが、設定したばかりだと以下のようなデザインになっていました。↓

『⭕️』の記事数を日付の隣に表示したい方は、以下のCSSをコピペしてください。

おそらくこのように表示されたと思います。

それでは、日付けと記事数をカスタマイズしましょう。

日付け

日付けをカスタマイズするCSSはまとめると以下のようになります。

こんな感じです。

文字の太さは、フォントの種類によってカスタマイズできないことがあるので注意してください。

記事数

続いて、記事数をカスタマイズするCSSは以下の通りです。

「padding」で余白を広くすることで、スッキリした印象になります。

文字のカスタマイズはこれで完了です。

デザイン②：背景&枠線

次は、背景と枠線です。

背景

まずは背景から。

このCSSをコピペすると、背景が白くなります。

おまけ

ちなみに、下記のCSSをコピペすれば余白を作れます。

枠線

続いて枠線です。

こんな感じになります。↓

枠線を加えると、まとまった印象になりますね。

ちなみに、影をつけたい場合は以下のCSSをコピペしましょう。

これも全然雰囲気が変わりますね。

デザイン③：ホバー時

最後は、ホバー時のデザインです。
マウスカーソルを重ねた時のデザインですね。

一応使えそうなCSSを全てまとめておきます。

どれか必要なのだけ切り抜いてください。

まとめ

今回は、CSSをコピペしてAFFINGER5のアーカイブのデザインをカスタマイズする方法について、以下の3つのデザインを解説しました。

満足していただけたら嬉しいです。

というわけで、今回はここまでです。
最後まで読んでいただきありがとうございました。