はてなブログの「最新記事」を画像付きにするコードを作るやつ。

はてなブログの「最新記事」を画像付きにするコード

「はてなブログの「最新記事」を画像付きにする」で必要なコードを簡単に作れます。
続きの作業等は元記事を参考にしてください。

HTML & JS & CSS

• デフォルト画像には「http:」または「https:」から始まる、jpg / gif / pngの画像URLを入力して下さい。
• タイトルには、サイドバーで表示させるタイトルを入力して下さい。
• HTTPS配信に対応させる場合
  • URLはhttps:で指定して下さい

ブログURL*
デフォルト画像*
タイトル*
表示件数*	1件 3件 5件 10件 15件

HTML & JS


CSS

CSSについて（追記：2014年3月20日）

テーマによって、スタイルが崩れる場合があります。
上のようにタイトルの背景が途中で切れている場合は、CSSの修正が必要です。

• .htbl_new_entry_text の width の値を 90% から 100% に変更して下さい。

/*- 修正前 -*/
.htbl_new_entry_text {
~ 省略 ~
  width: 90%;
~ 省略 ~
}

/*- 修正後 -*/
.htbl_new_entry_text {
~ 省略 ~
  width: 100%;
~ 省略 ~
}

JSについて

以下の問題を修正しました。

2014年3月20日

• ブログURLで、ドメイン名の後ろに「/」が無い場合に正常に動作しない問題を修正。
  • 「/」が自動補完されます。

2016年8月12日

• 「https:」から始まる画像URLに対応させました。

2019年1月30日

• Google Feed API廃止に伴いソースを変更
  • 参考：yuki-2021.hatenablog.com