フィードガジェットでラベルごとの最新記事取得 ～Blogger テンプレートを作るよ！ (28)～

こんにちはー！

前回、ラベルごとの最新記事の作り方についてとりあえず三通りの作り方を考えましたが、どれにすればいいかで迷ってしまいました。

悩んでばかりでは進まないので、試しにフィードガジェットを使ってみましょう！

（前回：『ラベルごとの最新記事の実装方針を考える ～Blogger テンプレートを作るよ！ (27)～』）

フィードガジェットでラベルごとの最新記事を表示させる方法

まずは設定画面の [レイアウト] で、表示したいセクションでガジェットを追加します。ガジェット一覧が表示されるので、[基本] の中にある 「フィード」 を選択します。

ガジェット選択画面

その次に URL を入力する画面が表示されますが、そこで以下のように入力します。

＜ブログURL＞/feeds/posts/summary/-/＜ラベル名＞

指定したラベル名のフィードを取得するURLです。一般公開されているブログのフィードしか取得できないようなので、そこは気を付けてください。

フィード URL を生成してくれるツールを開発された方がいらっしゃったので、ご紹介します。
galife 『Blogger の フィード URL 生成 ツール』

フィードURL を入力する画面

[次へ] ボタンを押すと細かい設定を行います。

フィードガジェットの表示設定

タイトルはブログに表示されるウィジェットの名前です。表示する記事数を選ぶことができますが、ここで指定できるのは 5 件までです。表示の設定を変えるとプレビューが変わるので、それで目的の状態にして、 [保存] を押せば OK です。

プレビュー表示の時はフィードの取得が行われませんので、表示を確認したいときはブログに反映して確かめてください。

これで、最新記事を表示させることができますね。仕上げにテンプレートを開いてスタイルを自分好みに変更します。

フィードガジェットでラベル 『制作日誌』 の最新記事を表示させた図

これで、ラベルごとの最新記事を表示させることができました！

2016/11/14現在、ホーム画面ではこれを使用したトップページになっていると思います。

2016/11/14 のトップページ

今回作成した css は以下の通りです。今回は information というセクションを用意し、その中にあるフィードガジェットに対してのみスタイルを適用させることにしています。

.information .Feed h2 {
display:inline-block;
background: orange;
border: 0;
padding: 0.3em 0.5em 0.2em 0.5em;
margin-bottom: 0;
font-size: 1.5em;
text-align: left;
width: auto;
border-radius: 10px 10px 0 0;
}
.information .Feed .widget-content {
background: white;
margin-top: 0;
border: 2px solid gray;
padding: 0.4em;
font-size: 1.5em;
}
.information .Feed .widget-content .widget-footer {
background: #f3f3f3;
margin-top: 0;
border: 2px solid gray;
padding: 0.4em;
font-size: 1.5em;
}

でも、一覧ページへのリンクも載せたい！

最新記事を表示させることはできるようになりましたが、そのラベルの記事一覧へのリンクもガジェットに載せておきたいと思っています。

そのためには、ラベル一覧の URL を生成する必要があります。必要なのは、現在の URL とラベル名です。現在の URL はデータタグでも javascript でも取得できますが、問題はラベル名をどうやって取得するかです。

次回は、それを解決したフィードガジェットを作ります！　ではでは～。