見ていただきありがとうございます。ぽぽです。
Cocoonのサイドバーで、こんなところで止まっていませんか。
- カテゴリーが多すぎて、ずらっと長い
- なんとなく素人っぽく見える
- 調べても、どこを触ればいいのかイマイチわからない
※サイドバーは、記事の横（スマホでは下）に出る細い列のことです。
私も、ここで止まった側です。
スケートボードのブログはCocoonで書いています。
サイドバーのカテゴリーが多すぎて、減らしたかった。
Googleで調べたけど、結局イマイチわからず、妥協しました😇
先に答えを書いておくと、こうです。
| やりたいこと | Cocoonで |
|---|---|
| サイドバーを右・左に置く | |
| ページによってサイドバーを消す | |
| カテゴリーを減らして見せる | |
| サイドバーの見出しの形・色を変える |
ということで、私のサイドバーの実物から順に書いていきます。
- 過去の自分：Cocoonのサイドバーが素人っぽくて、直したかったけど妥協した
- いま：SWELLでブログ4年目（スケートボードのブログはCocoonのまま）
私のサイドバーには、カテゴリーが98個並んでいた
今回あらためて、スケートボードのブログを確かめてみます。
サイドバーにあるのは、この3つです。
- プロフィール
- 人気記事
- カテゴリー
問題は、カテゴリーのほう。
数えてみると、**カテゴリーは99個**ありました。
そのうち**98個**が、サイドバーにずらっと並んでいます。
中身を見ると、こんな感じです。
- 記事が1本だけのカテゴリーがほとんど（「夏」「時計」など）
- 「スケートボード」「トラック」は、同じ名前が2〜3個ある
原因は、記事を書くたびにカテゴリーを考えていたこと。
1本ごとに新しく作っていたら、99個になっていました😇
これでは、読む人も迷いますよね。
カテゴリーは、記事より先に決めておくのがラクです。
Cocoonの設定でできるのは「位置」と「出すページ」
Cocoon設定の画面で、サイドバーにかかわる項目はこの2つです。
最新のCocoonの中身を、公式の公開データで確かめています。
| 押す場所 | どうなるか |
|---|---|
| Cocoon設定 →「全体」タブ → サイドバーの位置 | 「サイドバー右」「サイドバー左」から選べる |
| Cocoon設定 →「全体」タブ → サイドバーの表示状態 | 全部のページで出す・全部で消す・投稿ページだけ消す、などから選べる |
置き場所と、出すページは決められます。
でも、中に何を並べるかは、ここでは決められないんですよね。
サイドバーの中身は「ウィジェット」で決める
サイドバーの中身は、WordPressの「ウィジェット」で決めます。
| 押す場所 | どうなるか |
|---|---|
| 外観 → ウィジェット | サイドバーに並べる部品を、足したり外したりできる |
Cocoonには、サイドバー用の部品がいくつか入っています。
- プロフィール
- 人気記事
- 新着記事
- ナビカード（自分で作ったメニューを、カードの形で並べる）
私がどうやって入れたかは覚えていません。
でも、サイドバーの中身はふつう、ここで決めます。
カテゴリーを減らして見せる方法は3つ
カテゴリーが多すぎるときの方法は、大きく3つあります。
| やり方 | 押す場所 | どうなるか |
|---|---|---|
| ① 1つの箱にたたむ | ウィジェットの「カテゴリー」→「ドロップダウンで表示」 | 長いリストが、押すと開く1つの箱になる |
| ② 見せたいものだけ選ぶ | 外観 → メニューで、カテゴリーを選んだメニューを作る → ウィジェットの「ナビカード」で表示 | 選んだカテゴリーだけが並ぶ |
| ③ カテゴリー自体を減らす | 投稿 → カテゴリー | 似たものをまとめる・使っていないものを消す |
①がいちばん手軽です。
チェックを1つ入れるだけで、98個の行列が1つの箱になります。
③は根本から直す方法です。
ただ、記事のつけ直しが必要になります。
カテゴリーを消すと、そこにしか入っていない記事は「未分類」などの初期のカテゴリーに移ります。
99個ある私には、正直かなり重い作業ですね。
サイドバーの見出しの形・色は、設定にない
サイドバーの見出し（「カテゴリー」などの文字）の形や色も、変えたくなるところです。
でも、Cocoon設定には見出しのデザインの項目がありません。
これは、記事の見出しと同じです。
色は「全体」タブのキーカラーで、ヘッダーなどとまとめて変わります。
形を変えるなら、スキンを選ぶか、CSSを書き足すかになります。
くわしくは、見出しの記事に書いています。
私が妥協した理由
当時の私は、Googleで調べました。
でも、結局イマイチわからず。
サイドバーだけでなく、全体的に妥協しています。
素人っぽいのはわかっていて、直したかったんですけどね。
今回調べ直すと、①はチェック1つです。
コードは、いりません。
いまのブログ（SWELL）のサイドバー
いまのブログは、SWELLで書いています。
サイドバーは、AIにも手伝ってもらって整えました。
私がおもに使っているのは、Claude Codeです。
並べているのは、この3つだけ。
- 検索
- 新着記事
- カテゴリー（ブログ運営の1つだけ）
カテゴリーは、いまは「ブログ運営」の1つだけです。
いまのサイドバーは、気に入っています。
CocoonとSWELLの画面の違いは、こちらで並べています。
SWELLを買うまで迷った話は、こちら。
ほかの場所のカスタマイズは、こちらにまとめています。
まとめ
- Cocoon設定でできるのは、サイドバーの「位置」と「出すページ」だけ
- 中身は「外観 → ウィジェット」で決める
- カテゴリーが多すぎるなら、まず「ドロップダウンで表示」で1つの箱にたためる
- 見せたいものだけなら、メニュー＋ナビカード
- 見出しの形・色は、設定にない（スキンかCSS）
- 私はカテゴリー98個のまま、妥協しています
Cocoonで止まっているなら、まずはチェック1つからで大丈夫ですよ。
コメント