※今回は、はてなブロガー向け記事です（はてなブログPro対象）
先日はてなブログにカテゴリページを編集できる機能が追加されました。
カテゴリーは細分化させすぎていることもあり、全部を対応しようとは思わないのですが、せっかくなのでメニューに出しているカテゴリーだけ編集してみました。
ヘッダー画像＋説明文という感じが好ましいと思って、記事のアイキャッチを入れる感覚でそのままいれたところデカイ。
ファーストビューで記事が見えなくなると本末転倒なのと、わざわざ画像サイズ変更するのが面倒だったのでCSSで調整してみました。これから追加しようかな？と思っている方の参考になれば幸いです。
完成例はこれです
画像の準備
まずヘッダー画像に入れたい画像を用意する必要があります。
カテゴリー編集画面には画像アップロード機能が無いので、下書き記事などから写真を投稿、画像のURLをコピー、一旦どこかに貼り付けておいてください。
カテゴリの編集
ダッシュボードの左カラムにある【カテゴリー】から編集していきます。
カテゴリーの説明というところに、テキストと画像を入力していきます。ここではHTMLタグが使用できます。
また、カテゴリー名とは別にページタイトルを指定する場合には下のチェックを入れて設定も可能です。
HTMLは以下のように入れます。（画像URL、alt属性、説明文は変更してください）
<div class="archive-desc-header"> <img src="https://www.weblog-life.net/wp-content/uploads/2018/09/20170525130709.jpg" alt="カテゴリ名" /> </div> <p>ここに説明文を入れます</p>
CSSの設定
【デザイン】−【カスタマイズ】−【デザインCSS】に以下を追記。
.archive-desc-header { overflow: hidden; width: 100%; height: 200px; /* 画像枠の高さ */ position: relative; } .archive-desc-header img{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height: auto; }
高さを変更したい場合は、.archive-desc-headerのheightの数字を変更してみてください。
画像がトリミングされて表示されており、現在は中央を表示していますが、上下調整したい場合は、.archive-desc-header imgのtopの数字を変更すると調整可能です。
※この機能はPC版のみです（2017/5/25現在）
最後に
今回は、はてなブログのカテゴリ編集機能でヘッダー画像を挿入（調整）する方法でした。
カテゴリーページは関連コンテンツの集まりのため独自コンテンツを入れることでSEO的にも有利になる可能性があります。
この機能を使ってコンテンツ強化を是非していきたいですね。
