【Cocoon】サイドバーのアーカイブをカスタマイズする方法【初心者向け】

2021年1月27日 2022年3月29日

今回は、Cocoonテーマでサイドバーのアーカイブをカスタマイズする方法を解説します。

1. Cocoonのアーカイブをカスタマイズする方法
2. 「カスタマイズが難しい…」という方へ

Cocoonのアーカイブをカスタマイズする方法

それでは、アーカイブを以下の4つのようにカスタマイズします。

サイドバーにアーカイブの追加&追従
ドロップダウンで表示
文字をカスタマイズ
上線&囲線を追加する

それではこの4つを順番に解説します。
是非参考にしてください。

サイドバーにアーカイブを表示する

まずは、サイドバーにアーカイブを表示しましょう。

やり方は簡単です。
まず、［外観➡︎ウィジェット］を開いてください。

下にスクロールし、［アーカイブ➡︎サイドバー➡︎ウィジェットを追加］の順でクリック。
すると、以下のような画面が追加されると思います。👇

ここに、タイトルや投稿数の表示を設定しましょう。
アーカイブを固定（スクロール追従）させたい方は［外観➡︎ウィジェット］を選択。

次に［アーカイブ➡︎サイドバースクロール追従➡︎ウィジェットを追加］の順でクリックしましょう。

あとは先ほどと同じように設定してください。
これで、サイドバーにアーカイブを追加する作業は完了です。

ドロップダウンで表示する

↑これは先程のアーカイブの設定画面です。

『ドロップダウンで表示』にチェックを入れると、以下のように表示されます。

なるべく短く表示したい方におすすめですね。
ただ、カスタマイズがしづらく、手間も増えるので個人的にはおすすめしません。

文字をカスタマイズする

続いて、アーカイブの文字をカスタマイズする方法を解説します。
まず、［外観➡︎テーマエディター］を開いてください。

style.cssを選択し、好きなとこに以下のコードを追加しましょう。（よくわからない方は一番下に追加）

.widget_archive ul li a{
font-size: 15px;/*文字の大きさ*/
font-weight: bold;/*文字の太さ*/
color: #666666;/*文字の色*/
letter-spacing: 0.1em;/*文字の間隔*/
line-height: 1.5;/*行の高さ*/
}

設定する必要がないところは削除してください。

上線&囲線を追加する

最後は、以下のような上線&囲線を追加する方法を解説します。

それでは、先ほどと同じように［外観➡︎テーマエディター］からstyle.cssを開きます。
好きな場所（もしくは一番下）に以下のコードを追加してください。

.widget_archive ul li a .post-count{/*アーカイブ記事数*/
border:1px solid #333333;/*囲線*/
border-radius: 5px;/*丸み*/
padding:1px 10px;/*囲いの大きさ*/
}

.widget_archive ul li{/*アーカイブ上線*/
padding-left: 10px; /*上線位置*/
border-top: 1px dotted #333333;/*上線の種類&色*/
}