ウェブと食べ物と趣味のこと

格安SIMのこと、windows10、迷惑メールネタ、写真ネタなど。困った方の参考になる記事を心掛けます。

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

スポンサードリンク

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;
}

高さを変更したい場合は、.archive-desc-headerのheightの数字を変更してみてください。

画像がトリミングされて表示されており、現在は中央を表示していますが、上下調整したい場合は、.archive-desc-header imgのtopの数字を変更すると調整可能です。

※この機能はPC版のみです(2017/5/25現在)

最後に

今回は、はてなブログのカテゴリ編集機能でヘッダー画像を挿入(調整)する方法でした。

カテゴリーページは関連コンテンツの集まりのため独自コンテンツを入れることでSEO的にも有利になる可能性があります。

この機能を使ってコンテンツ強化を是非していきたいですね。