たけちゃんのあんなことこんなこと

50代家族持ち♂が普段の出来事を気ままに書いています。基本コンテンツは レシピ 食レポ お散歩記事 その他小技 となっております。


スポンサードリンク

 

自己紹介と本ブログのコンテンツとプライバシーポリシー

カテゴリーヘッダーに画像を入れて、サブブログみたいな見栄えにしてみました。

この記事をシェアする

はてなの改良で、ブログカテゴリー別記事一覧にページタイトルや説明文を追加できるようになりました。更に画像追加も出来るようになったということで早速やってみました。

staff.hatenablog.com

 

雑記ブログはカテゴリー分けが大切 

僕みたいに雑記ブログを書いていると、柱になるカテゴリーが何本か出来てきます。僕の場合は食レポ系とレシピ系がメインで、その他にもお散歩記事など幾つかのカテゴリーが有ります。

幸いにも早い時期にBrooklynを導入し、サブカテゴリーを作ってパンくずリストで階層化したので、分かり易くはなっていると思います。

shiromatakumi.hatenablog.com

カテゴリー一覧への訪問も意外に多い

Googleアナリティクスを見ていると、カテゴリー一覧から入ってこられる方も結構いるみたいです。そういう方にとっては、見たいカテゴリーの記事一覧がキャッチーな見た目になっていたほうが良いと思います。

カテゴリー一覧に画像を貼る

そこで、カテゴリー一覧のヘッダーに画像を貼ってみることにしました。

参考にした記事はこちら

www.weblog-life.net

カテゴリー一覧を編集する時、HTMLで記述出来る仕様になっていますので、画像を貼るなら、imageタグを使って、はてなフォトライフに貼った画像のリンクを記述すれば良いのですが、ヘッダーに縦長な画像を貼ってしまうと画像だけで終わってしまいます。上記記事ではCSSを使って画像の切り出しと大きさ調整が出来るようになっているところがすぐれものです。切り出す場所や縦横比はCSSのカスタマイズで対応可能です(引用ブログ内に記載があります)

 

早速使ってみたところ、僕のブログの食レポのところは

食レポ カテゴリーの記事一覧 - たけちゃんのあんなことこんなこと

こんな感じ

f:id:take--chan:20170611203708p:plain

 

せんべろ記事は

せんべろ探検隊 - たけちゃんのあんなことこんなこと

f:id:take--chan:20170611203747p:plain

こんな感じに見えます。

そして、お花見を中心としたカテゴリーは

花 - たけちゃんのあんなことこんなこと

f:id:take--chan:20170611203924p:plain

こんな感じに見えるようになりました。

トップページの記事一覧に近いように見えるようになったので、カテゴリーから入ってくる方にも、内容がよりよく分かるようになるのではないかと思います。

 

過去の小技

 

www.take--chan.tokyo

www.take--chan.tokyo

www.take--chan.tokyo

 

// パンくずリスト表示