(cache) はてなブログカテゴリー編集機能でヘッダー画像挿入

はてなブログカテゴリー編集機能でヘッダー画像挿入

スポンサードリンク

f:id:photoblg:20170525133611j:plain

※今回は、はてなブロガー向け記事です（はてなブログPro対象）

先日はてなブログにカテゴリページを編集できる機能が追加されました。

staff.hatenablog.com

カテゴリーは細分化させすぎていることもあり、全部を対応しようとは思わないのですが、せっかくなのでメニューに出しているカテゴリーだけ編集してみました。

ヘッダー画像＋説明文という感じが好ましいと思って、記事のアイキャッチを入れる感覚でそのままいれたところデカイ。

ファーストビューで記事が見えなくなると本末転倒なのと、わざわざ画像サイズ変更するのが面倒だったのでCSSで調整してみました。これから追加しようかな？と思っている方の参考になれば幸いです。

完成例はこれです

f:id:photoblg:20170525135844j:plain

www.weblog-life.net

画像の準備

まずヘッダー画像に入れたい画像を用意する必要があります。

カテゴリー編集画面には画像アップロード機能が無いので、下書き記事などから写真を投稿、画像のURLをコピー、一旦どこかに貼り付けておいてください。

f:id:photoblg:20170525135244j:plain

カテゴリの編集

ダッシュボードの左カラムにある【カテゴリー】から編集していきます。

f:id:photoblg:20170525135401j:plain

カテゴリーの説明というところに、テキストと画像を入力していきます。ここではHTMLタグが使用できます。

また、カテゴリー名とは別にページタイトルを指定する場合には下のチェックを入れて設定も可能です。

f:id:photoblg:20170525135413j:plain

HTMLは以下のように入れます。（画像URL、alt属性、説明文は変更してください）

<div class="archive-desc-header">
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/photoblg/20170525/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;
}