カテゴリアーカイブ（記事一覧）ページの見出し表示をCSSで変更してみました。

カテゴリ記事一覧ページの見出しが寂しくありませんか？
- 月別アーカイブの見出しは整っている
- カテゴリ記事一覧ページの見出しも整えてみよう！
実際にカスタマイズしてみよう！

カテゴリ記事一覧ページの見出しが寂しくありませんか？

当テーマFocusも特にカスタマイズしておらず気になってはいたのですが、カテゴリ名をクリックした後表示される見出しがはてなブログのデフォルトのままではすごくシンプルなものになっています。

これでははてなブログを見慣れない読者やそもそもWEBでの閲覧リテラシーが低い読者にしてみれば「唐突感」を感じてしまいます。

いきなりぽつんと「カテゴリー名」が表示されるだけ。

不親切ですよね。

月別アーカイブの見出しは整っている

カテゴリアーカイブの他にもはてなブログには年月単位でのアーカイブ表示があります。

ちなみに当ブログの2017年11月のアーカイブページをクリックするとこんな感じに表示されます。

ちゃんとしてますね。。。。

「〇〇〇〇-〇〇-〇〇から1か月間の記事一覧」という表示ルールになっています。

これなら見出しとしてそこに表示される意味が分かります。

カテゴリ記事一覧ページの見出しも整えてみよう！

ということで、年月別のアーカイブページのように読者がすぐ意味が分かるような状態にCSSで調整したいと思います。

年月別アーカイブと同じデザインにするとしたら疑似クラス「::after」を使用してcontentを使って値を「"の記事一覧"」とすれば良さそうです。

ただ、私はここで少しひねりたいのです。

多くのはてなブログユーザーに見られるのですが、カテゴリ記事一覧ページへグローバルメニューからリンクを貼っているケースが多いようです。

つまりカテゴリページは大事なページだということ。

そうであれば、年月別アーカイブページよりも少しだけ目立たせてみてはと思うのです。

実際にカスタマイズしてみよう！

カスタマイズ手順の概略

説明不要という人も多いでしょうが、念のため概略を記載しておきます。

① カテゴリーページの見出しのclassを調べる

ブラウザのデベロッパーツール（ChromeでいえばF12キー）を起動して該当部分のclassなどCSSではどうなっているか調べてみましょう。

Focusの初期状態では・・・

.archive-header-category .archive-heading {
    margin-bottom: .5em;
    font-size: 1.3rem;
}

class名を見る限りカテゴリアーカイブの見出し専用のclassのようなので、このままカスタマイズに使用できそうです。

②　どのようにカスタマイズしたいか考える

例えばですが・・・

文字サイズをもう少し大きく
borderをつける
背景色をつける
前後に説明文などのテキストやアイコンを挿入する

等が考えられます。

③　カスタマイズ内容を実際にコードに落としこむ

実際にデベロッパーツールを活用してコードを打ち込みながらできればベストです。

④　デザインCSSに挿入して表示を確認

コードが出来たらデザインCSSに挿入して保存しましょう。

保存したら表示を確認してください。

実際に当ブログで使用したコード

こんな感じでカスタマイズしてみました。

.archive-header-category .archive-heading {
    margin-bottom: .5em;
    margin-top: 5px;/*下線の表示位置をサイドバーの見出しと水平に*/
    font-size: 1.5rem;
    border-bottom: solid 2px #977d3b;/*下線の太さと色*/
}

.archive-header-category .archive-heading::before  {
    font-family: FontAwesome;
    content: "\f115";/*アイコンフォントを左に表示*/
}

.archive-header-category .archive-heading::after  {
    position: relative;/*不要？*/
    content: " に関する記事一覧";/*説明文*/
    font-size: 1.2rem;/*カテゴリ名より小さく*/
}