カテゴリ・タグページの最上部に表示される見出しのフォントを【Cocoon】

スポンサーリンク

デフォルトのデザイン

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

この赤枠の見出し部分を少し変えてみます。

タイトルは左寄せで先頭にアイコン

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

カスタマイズの内容

色々と試してみました。最終的にはアイコン非表示の見出し中央寄せにしています。

今回試してみたこと
  • アイコンを変える
  • アイコンを非表示にする
  • 見出しをセンターに配置
  • 見出しのフォントやカラーなど変更

カスタマイズコード

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

アイコンを変える

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

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

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

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

アイコンを非表示にする

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

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

アイコン非表示 & 見出しをcenterに

アイコンを非表示にして見出しを中央に配置すると、アイコンの分だけ見出しが少し右寄りになってバランスが悪くなります。

その際はmarginやpaddingなどでバランスを調整してみてください。

/*カテゴリーやタグページの見出し*/
.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 を使っているので、そのままコピペしても反映されない場合があります。

完成イメージ

センター配置でアイコン無し

Google Fonts の導入と設定については以下の記事を参考にしてください。

Comment

タイトルとURLをコピーしました