海外サイトで提供されているBloggerテンプレートを解析して時に「これは賢いな！」と思ったヘッダー部におすすめ記事を動的表示する手法をメモ。
本当は、おすすめ記事の動的表示をBloggerの標準機能として提供してくれれば嬉しいんですけどね・・・
今回の概要
説明ベタなので、画像を使って今回の概要を説明します。
上記画像は私が管理しているBloggerサイトです。
ページ一覧ガジェットの下に「Top Stories」欄があり、おすすめ記事が4個並べていますが、おすすめ記事の静的表示はXHTMLとCSSの知識があれば可能です。
しかし、静的表示のため修正作業は[テンプレートを開く]→[タイトル・リンクを書き換え]・・・と、頻繁に修正する場合はちょっと大変です！
正直、やりたくありません！！
そこで、動的におすすめ記事を表示させるか？をテンプレートを紐解いて説明したいと思います。
解析したBloggerテンプレート
Hồng Hòa Viさんが作成されたBloggerテンプレート「MetroBTK - The Metro UI Blogger Templates」を簡単にですが解析してみました。
なんちゃってエンジニアの私がいうのもなんですが、テンプレートを解析するのは非常に勉強になりますよ。
今回の内容をご自身ブログに適用するには
- Blogger用Tag
- HTML
- CSS
の知識が必要です。
ヘッダー部におすすめ記事を動的表示する手法
- 予め、おすすめ記事欄に表示させる専用ラベルを作成し、対象記事に関連付けます。Hồng Hòa Viさんのサポートページではhotラベルを作成しています。
- [レイアウト]→配置したい場所に[ブログリスト]を登録
- hotラベルのフィードURL（start-indexパラメータ付）を登録します。
登録URLはhttp://xxxx.blogspot.jp/feeds/posts/default/-/hot?start-index=x
詳しくは後ほど説明。 - BlogListの登録したフィードの「タイトル」・「サムネイル画像のURL」・「記事URL」を抽出・表示するためのHTMLおよびBlogger用Tagを記述します。
- CSSを記述し、見た目を整形します。
特定ラベルのフィードURL
Bloggerのサポートページでも説明されていますが、特定ラベルのフィードを取得するURLは下記のように記述します。
上記URLはhotラベルにしていますが、登録済みのラベルに変更してください。
下記画像は実際に特定ラベルの全記事を取得します。
記事はsummaryのため取得データはそこまで大きくありません。
実際におすすめ記事として表示させるわけですが、下記画像のようにstart-indexパラメータを切り替えることで記事の取得位置を制御します。
例えば、3番目の記事を取得したい場合は
http://xxxx.blogspot.jp/feeds/posts/default/-/hot?start-index=3
とします。
ちなみに、私の環境ではxxx.blogspot.comだとフィードが取得できなかったのでxxx.blogspot.jpに変更しました。
Hồng Hòa Viさんのテンプレートを解析してがすごいな！と思ったは、Bloggerの標準機能のみでおすすめ記事を動的に表示している点です。
初期設定は[レイアウト]画面から行えますし、新規記事におすすめ記事ラベルの貼れば動的にヘッダー部が変化します。
勉強がてらに導入してみてはどうでしょうか。