Blogger:投稿のサムネイルのURLを取得する - レイアウト データ編

イントロダクション

Google のブログサービス「Blogger」では、Blogger のテンプレートの HTML を編集することで、自由にブログのデザインを変更できます。

Bloggerユーザ必見！テンプレートのHTMLを編集するときに参考になる公式ページリスト
http://upa-pc.blogspot.com/2014/06/blogger-html-edit-ref.html
Dr.ウーパのコンピュータ備忘録

今回は、Blogger のテンプレートの HTMLでのみ使用できるレイアウトデータを使用して、投稿のサムネイルのURLを取得してみます。

Blogger:投稿のサムネイルのURLを取得する - レイアウト データ編

前提

Blogger では、投稿中に画像が含まれていると、その画像を自動的に投稿のサムネイルとして認識してくれます。

そして、その投稿のサムネイル画像の URL を取得する方法には、いくつかの方法があります。

今回は、Blogger のテンプレートの HTMLでのみ使用できるレイアウトデータを使用して、投稿のサムネイルのURLを取得します。

ブログの投稿ウィジット内でのみ使用可能なレイアウトデータ

data:post.thumbnailUrl


上記のレイアウトデータは、ブログの投稿ウィジット内でのみ使用可能です。

かつ、レイアウトデータ posts から 1 つの投稿のみを取り出した、post としてデータを参照できる場合に、上記の形式で投稿のサムネイルのURLを取得できます。

なお、投稿にサムネイル画像が無い場合には、空になります。


このレイアウトデータは、Blogger 公式のドキュメントには記載されていないものです。

使用例

<b:if cond='data:post.thumbnailUrl'>
  <img expr:src='data:post.thumbnailUrl'/>
</b:if>


ここでは、data:post.thumbnailUrl が空でない場合のみ、img タグの src 属性として、投稿のサムネイル画像の URL を設定しています。


なお、Blogger のテンプレートの HTML の編集には危険性が伴います。
必ず、以下のページをご確認ください。

Blogger:BloggerのテンプレートのHTMLを編集するときに気を付けること
http://upa-pc.blogspot.com/2015/03/blogger-template-edit-attention.html
Dr.ウーパのコンピュータ備忘録

実行結果例

上記の Blogger のテンプレートの HTML をブログに適用すると、次のようなサムネイル画像が表示されます。
※ ブログの投稿に含まれる画像によって決定されます。これは、このブログにおけるある投稿の例です。

Blogger :  <img expr:src='data:post.thumbnailUrl'/> で表示した
サムネイル画像の例

上記のサムネイル画像のソースコードは次のようになります。（画像はあくまで一例です。）

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoN9Br5CvRt8BunyRgP9Gy1-rX5OfA5D9VprPkgf103qBRsinGoapp1cWNc-CVYQ8Zz95wNbB7eGT1CJq88KT_bJ2Zd7FzW3U7YwP8TWXGTHcu9rgmaNLzbtBKLFBggGaKY3_hI7WcFrY/s72-c/blogger_logo_image.png">


Blogger で投稿した画像の場合には、画像サイズが"s72-c"(画像を縦：72px × 横：72px として、画像を正方形にカット) として指定された URL が取得できます。
（Blogger で投稿していない画像の場合にはどのようになるのか確認していません。）

まとめ

このように、Blogger では、Blogger のテンプレートの HTML で使用できるレイアウトデータを使用することで、投稿のサムネイル画像を取得することが可能です。

この投稿のサムネイル画像を使用すると、ブログの投稿の一覧が表示される画面（ブログのトップページなど）などで、それぞれの投稿を目立たせることが出来そうです。

このブログ内の、他の”Blogger”についての情報を見る