ヒビラボでは、Cocoonをカスタマイズする方法やCSSコード（コピペ可）をまとめています。
Cocoonのカテゴリーとタグの作成・設定方法をまとめました。
カテゴリーとタグの分け方について
カテゴリーは大きな分類、タグはさらに細かな分類です。
カテゴリーとタグを分けるときは、以下のポイントがあります。
カテゴリーはできるだけ少なく絞る
カテゴリーはできるだけ少なく絞りましょう。
カテゴリーごとに１記事ずつ記事があるよりも、カテゴリー内に複数記事あるほうが管理しやすくさらに読者にもわかりやすくなります。
カテゴリーはできるだけ１記事に１つ
カテゴリーは１記事に複数つけられますが、できるだけ１つに絞るほうがいいです。
理由は、読者がブログを見たときに「あれ？この記事はさっきもあったぞ？」など混乱を招いて見にくいブログになるからです。
タグは１記事に複数つけて問題ない
タグは１記事に複数つけて問題ありません。
例えば、「漫画」というカテゴリーの１記事に「少女漫画」「恋愛」「SF」「完結済み」など複数のタグをつけても大丈夫です。
カテゴリーとタグで同じ内容のものは作らない
「漫画」のカテゴリーに「漫画」のタグをつけるのは重複しているのでやめましょう。
「漫画」のカテゴリーに「少女漫画」や「少年漫画」のタグをつけるといいです。
「少女漫画」の記事がとても多くなる場合は、「漫画」カテゴリーのサブ項目として「少女漫画」カテゴリーを作ってもいいです。しかし、途中でカテゴリーを変えるとSEOに影響することがあるので慎重に行いましょう。
SEOってなに？
簡単にいうと、検索エンジンに記事の価値が評価されるよう最適化させることだよ！
SEOの評価が良いとGoogleやYahooで検索したときに最初のほうに出るんだ。
「未分類」や「その他」などの曖昧な分類は避ける
「未分類」や「その他」などの曖昧な分類は避けましょう。
「未分類」や「その他」などの分類に何でも入れていると、ブログが見にくいうえにSEO的にも良くありません。
カテゴリーやタグの分け方は個性が出るね。
カテゴリーの作成方法
カテゴリーの作成方法を紹介します。
「未分類」のカテゴリーがあると、先ほどの分け方のポイントにも書いたようにブログが見にくいうえにSEO的にも良くありません。
「未分類」のカテゴリーを消すことはできないため、編集して別のカテゴリーとして再利用します。
さっそく作成してみよう！
- カテゴリーをはじめて作る、もしくは未分類がある場合
- カテゴリーを増やす場合
カテゴリーをはじめて作る、もしくは未分類がある場合
カテゴリーをはじめて作るもしくは未分類がある場合は、「未分類」カテゴリーを別のカテゴリーに変更します。
【投稿】→【カテゴリー】→未分類の下にある【編集】をクリック。
【名前】と【スラッグ】を入力します。
- 名前……表示される名前なのでわかりやすいもの（例：WEB制作）
- スラッグ……アドレスの一部になるので半角小文字の英数字とハイフンで入力する
スラッグとは、URLに使われる文字列です。
例：サイトアドレス.com/category/○○/ ←この○○の部分に設定したスラッグが入力されます。
スラッグは小文字アルファベットで入力してください。できれば短い英単語が良いです。
スラッグの設定はSEO評価にいい影響を与えるといわれています。後から変更した場合、検索エンジンの評価がリセットされたりエラーが出る原因になったりするので最初に設定しておきましょう。
他にも色々設定を入力する部分があるけど？
名前とスラッグさえあればとりあえず大丈夫だよ。
あとは必要になったときに設定しよう！
ページ最下部の【更新】をクリックして名前とスラッグが変更されたことを確認してください。
カテゴリーを増やす場合
カテゴリーを増やす場合は、「新規カテゴリーを追加」に入力します。
【名前】と【スラッグ】を入力して【新規カテゴリーを追加】をクリックしましょう。
右のカテゴリー一覧にカテゴリーが増えていきます。
タグの作成方法
タグは最初は何も作成されていないので、はじめから「新規タグを追加」に入力します。
【名前】と【スラッグ】を入力して【新規タグを追加】をクリックしましょう。
タグクラウドウィジェットの作成方法
タグクラウドウィジェットは、作成したタグをウィジェットで表示させます。
【外観】→【ウィジェット】→【タグクラウド】ウィジェットを表示したい場所にドラッグするか、選択して【ウィジェットを追加】をクリックします。
作成しているタグでも、実際に公開した記事に使用していないと表示されないよ！
カテゴリー・タグ・タグクラウドのCSSカスタマイズ
カテゴリー・タグ・タグクラウドのCSSカスタマイズを紹介します。
CSSは以下の場所に貼り付けてね！
【外観】→【カスタマイズ】→【追加CSS】に以下のコードを記述する。
カテゴリーウィジェットにアイコンをつける
カテゴリーウィジェットにアイコンをつけるには、Font Awesomeアイコンを使用する必要があります。
詳しい方法は「【Cocoon】Font Awesomeアイコンの使い方｜表示されない理由とカスタマイズ」のカテゴリーのFont Awesomeアイコン設定方法にまとめています。
投稿本文中のカテゴリー・タグのデザインをカスタマイズする
投稿本文中のカテゴリー・タグのデザインをカスタマイズする方法は以下のとおりです。
まずはカテゴリーのカスタマイズから。
/*投稿本文中カテゴリーのカスタマイズ*/
.entry-categories a {
border-radius: 0px; /*角の丸み*/
background-color: #8195a2; /*背景の色*/
color: #ffffff; /*アイコンと文字の色*/
}
/*投稿本文中カテゴリー：ホバー時のカスタマイズ*/
.entry-categories a:hover {
color: #ffffff; /*アイコンと文字の色*/
}次にタグのカスタマイズです。
/*投稿本文中タグのカスタマイズ*/
.entry-tags a {
border-radius: 0px; /*角の丸み*/
background-color: #ffffff; /*背景の色*/
color: #8195a2; /*アイコンと文字の色*/
}
/*投稿本文中タグ：ホバー時のカスタマイズ*/
.entry-tags a:hover {
color: #8195a2; /*アイコンと文字の色*/
}タグクラウドのデザインをカスタマイズする
タグクラウドのデザインをカスタマイズする方法は以下のとおりです。
/*タグクラウドのカスタマイズ*/
.tagcloud a{
border-radius: 0px; /*角の丸み*/
background-color: #ffffff; /*背景の色*/
color: #8195a2; /*アイコンと文字の色*/
}
/*タグクラウド：ホバー時のカスタマイズ*/
.tagcloud a:hover{
color: #8195a2; /*アイコンと文字の色*/
}カテゴリー・タグクラウドウィジェットのなどの見出しを変更する
カテゴリー・タグクラウドウィジェットのなどの見出しを変更する方法は、サイドバーとフッターで少しだけ異なります。
フッター見出しについては「【Cocoon】フッターカスタマイズ｜フッターの位置、見出し、ウィジェット」のフッターウィジェットの見出しデザインを変えるで紹介しています。
サイドバー見出しについては「【Cocoon】サイドバーカスタマイズ｜非表示設定、見出しデザイン、背景色変更など」のサイドバーウィジェットの見出しデザインを変えるで紹介しています。
