Bloggerで最新の記事をサムネイル付きでサイドバーに表示する方法

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

こちらのブログは今年初めての更新となります。最近、すっかりアメブロでばかりブログを書いています。雑な表現になりますが、女子はアメブロが楽しいです。

最近、Bloggerの仕事が続いていて、最新記事でつまづいたので、備忘録です。ちなみに、Bloggerは無料版でも広告が入らないからいいですね。

Bloggerで最新の記事をサイドバーに表示するガジェット

recentで検索すると、Recent Postsというガジェットが出てきます。何も考えずに表示させようとした場合、2015年2月現在は、こガジェット一択になりそうです。
02

Bloggerで最新の記事をサイドバーに表示するガジェットをカスタマイズしたい場合

上記のガジェエットを使ったところ、レイアウトが好ましくなかったので、今回は使いませんでした。

HTML/JavaScriptのガジェットにコードを追加する方法が、今回のベストな方法でした。最終的にこうなります。
03

まず、以下のサイトの通りに作業します。
http://www.mybloggerlab.com/2013/09/how-to-display-recent-posts-in-blogger.html

上の方法だと、本文に画像がないときは、「No Image」という画像が表示されます。それも親切で良いのですが、今回は、画像がないときはタイトルと抜粋を左に寄せる必要がありました。

上のサイトのjsを少し変更して、HTML/JavaScriptのガジェットのコンテンツに以下のコードを貼り付けて実現しました。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

コメントを残す

*