ブログ

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

2021年1月27日

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

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

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

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

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

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

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

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

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

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

Cocoonのアーカイブの設定

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

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

サイドバースクロール追従する

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

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

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

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

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

アーカイブをドロップダウンで表示

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

文字をカスタマイズする

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

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;/*上線の種類&色*/
}

「カスタマイズが難しい…」という方へ

「カスタマイズが難しい…」という方へ

Cocoonはカスタマイズが必要なので、エラーの対処やCSSの学習しなければいけません。「Cocoonでは収益化は難しいな…」という印象です。

僕もCocoonのWEBデザインに3ヶ月ほどかかってしまい、収益化まで遠回りしてしまいました。

そこで、「カスタマイズが難しい…」という方はAFFINGER6の導入がオススメです。僕もAFFINGER6でサイトを運営しており、13歳で月収5桁を達成しました。

AFFINGER6は、それなりに稼ぐアフィリエイターから大人気のテーマなので、詳しくチェックしておきましょう。

参考:CocoonとAFFINGER6を比較

【比較】稼ぎたいならCocoonよりAFFINGER5がおすすめな理由
【比較】なぜCocoonよりAFFINGER6の方が収益化しやすいの?【移行すべき理由】

続きを見る

「収益化するにはCocoonでいいの?」という方は、以下の記事で「僕が有料テーマをオススメする理由」をすべて解説しているので、参考にしてください。

参考:Cocoonで収益化できない理由

【事実】Cocoonで収益化できない本当の理由【解決策あり】

続きを見る

-ブログ
-