![](https://www.kamecompass.com/wp-content/uploads/2024/02/0-5.png)
「カテゴリーの設定方法は?」
「カテゴリーの順番を変えられる?」
「カテゴリーラベルを非表示にしたい」
この記事では、そんな方に向けて、Cocoonでカテゴリーの設定方法とおすすめの設置場所を解説します。
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
こんにちは、かめコンパスです!
この記事を読めば、カテゴリーを設定する方法はもちろん、
- おすすめの設置場所
- 順番を変える
- ラベルを非表示にする
などかんたんに理解できるようになります。
私も本記事の方法できれいにカテゴリー分けでき、ユーザーにとって利便性の高いブログに出来上がりました。
どこよりも分かりやすく書いている自信がありますので、ぜひ最後まで読んでマスターしてください!
また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。
![](https://www.kamecompass.com/wp-content/uploads/2024/04/a98b1120712ae2558c294773114e59b3-2.jpg)
![](https://www.kamecompass.com/wp-content/uploads/2024/04/a98b1120712ae2558c294773114e59b3-2.jpg)
さっそく本題に入りましょう。
当ブログ愛用のWordPressテーマ
\もっと早く乗り換えればよかった…/
使い心地バツグン、高機能でオシャレ!
Cocoonカテゴリーを設定する方法
Cocoonでカテゴリーを設定する方法は、下記の通りです。
WardPress管理画面で、投稿⇒カテゴリーの順にクリックする
![「投稿」、「カテゴリー」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-1-1-1.png)
![「投稿」、「カテゴリー」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-1-1-1.png)
表示されたページでカテゴリー設定する。
![表示されたページでカテゴリー設定している様子](https://www.kamecompass.com/wp-content/uploads/2024/02/1-1-2-1.png)
![表示されたページでカテゴリー設定している様子](https://www.kamecompass.com/wp-content/uploads/2024/02/1-1-2-1.png)
設定し終えたら、新規カテゴリーを追加をクリックする
![「新規カテゴリーを追加」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-1-3-1.png)
![「新規カテゴリーを追加」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-1-3-1.png)
カテゴリーの設定・作成完了!
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
さらに細かく設定したい場合は、次に進んでね
追加されたカテゴリーの編集をクリックする
![「編集」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-1-4-1.png)
![「編集」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-1-4-1.png)
表示されたページでカテゴリー設定する
![表示されたページでカテゴリー設定している様子](https://www.kamecompass.com/wp-content/uploads/2024/02/1-1-5-1.png)
![表示されたページでカテゴリー設定している様子](https://www.kamecompass.com/wp-content/uploads/2024/02/1-1-5-1.png)
設定し終えたら、更新をクリックする
![「更新」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-1-6-1.png)
![「更新」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-1-6-1.png)
カテゴリーの細かな設定完了!
カテゴリーで設定できる項目は、下記11つあります。
それぞれ詳しく解説します。
ラベル名を入力する
![](https://www.kamecompass.com/wp-content/uploads/2024/02/1-2-5.png)
![](https://www.kamecompass.com/wp-content/uploads/2024/02/1-2-5.png)
![「名前」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-2-1-2.png)
![「名前」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-2-1-2.png)
「名前」では、ラベルなどに表示されるカテゴリー名を決めれます。
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
名前はシンプルで分かりやすく!
URLの末尾を設定する
![](https://www.kamecompass.com/wp-content/uploads/2024/02/1-3-4.png)
![](https://www.kamecompass.com/wp-content/uploads/2024/02/1-3-4.png)
![「スラッグ」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-3-1-1.png)
![「スラッグ」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-3-1-1.png)
「スラッグ」では、URLの末尾を英数字とハイフンのみで設定できます。
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
URLは日本語NGだよ
カテゴリーの階層を指定する
![](https://www.kamecompass.com/wp-content/uploads/2024/02/1-4-3.png)
![](https://www.kamecompass.com/wp-content/uploads/2024/02/1-4-3.png)
![「親カテゴリー」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-4-1-1.png)
![「親カテゴリー」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-4-1-1.png)
「親カテゴリー」では、
- なし(=親カテゴリー)
- 作ったカテゴリー(=子カテゴリー)
の2つから選べます。
![親カテゴリーと子カテゴリーの違い説明](https://www.kamecompass.com/wp-content/uploads/2024/02/1-4-2-1.png)
![親カテゴリーと子カテゴリーの違い説明](https://www.kamecompass.com/wp-content/uploads/2024/02/1-4-2-1.png)
背景・文字色を変える
![](https://www.kamecompass.com/wp-content/uploads/2024/02/1-5-3.png)
![](https://www.kamecompass.com/wp-content/uploads/2024/02/1-5-3.png)
![「カテゴリー色」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-5-1-1.png)
![「カテゴリー色」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-5-1-1.png)
「カテゴリー色」では、
- 背景色
- 文字色
の2ヵ所を変更できます。
設定したい色が見つからない場合は、設定したい色のカラーコードを入力すると見つかります。
![カラーコードを入力する場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-5-2-1.png)
![カラーコードを入力する場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-5-2-1.png)
カラーコードで設定したい色を見つける方法は、下の記事を参考にしてください。
![](https://www.kamecompass.com/wp-content/uploads/2023/07/アイキャッチ画像-5.jpg)
![](https://www.kamecompass.com/wp-content/uploads/2023/07/アイキャッチ画像-5.jpg)
タイトルを決める
![](https://www.kamecompass.com/wp-content/uploads/2024/02/1-6-2.png)
![](https://www.kamecompass.com/wp-content/uploads/2024/02/1-6-2.png)
![「タイトル」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-6-1-1.png)
![「タイトル」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-6-1-1.png)
「タイトル」では、カテゴリーページのタイトルを決めれます。
![カテゴリーページのタイトルが表示される場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-6-2-1.png)
![カテゴリーページのタイトルが表示される場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-6-2-1.png)
カテゴリーページの説明文を書く
![](https://www.kamecompass.com/wp-content/uploads/2024/02/1-7-2.png)
![](https://www.kamecompass.com/wp-content/uploads/2024/02/1-7-2.png)
![「本文」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-7-1-1.png)
![「本文」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-7-1-1.png)
「本文」では、カテゴリーページの説明文を入力できます。
![カテゴリーページの本文が表示される場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-7-2-1.png)
![カテゴリーページの本文が表示される場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-7-2-1.png)
アイキャッチ画像を選ぶ
![](https://www.kamecompass.com/wp-content/uploads/2024/02/1-8.png)
![](https://www.kamecompass.com/wp-content/uploads/2024/02/1-8.png)
![「アイキャッチ」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-8-1.png)
![「アイキャッチ」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-8-1.png)
「アイキャッチ」では、カテゴリーページのタイトル下に表示する画像を設定できます。
![カテゴリーページのアイキャッチが表示される場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-8-2.png)
![カテゴリーページのアイキャッチが表示される場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-8-2.png)
メタディスクリプションを入力する
![](https://www.kamecompass.com/wp-content/uploads/2024/02/1-9.png)
![](https://www.kamecompass.com/wp-content/uploads/2024/02/1-9.png)
![「メタディスクリプション」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-9-1.png)
![「メタディスクリプション」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-9-1.png)
「メタディスクリプション」では、カテゴリーページの説明文を入力できます。
メタキーワードを入力する
![](https://www.kamecompass.com/wp-content/uploads/2024/02/1-10.png)
![](https://www.kamecompass.com/wp-content/uploads/2024/02/1-10.png)
![「メタキーワード」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-10-1.png)
![「メタキーワード」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-10-1.png)
「メタキーワード」では、どんなキーワードに関するカテゴリーなのか入力できます。
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
メタキーワードは未入力でOKだよ
メモを記す
![](https://www.kamecompass.com/wp-content/uploads/2024/02/1-11.png)
![](https://www.kamecompass.com/wp-content/uploads/2024/02/1-11.png)
![「説明」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-11-1.png)
![「説明」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-11-1.png)
「説明」では、カテゴリーページでメモしたいことを記します。
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
説明も未入力でOK!
インデックス設定する
![](https://www.kamecompass.com/wp-content/uploads/2024/02/1-12.png)
![](https://www.kamecompass.com/wp-content/uploads/2024/02/1-12.png)
![「noindex」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-12-1.png)
![「noindex」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-12-1.png)
「noindex」では、Googleなどの検索結果に表示させるかどうかを指定できます。
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
基本的にインデックスしないに✔しよう
Cocoonカテゴリーを設置する4つの場所
Cocoonでカテゴリーを設置する場所は、下記4つです。
それぞれ詳しく解説します。
トップページに設置する
![](https://www.kamecompass.com/wp-content/uploads/2024/02/2-1-9.png)
![](https://www.kamecompass.com/wp-content/uploads/2024/02/2-1-9.png)
![トップページにカテゴリーを設置できる場所](https://www.kamecompass.com/wp-content/uploads/2024/02/2-1-1-3.png)
![トップページにカテゴリーを設置できる場所](https://www.kamecompass.com/wp-content/uploads/2024/02/2-1-1-3.png)
トップページでは、下記5つの表示形式からカテゴリーを設置できます。
- 一覧(デフォルト)
- タブ一覧
- カテゴリーごと
- カテゴリーごと(2カラム)
- カテゴリーごと(3カラム)
![カテゴリーの表示形式「タブ一覧」](https://www.kamecompass.com/wp-content/uploads/2024/02/2-1-2-4.png)
![カテゴリーの表示形式「タブ一覧」](https://www.kamecompass.com/wp-content/uploads/2024/02/2-1-2-4.png)
![カテゴリーの表示形式「カテゴリーごと」](https://www.kamecompass.com/wp-content/uploads/2024/02/2-1-3-3.png)
![カテゴリーの表示形式「カテゴリーごと」](https://www.kamecompass.com/wp-content/uploads/2024/02/2-1-3-3.png)
![カテゴリーの表示形式「カテゴリーごと(2カラム)」](https://www.kamecompass.com/wp-content/uploads/2024/02/2-1-4-1.png)
![カテゴリーの表示形式「カテゴリーごと(2カラム)」](https://www.kamecompass.com/wp-content/uploads/2024/02/2-1-4-1.png)
![カテゴリーの表示形式「カテゴリーごと(3カラム)」](https://www.kamecompass.com/wp-content/uploads/2024/02/2-1-5-1.png)
![カテゴリーの表示形式「カテゴリーごと(3カラム)」](https://www.kamecompass.com/wp-content/uploads/2024/02/2-1-5-1.png)
トップページにカテゴリーを設置する方法は、下記の通りです。
WardPress管理画面で、Cocoon設定⇒インデックスの順にクリックする
![「Cocoon設定」、「インデックス」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/2-1-6.png)
![「Cocoon設定」、「インデックス」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/2-1-6.png)
変更をまとめて保存をクリックする
![「変更をまとめて保存」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/2-1-8.png)
![「変更をまとめて保存」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/2-1-8.png)
トップページにカテゴリーを設置完了!
サイドバーに設置する
![](https://www.kamecompass.com/wp-content/uploads/2024/02/2-2-11.png)
![](https://www.kamecompass.com/wp-content/uploads/2024/02/2-2-11.png)
![サイドバーにカテゴリーを設置できる場所](https://www.kamecompass.com/wp-content/uploads/2024/02/2-2-1-4.png)
![サイドバーにカテゴリーを設置できる場所](https://www.kamecompass.com/wp-content/uploads/2024/02/2-2-1-4.png)
サイドバーにカテゴリーを設置する方法は、下記の通りです。
WardPress管理画面で、外観⇒ウィジェットの順にクリックする
![「外観」、「ウィジェット」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/4-1-1-1.png)
![「外観」、「ウィジェット」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/4-1-1-1.png)
- 利用できるウィジェットにある「カテゴリー」をプルダウン
- サイドバーを選ぶ
- ウィジェットを追加をクリックする
![「カテゴリー」、「サイドバー」、「ウィジェットを追加」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/2-2-2-3.png)
![「カテゴリー」、「サイドバー」、「ウィジェットを追加」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/2-2-2-3.png)
サイドバーにカテゴリーを設置完了!
![サイドバーにカテゴリーを設置できた様子](https://www.kamecompass.com/wp-content/uploads/2024/02/2-2-3-2.png)
![サイドバーにカテゴリーを設置できた様子](https://www.kamecompass.com/wp-content/uploads/2024/02/2-2-3-2.png)
ヘッダーに設置する
![](https://www.kamecompass.com/wp-content/uploads/2024/02/2-3-5.png)
![](https://www.kamecompass.com/wp-content/uploads/2024/02/2-3-5.png)
![ヘッダーにカテゴリーを設置できる場所](https://www.kamecompass.com/wp-content/uploads/2024/02/2-3-1-2.png)
![ヘッダーにカテゴリーを設置できる場所](https://www.kamecompass.com/wp-content/uploads/2024/02/2-3-1-2.png)
ヘッダーにカテゴリーを設置する方法は、下記の通りです。
WardPress管理画面で、外観⇒メニューの順にクリックする
![「外観」、「メニュー」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/2-1-1.png)
![「外観」、「メニュー」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/2-1-1.png)
「新しいメニューを作成しましょう」をクリックする
![「新しいメニューを作成しましょう」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/2-1-2-1.png)
![「新しいメニューを作成しましょう」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/2-1-2-1.png)
- メニュー名を入力
- メニュー設定の「ヘッダーメニュー」に✔
- メニューを作成をクリックする
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
メニュー名は分かりやすいように「ヘッダー」でOK
![「メニュー名」、「ヘッダーメニュー」、「メニューを作成」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/3-1-1-3.png)
![「メニュー名」、「ヘッダーメニュー」、「メニューを作成」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/3-1-1-3.png)
- カテゴリーをプルダウン
- 設置したいカテゴリーに✔
- メニューに追加をクリックする
- メニューを保存をクリックする
![設置したいカテゴリーにチェックしている様子と、「メニューに追加」、「メニューを保存」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/2-3-3-1.png)
![設置したいカテゴリーにチェックしている様子と、「メニューに追加」、「メニューを保存」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/2-3-3-1.png)
ヘッダーにカテゴリーの設置完了!
ヘッダーをモバイルでも表示させたい!カスタマイズしたい!という人は、下の記事も見てください。
![](https://www.kamecompass.com/wp-content/uploads/2024/02/a98b1120712ae2558c294773114e59b3-4.jpg)
![](https://www.kamecompass.com/wp-content/uploads/2024/02/a98b1120712ae2558c294773114e59b3-4.jpg)
フッターに設置する
![](https://www.kamecompass.com/wp-content/uploads/2024/02/2-4-5.png)
![](https://www.kamecompass.com/wp-content/uploads/2024/02/2-4-5.png)
![フッターにカテゴリーを設置できる場所](https://www.kamecompass.com/wp-content/uploads/2024/02/2-3-2-2.png)
![フッターにカテゴリーを設置できる場所](https://www.kamecompass.com/wp-content/uploads/2024/02/2-3-2-2.png)
フッターにカテゴリーを設置する方法は、下記の通りです。
WordPress管理画面で、外観⇒ウィジェットの順にクリックする
![「外観」、「ウィジェット」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/4-1-1-1.png)
![「外観」、「ウィジェット」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/4-1-1-1.png)
- 利用できるウィジェットにある「カテゴリー」をプルダウン
- フッター左・中・右から選ぶ
- ウィジェットを追加をクリックする
![「カテゴリー」、「フッター左・中・右」、「ウィジェットを追加」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/2-4-1-2.png)
![「カテゴリー」、「フッター左・中・右」、「ウィジェットを追加」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/2-4-1-2.png)
フッターにカテゴリーを設置完了!
![フッターにカテゴリーを設置できた様子](https://www.kamecompass.com/wp-content/uploads/2024/02/2-4-2-2.png)
![フッターにカテゴリーを設置できた様子](https://www.kamecompass.com/wp-content/uploads/2024/02/2-4-2-2.png)
フッターをモバイルでも表示させたい!カスタマイズしたい!という人は、下の記事も見てください。
![](https://www.kamecompass.com/wp-content/uploads/2024/02/a98b1120712ae2558c294773114e59b3-3.jpg)
![](https://www.kamecompass.com/wp-content/uploads/2024/02/a98b1120712ae2558c294773114e59b3-3.jpg)
Cocoonカテゴリーの順番を変える方法
Cocoonでは、下記3つの場所に設置したカテゴリーの順番を変えれます。
それぞれ詳しく解説します。
「トップページ」編
![](https://www.kamecompass.com/wp-content/uploads/2024/02/3-1-5.png)
![](https://www.kamecompass.com/wp-content/uploads/2024/02/3-1-5.png)
トップページでカテゴリーの順番を変える方法は、下記の通りです。
WardPress管理画面で、投稿⇒カテゴリーの順にクリックする
![「投稿」、「カテゴリー」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-1-1-1.png)
![「投稿」、「カテゴリー」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/1-1-1-1.png)
カテゴリーIDを覚える
![カテゴリーIDを確認できる場所](https://www.kamecompass.com/wp-content/uploads/2024/02/3-1-1-5.png)
![カテゴリーIDを確認できる場所](https://www.kamecompass.com/wp-content/uploads/2024/02/3-1-1-5.png)
※IDの表示がない場合は、
- ページ上にある「表示オプション」をプルダウン
- IDに✔を入れる
- 適用をクリックする
![「表示オプション」、「ID」、「適用」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/3-1-2-3.png)
![「表示オプション」、「ID」、「適用」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/3-1-2-3.png)
これでカテゴリーIDが表示されます。
Cocoon設定⇒インデックスの順にクリックする
![「Cocoon設定」、「インデックス」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/2-1-6.png)
![「Cocoon設定」、「インデックス」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/2-1-6.png)
「カテゴリー表示の順番を変える場合はこちら」をクリックする
![「カテゴリー表示の順番を変える場合はこちら」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/3-1-3-2.png)
![「カテゴリー表示の順番を変える場合はこちら」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/3-1-3-2.png)
変更をまとめて保存をクリックする
![「変更をまとめて保存」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/2-1-8.png)
![「変更をまとめて保存」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/2-1-8.png)
トップページでカテゴリーの順番を変更できた!
「サイドバー」編
![](https://www.kamecompass.com/wp-content/uploads/2024/02/3-2-11.png)
![](https://www.kamecompass.com/wp-content/uploads/2024/02/3-2-11.png)
サイドバーでカテゴリーの順番を変える方法は、下記の通りです。
WardPress管理画面で、外観⇒ウィジェットの順にクリックする
![「外観」、「ウィジェット」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/4-1-1-1.png)
![「外観」、「ウィジェット」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/4-1-1-1.png)
サイドバーをプルダウンし、ドラック&ドロップでカテゴリーの順番を入れ替える
![ドラック&ドロップでカテゴリーの順番を入れ替えている様子](https://www.kamecompass.com/wp-content/uploads/2024/02/3-2-1-4.png)
![ドラック&ドロップでカテゴリーの順番を入れ替えている様子](https://www.kamecompass.com/wp-content/uploads/2024/02/3-2-1-4.png)
サイドバーでカテゴリーの順番を変更できた!
「ヘッダー」編
![](https://www.kamecompass.com/wp-content/uploads/2024/02/3-3-2.png)
![](https://www.kamecompass.com/wp-content/uploads/2024/02/3-3-2.png)
ヘッダーでカテゴリーの順番を変える方法は、下記の通りです。
WardPress管理画面で、外観⇒メニューの順にクリックする
![「外観」、「メニュー」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/2-1-1.png)
![「外観」、「メニュー」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/2-1-1.png)
メニューに追加されているカテゴリーを並び替えて、メニューを保存をクリックする
![カテゴリーを並び替えている様子と、「メニューを保存」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/3-3-2-1.png)
![カテゴリーを並び替えている様子と、「メニューを保存」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/3-3-2-1.png)
ヘッダーでカテゴリーの順番を変更できた!
Cocoonカテゴリーラベルを非表示にする方法
Cocoonでは、下記2つのページでカテゴリーラベルを非表示にできます。
それぞれ詳しく解説します。
投稿・固定ページで非表示にする
![](https://www.kamecompass.com/wp-content/uploads/2024/02/4-1.png)
![](https://www.kamecompass.com/wp-content/uploads/2024/02/4-1.png)
投稿・固定ページでカテゴリーラベルを非表示にする方法は、下記の通りです。
WardPress管理画面で、Cocoon設定⇒画像の順にクリックする
![「Cocoon設定」、「画像」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/2-1-6.png)
![「Cocoon設定」、「画像」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/2-1-6.png)
変更をまとめて保存をクリックする
![「変更をまとめて保存」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/2-3-5.png)
![「変更をまとめて保存」がある場所](https://www.kamecompass.com/wp-content/uploads/2023/10/2-3-5.png)
投稿・固定ページでカテゴリーラベルを非表示にできた!
トップページで非表示する
![](https://www.kamecompass.com/wp-content/uploads/2024/02/4-2.png)
![](https://www.kamecompass.com/wp-content/uploads/2024/02/4-2.png)
トップページでカテゴリーラベルを非表示にする方法は、下記の通りです。
WardPress管理画面で、外観⇒カスタムサイズの順にクリックする
![「外観」、「カスタマイズ」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/4-2-1-5.png)
![「外観」、「カスタマイズ」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/4-2-1-5.png)
追加CSSをクリックする
![「追加CSS」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/4-2-2-6.png)
![「追加CSS」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/4-2-2-6.png)
下記コードを入力し、公開をクリックする
.cat-label {
display: none;
}
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
コードをそのままコピペしてね!
![コードを入力する場所と、「公開」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/4-2-3-1.png)
![コードを入力する場所と、「公開」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/02/4-2-3-1.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
私はメモ帳に元のテキストを保存してます
トップページでカテゴリーラベルを非表示にできた!
当ブログ愛用「SWELL」はカテゴリーページをサイト型にできる!
当ブログでは、2024年4月からWordPressテーマ「SWELL
SWELLでは、カテゴリーページをトップページのようにサイト型へ変更することができます。
![当ブログのCocoonカテゴリーページ](https://www.kamecompass.com/wp-content/uploads/2024/06/SWELL1-7.png)
![当ブログのCocoonカテゴリーページ](https://www.kamecompass.com/wp-content/uploads/2024/06/SWELL1-7.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
通常は、記事が新着順に並んだブログ型だよ
以下は、ブログ型とサイト型の比較表です。
ブログ型 | サイト型 | |
---|---|---|
記事の並び順 | 新着順 | 自由 |
その他コンテンツの配置 | できない | できる |
デザイン性 | 低い | 高い |
SWELLのサイト型カテゴリーページは、
- 人気記事やおすすめ記事順で並べ替えたり
- 吹き出しや画像を挿入できたり
- 好きなようにデザインしたり
できます。
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
カスタマイズ性の高さがサイト型の特徴だよ
よりカスタマイズ性が高く、おしゃれなカテゴリーページを作りたい人に、SWELLもおすすめですよ。
\カテゴリーページをお好みでカスタマイズ!/
まとめ:カテゴリーを作成して利便性UP
今回は、Cocoonでカテゴリーの設定方法とおすすめの設置場所を紹介しました。
以下の記事では、カテゴリー以外のカスタマイズ方法も紹介しています。
![](https://www.kamecompass.com/wp-content/uploads/2024/04/a98b1120712ae2558c294773114e59b3-1.jpg)
![](https://www.kamecompass.com/wp-content/uploads/2024/04/a98b1120712ae2558c294773114e59b3-1.jpg)
また当ブログでは、Cocoonに関する記事をいくつか書いてます。
下のカテゴリーページにまとめていますので、のぞいてみてください。
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
ためになったという人は“コメント”してくれると嬉しいです!
コメント