Cocoonのカテゴリー（見出し、項目欄）とは
カテゴリーとは、ウィジェット欄に存在するジャンルを示すものです。
カテゴリー自体は見出し、項目とは全く関係はありません。
このページで指す、カテゴリーは一例で、カテゴリーやサイト内検索、新着記事の見出し、項目についての説明とご理解ください。
例えば、
- サイト内検索
- 人気記事
- 新着記事
これらのカテゴリー、ジャンルには見出し項目と呼ばれるものがジャンルの上に表記されています。
以下の例（サイト内検索）を見てみましょう。
このようにサイト内検索のバーの上にはサイト内検索を指す、見出し項目が付いています。
この項目のカスタマイズ方法を解説すると共に、サンプル例を公開します。
Font Awesome 5 を有効にする
Cocoonの設定より、Font Awesome 5を有効にする作業を行います。
順番としては以下の通りです。
- 左メニュー「Cocoon設定」をクリック
- タブ「全体」をクリック
- 項目「サイトアイコンフォント」の「Font Awesome 5」にチェックを入れる
最初は「Font Awesome 4」にチェックが入っています。項目「Font Awesome 5」にチェックを入れて変更しておきましょう。
以下のリンクでも解説しています。
見出し（項目）のソースコードの確認
見出し、項目をカスタマイズしたい場合には、カスタマイズしたいタグ、ID（アイディ）名、Class（クラス）名を知る必要があります。
これらを知る方法としてはウェブサイトを開いた状態で「F12」を押すことで、全体のソースコードを知ることができ、カスタマイズしたい箇所のID（アイディ）名、Class（クラス）名を見つける必要があります。
順序としては、
- 自分のウェブサイトを開く
- キーボードの「F12」を押す（全体のソースコードの表示）
以上の操作で全体のソースコードが表示されます。
次に、カスタマイズしたい箇所のタグ、ID（アイディ）名、Class（クラス）名を見つけます。
順序としては、
- カスタマイズしたい項目（文字）を右クリック
- ボタン「検証」をクリック
カスタマイズしたい項目を右クリックすると、コンテキストメニューが表示されます。
コンテキストメニューの中の「検証」をクリックすることでタグ、ID（アイディ）名、Class（クラス）名を見つけることができます。
以下は文字「サイト内検索」を右クリックした際の「検証」の結果です。
それぞれの意味は以下の通りです。
- 《h3》はタグ
- 《class》はクラス
- 《sidget-sidebar-title》はクラス名
- 《widget-title》はクラス名
以上により、文字「サイト内検索」のクラス名、タグは分かりました。
しかし、このままクラス名を指定してしてカスタマイズしてしまうと、このクラス名の全てにカスタマイズ結果が反映されてしまいます。
それを避けるためにより細かくソースコード（クラス、ID、タグ）を指定していきます。
細かく指定する上で必要なのは上下関係を示すこと。
例えば、
#search-5 h3{
}このソースコードだと《#search-5》IDの中の《h3》タグを示しています。
さて、また「サイト内検索」を右クリックして「検証」を押してみましょう。
すると、先程のソースコードの上に階層があることが分かります。
左右に段落がズレているような表記になっているはずです。
<aside id="〇〇〇-〇">ID（アイディ）○○の中に入っている、クラス、タグ○○と理解すれば良いと思います。
つまり、以下のソースコードは、
#search-5 h3{
}このソースコードは《#search-5》のタグ《h3》を指定していることになります。
見出し、項目を一つずつカスタマイズしたい場合には少しソースコードを遡って見てみましょう。
必ず階層があり、その始めは、番号、数字で区切られているため、この数字から順々に要素を指定することで一つの見出し、項目をカスタマイズすることができます。
クラス名、ID名の確認方法については以下のリンクでも解説しています。
サンプル例「シンプル・イズ・ベスト」
一つ目のサンプル例は「シンプル・イズ・ベスト」
サンプル（ソースコード）の前に画像で示すと、
まさに、シンプルイズベスト。Cocoonテーマなのに、Simplicityのような風貌が漂っています。
#search-5 h3{
background-color:white;
border-bottom:solid 2px black;
padding:8px;
}サンプル例「無類の芝生好き」
二つ目のサンプル例は「無類の芝生好き」
サンプル（ソースコード）の前に画像で示すと、
犬っころ好きにはたまりません。まるで、見出し項目が芝生を歩いているようです。
#search-5 h3{
background-color:white;
border-bottom:dotted 2px #00ff7f;
border-left:solid 5px #32cd32;
padding:8px;
}サンプル例「猫の国」
三つ目のサンプル例は「猫の国」
サンプル（ソースコード）の前に画像で示すと、
こっち向いた猫さん。見出しよりも猫が目立つにゃぁ。
#search-5 h3{
background-color:white;
border-bottom:dotted 2px #000000;
padding:5px;
}
#search-5 h3:before{
font-size:28px;
color:black;
margin-right:7px;
font-family: "Font Awesome 5 Free";
content: "\f6be";
}サンプル例「かすれ文字」
三つ目のサンプル例は「かすれ文字」
サンプル（ソースコード）の前に画像で示すと、
文字アイコン（青）に薄い青のかすれ文字。破線はノートの破線をイメージしました。青いペンを走らせてるとインクが切れかけ、急に文字がかすむ…、おしゃれじゃないの！
#search-5 h3{
color:#6495ed;
background-color:white;
border-bottom:dashed 2px #000000;
padding:2px;
}
#search-5 h3:before{
color:#0000ff;
margin-right:7px;
font-family: "Font Awesome 5 Free";
content: "\f5b7";
}見出し、項目のカスタマイズを楽しもう！
カテゴリー、ジャンルの見出し、項目のカスタマイズ方法を解説しました。
上記のソースコードはコピー＆ペーストで機能すると思います。ただし、Cocoon側の設定項目が欠けていれば機能しません。
また、機能しなくてもソースコードを参考として利用頂けると思います。
Cocoonのウィジェットの見出し、項目をカッコ良く、おしゃれにカスタマイズしてサイトを着飾ってみてはいかがでしょうか。
コメント