カテゴリ・タグページの最上部の見出しをカスタマイズ【Cocoon】

デフォルトのデザイン
カスタマイズコード
完成イメージ

デフォルトのデザイン

カテゴリーページを開いた時に1番上に表示されるタイトルというか見出し。初期の状態だと以下の様なデザインになっています。

この赤枠の見出しを少しカスタマイズ。

カテゴリ・タグページのタイトル

※コレではなく各記事のアイキャッチ画像の下に表示されているタイトルをカスタマイズしたい場合はこちらへ

カスタマイズコード

色々カスタマイズしてみましたが、最終的にはアイコン非表示・見出しを中央寄せというシンプルなものになりました。

カスタマイズしていく中で勉強になった事もあるので、参考になりそうなコードをいくつか載せておきます。

チャレンジしたこと

アイコンを変える
アイコンを非表示にする
見出しをセンターに配置
見出しのフォントやカラーなど変更

アイコンを変える

カテゴリーページ・タグページそれぞれ別のアイコンを指定することができます。以下は Font Awesome より適当にアイコンをチョイスしました。

そもそもアイコンを非表示にする場合はスルーしてください。

/*カテゴリーページのアイコン*/
.archive-title .fa-folder-open:before {
  content: "\f005";
}

/*タグページのアイコン*/
.archive-title .fa-tags ::before {
  content: "\f022";
}

アイコンを非表示にする

カテゴリー・タグページ両方のアイコンをまとめて非表示にできます。

.archive-title :before {
  display: none;
}

見出しを中央寄せに

アイコンを非表示にして見出しを中央に配置しました。

/*カテゴリーやタグページの見出し*/
.archive-title {
  color: #5f5f5f;
  text-align: center;
  font-family: 'Baloo Thambi 2', noto sans jp;
  font-size: 18px !important;
  margin-left: -10px;
}
.archive-title :before {
  display: none;
}

上記のフォントは Google Fonts を使っているので、そのままコピペしても反映されない場合があります。