感想みかん

感想、レビュー、実体験等を書くブログ

はてなブログのサイドバーに指定カテゴリーの最新記事をサムネイル付き一覧表示する方法

自分が読んでもらいたいカテゴリーをサイドバーに一覧表示したいとき、はてなブログにそういう機能はない

はてなブログのサイドバーに設置できるモジュールの中で、サムネイル付きで記事を表示できるモジュールは、「最新記事」「関連記事」「人気記事」の3つ。
「関連記事」は、今も記事下に移動させて設置している。
「最新記事」は、ホームが一覧表示にできるから、あまり意味がなくなってきた。 「人気記事」は、ブログの顔ではあるが、必ずしも自分が読んでもらいたい記事とは一致しない。

はてなブログで、自分が読んでもらいたいカテゴリーをサムネイル付きで強調して表示したい場合、そういうモジュールは備わっていない。
だから、RSSを埋め込みできる他のサービスを使うことにした。

Feedwindを使い、自分のブログのFeedをサイドバーに埋め込む

色々試してみたが、一番良かったのは、「Feedwind」というサービス。

feed.mikle.com

自分のブログのフィードを登録するだけで、サムネイル付き一覧表示したウィジェットの埋め込みコードを出力できる。

はてなブログのフィードは、サイトのURLに、 /rss 又は、/feed のどちらかをつけるだけ。
このブログなら、

http://www.kanmika.com/feed

という感じ。/feedはATOMという方式のフィードになって、RSSよりも新しくて整理された規格らしい(その程度の知識しかありません)なので、feedの方で登録。

全てのフィードを登録するならこれでいいが、今回はカテゴリー限定でフィードが欲しい

はてなブログは、カテゴリーごとにもフィードを使える。

更新フィード - はてなブログ ヘルプ

カテゴリーのフィードは、上記のURL形式の後ろに付け加える。例えば、このブログにある「ゲーム全般」カテゴリーだけを表示したいなら、

http://www.kanmika.com/feed/category/ゲーム全般

とすればいい。

自分のブログのURLの後ろに、
/feed/category/(お好きなジャンル)
を追加すれば、カテゴリー限定のフィードになる。(これFeedlyに登録するときも使える技だね。)

このURLをFeedwindに登録する。

デフォルト(そのまま)だと、ちょっと使いづらいので、いくつか変更する。

f:id:mikanumay:20170726152348j:plain:w500

Widthはレスポンシブ。
By the number of feed items(表示させる数)を4。
Auto ScrollをOff。

下の枠、Display contentをTitle Only。
Maximum number of characters(最大文字数)を100。
Sizeのitem title(文字の大きさ)を16。
ColorsのTitle Fontを、自分のブログと同じ色に。

右側に実際の形が表示されるから、見ながらやればいい。完成したら、Save & Get Code。

コードを出力したらコピーして、はてなブログのサイドバーのHTMLパーツに張り付けておわり。

今は僕のブログはカテゴリー限定にしないで張り付けたので、最新記事ランダム表示みたいにしているけど、カテゴリー限定でも表示ができるはず。

しばらくこれでやってみます。飽きたら消すので、もし表示がなかったら、飽きたんだな、と思ってください。