PR AFFINGER6

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

2021年3月30日

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

こんな方におすすめ

  • AFFINGER5のアーカイブのデザインをカスタマイズしたい
  • CSSをコピペしてAFFINGER5のデザインをカスタマイズしたい

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

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

AFFINGER5のアーカイブをコピペする

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

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

AFFINGER5のCSSのコピペ場所

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

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

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

AFFINGER5でCSSをコピペする場所

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

場所は1番下でOKです。

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

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

カスタマイズするデザイン

  • 文字
  • 背景&枠線
  • ホバー時

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

デザイン①:文字

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

アーカイブの文字のデザイン

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

.widget_archive ul li a {
display: inline;
}

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

記事数の位置を変える

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

日付け

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

.widget_archive ul li a {
text-decoration: none;/*下のアンダーラインを無くす*/
font-size: 18px;/*文字の大きさ*/
color: #999 !important;/*文字色*/
font-family: '明朝体';/*フォントの種類*/
font-weight: bold;/*文字の太さ*/
}

こんな感じです。

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

記事数

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

#side aside .widget_archive ul li {
font-size: 18px;/*文字の大きさ*/
color: #999 !important;/*文字色*/
font-family: '明朝体';/*フォントの種類*/
font-weight: bold;/*文字の太さ*/
padding: 10px;/*余白*/
}

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

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

デザイン②:背景&枠線

次は、背景と枠線です。

背景

まずは背景から。

.widget_archive ul {
background: #fff;/*背景色*/
}

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

おまけ

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

.widget_archive ul  {
padding: 10px;
}

アーカイブデザインのおまけ

枠線

続いて枠線です。

.widget_archive ul  {
border: 1px solid #ccc;/*枠線の太さ、種類、色*/
}

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

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

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

.widget_archive ul  {
 box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%);/*影*/
}

アーカイブに影をつける

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

デザイン③:ホバー時

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

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

widget_archive ul li a:hover {
font-size: 18px;/*文字の大きさ*/
color: #999 !important;/*文字色*/
font-weight: bold;/*文字の太さ*/
text-decoration: underline;/*アンダーラインを表示する*/
}

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

まとめ

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

まとめ

  • 文字
  • 背景&枠線
  • ホバー時

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

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

おすすめ記事
【Cocoon】サイドバーの目次に現在位置を表示させる方法【コピペOK】
【Cocoon】サイドバーの目次に現在位置を表示する【コピペOK】

続きを見る

-AFFINGER6
-