Cocoon－カテゴリーページのタイトルに付くアイコンの変更ともろもろカスタマイズ

メニューバーなどに設置されたカテゴリーページを開くと、そのカテゴリーに属する記事が表示されます。

そして、ページの一番上に、
カテゴリー名がデーンと表示されているのではないでしょうか。

今回は、この「カテゴリーページのタイトル」を

• タイトルの位置を変える
• フォルダーのアイコンを変える
• その他もろもろ

地味に変更していきたいと思います。

カテゴリーページのタイトルを変更する

タイトルの文字を変える

そもそもカテゴリーページのタイトルとは？
的な話になりますが…

このタイトルの文字は、カテゴリー設定が反映されます。

カテゴリタイトルに入力すると、ここに入力した文字が表示、
何も書いていない場合は、カテゴリー名が表示されます。

文字を変えたいときは、カテゴリー設定から変更しましょう。

タイトルの位置を変える

タイトルの位置を変更します。

 .archive-title {
text-align:center; /*タイトルを真ん中に*/
}

タイトルのサイズや太さを変更する

タイトル文字の大きさを変更します。

ついでに文字の太さも記載しておきます。不要な場合は削除してください。
デフォルトでは「bold」なので「normal」で指定しています。

 .archive-title {
 font-size:1.2em; /*大きさ*/
 font-weight:normal; /*文字の太さ*/
}

文字の太さを変更する「font-weight」は、数値で表すこともできます。

font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400; /*normal*/
font-weight: 500;
font-weight: 600;
font-weight: 700; /*bold*/
font-weight: 800;
font-weight: 900;

アイコンを変更する

フォルダー柄のアイコンを変更します。

お好きなアイコンを「Font Awesome」から拝借してきます。

Font Awesome

The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

fontawesome.com

使いたいアイコンがあったら、該当のユニコードをコピーします。

.archive-title .fa-folder-open:before{
content:"\f02e"; /*アイコン*/
color:#FFAAA7; /*アイコンの色*/
}

アイコンのユニコードをスタイルシートに入力するときは、コピーした「f02e」の前に「\」をくっつけます。

\f02e

￥って書いたのに＼になってまうがな！
って場合も大丈夫です。

アイコンのサイズを大きくする

アイコンのサイズを大きくしたい場合も、
文字の大きさを大きくする要領と同じ。

.archive-title .fa-folder-open:before{
content:"\f57f";
color:#FFAAA7;
font-size:3em; /*アイコンの大きさ*/
}

分かりやすいように「３em」とビッグサイズにしてみました。
お好きな大きさに変更してくださいね。

アイコンを非表示にする

横にひっついてるアイコンを消してしまいたい、
という場合のコードです。

.archive-title .fa-folder-open:before{
display:none;
}

カテゴリ本文のカスタマイズ

カテゴリ本文は、編集の際に投稿と同じように好きなように装飾できるので、そちらでカスタマイズしたほうが分かりやすいと思いますが、

CSSで本文を真ん中寄せと空白だけ入れてみました。

.category-page-content{
text-align:center;
padding-bottom:2em;
}

まとめ

カテゴリーページのタイトルのアイコンを変更するのが今回の目的なのでこの辺で。。

• タイトルの文字はカテゴリーページの設定で
• アイコンを変更するときは、ユニコードの前に「\」をつける
• 色や大きさも変えれる

ご参考になれば幸いです。