【Cocoon】初心者向け カテゴリーとカテゴリーラベルの設定方法

Cocoon カテゴリーの設定方法 Cocoon

こんにちは、ikuzo(いくぞう)です。

今回はCocoonのカテゴリー、およびカテゴリーラベルの設定方法を解説します。

 

なぜカテゴリーを作る必要があるのかというと、

記事を分類・整理してサイトに来てくれた読者が記事を探しやすくするためですね。

 

今回は例として、親と子のカテゴリーをこんな感じで作ってみたいと思います。

親カテゴリーと子カテゴリー

スポンサーリンク

親カテゴリーを作る

まずは、親カテゴリーを作りしょう。

WordPressのダッシュボードから「投稿」→「カテゴリー」をクリック。

WordPressのダッシュボードから「投稿」→「カテゴリー」をクリック

親カテゴリーは「果物」と「野菜」の2つを作ります。

名前に1つめの「果物」と入力して

カテゴリーの名前に「果物」と入力

スラッグには、英語の「fruit」(フルーツ)と入力します。

スラッグに「fruit」と入力した

絶対に「fruit」にしなくてはいけないわけではありませんが、

スラッグはカテゴリー名に関連する半角英数字を使った英語表記にするのが一般的です。

 

プー太郎
プー太郎

スラッグって、なぁに?

スラッグとは、URLの一番最後の部分です。

CocoonのカテゴリーURLはこんなふうに表記されます。

CocoonのカテゴリーのURLとスラッグ

これだとURLを見ただけで何を表示しているのか、一目で分かりますよね。

 

「果物」自体が親なので、親カテゴリーは指定を「なし」にして、説明の欄も特に記入する必要はありません

これで「新規カテゴリーを追加」を押します。

「新規カテゴリーを追加」を押す

カテゴリーの1つめに「果物」ができました。

「果物」のカテゴリーができた

同じように「野菜」の親カテゴリーを作ります。

「野菜」カテゴリーを作る

「果物」と「野菜」、2つの親カテゴリーの出来上がりです。

「果物」と「野菜」の親カテゴリーができた

スポンサーリンク

子カテゴリーを作る

子カテゴリーも、親と同じように「名前」と「スラッグ」を入力して、今度は親を指定します。

「子カテゴリー」を作る

プー太郎
プー太郎

「親」を指定すれば「子」になるんだね。

子カテゴリーは、こんなふうに名前の前に「ー」がついて、親よりも一段下がった状態で表示されます。

子カテゴリーは親よりも一段下がった状態で表示される

「果物」の子カテゴリーに「りんご」と「みかん」を、

「野菜」の子カテゴリーに「レタス」と「きゅうり」を作りました。

親カテゴリー2つと、子カテゴリー4つが完成

プー太郎
プー太郎

無理に「子カテゴリー」を作る必要はないよ。親だけでもいいからね。

カテゴリーの削除

作ったけど「やっぱりいらない」というカテゴリーは削除できます。

カテゴリー一覧には一見、何もありませんが

メニューのないカテゴリー一覧

マウスオーバー(カーソルをのせる)するとメニューが出現します。

マウスオーバーでメニューが出てくる

「削除」を押すと確認ダイアログが出るので、削除してよければ「OK」を押します。

確認ダイアログの「OK」を押す

複数のカテゴリーをいっぺんに削除するには

削除したいもの全てに チェックを入れて、一括操作から「削除」→「適用」を押します。

削除したいもの全てにチェックを入れて、「削除」→「適用」を押す

こちらは確認ダイアログが出ずに、「適用」を押したらすぐにカテゴリーが消えるのでご注意を。

スポンサーリンク

カテゴリー別にラベルの色を設定する

Cocoonは、アイキャッチの左上にカテゴリーラベルが表示されています。

アイキャッチの左上に表示されているカテゴリーラベル

デフォルトはすべて同じ色ですが、これをカテゴリーごとに色分けしてみましょう。

 

色を指定したいカテゴリーの「編集」を押します。

色を指定したいカテゴリーの「編集」を押す

カテゴリ色の「背景色」と「文字色」を指定します。

カテゴリ色の「背景色」と「文字色」を決める

色は「#6桁」のカラーコードを入力するか、実際の色から選びます。

赤のカラーコード「#ff0000」を入れてみました。

「#6桁」のカラーコードを指定するか、カラーサンプルから見て選ぶ

プー太郎
プー太郎

カラーコードの“#”と英数字は半角を使ってね。

カラーコードはカラーコード表か、HTMLカラーコードが役に立つと思います。

文字色は指定しないと「白」になります。

設定が完了したら一番下の「更新」を押して下さい。

これでラベルの色が変わりました。

ラベルの色が「赤」になったアイキャッチ画像

他のカテゴリーラベルも色を変えてみました。

それぞれのカテゴリーラベルの色を変更した

カテゴリーラベルを消す方法

アイキャッチにカテゴリーラベルを表示させない方法

Cocoon設定の「投稿」タブ→「アイキャッチラベルを表示する」のチェックを外します。

「アイキャッチラベルを表示する」のチェックを外す

プー太郎
プー太郎

設定したら「変更をまとめて保存」を押すのを忘れないでね。

 

アイキャッチのカテゴリーラベルはこれで消せますが、

トップページの記事一覧などのカテゴリーラベルは、この設定では消えません。

カテゴリーラベルを全て消す方法は、以下のCSSを使います。

/* カテゴリーラベルを非表示 */
.cat-label {
display: none;
}
プー太郎
プー太郎

これで全てのカテゴリーラベルが消えるよ。

 

設定方法は、WordPressダッシュボードの「外観」→「テーマエディター」をクリック。

WordPressダッシュボードの「外観」→「テーマエディター」をクリック

初めて「テーマエディター」をクリックすると“注意!”というダイアログが表示されるので、「理解しました」をクリックして下さい。

編集するテーマは「Cocoon Child」を選択して下さい。

CSSの編集画面 編集するテーマは「Cocoon Child」

「子テーマ用のスタイルを書く」という欄があるので、そこに先ほどのCSSをコピーして貼り付けます。

スタイルシートにCSSを貼り付け

一番下にある「ファイルを更新」を押せば

「ファイルを更新」を押す

これでトップページなどのカテゴリーラベルは全て消えているはずです。

カテゴリーラベルが消えた画像一覧

最後に

おつかれさまでした。

せっかくカテゴリーができたので、

次はカテゴリーを使った「グローバルナビメニュー」や「トップページ」の設定もしてみましょう。

【Cocoon】グローバルナビメニューの設定方法とカスタマイズ
【Cocoon】新しいトップページの設定方法とカスタマイズ

 

本日は最後まで読んでいただき、ありがとうございました。

Cocoon
スポンサーリンク
ikuzoblog

コメント