はてなブログの人気記事を画像付きで表示させるコードを作るやつ。
はてなブログの人気記事を画像付きで表示させるコード
「はてなブログの人気記事を画像付きで表示させる」で必要なコードを簡単に作れます。続きの作業等は元記事を参考にしてください。
HTML & JS & CSS
- ブログタイトルには、ブログURLに入力したブログのタイトルを入力して下さい。
- タイトルには、サイドバーで表示させるタイトルを入力して下さい。
- デフォルト画像には、「http:」または「https:」から始まる、jpg / gif / pngの画像URLを入力して下さい。
- 「http:/ /b.hatena.ne.jp/images/append.gif」の場合の代替URLになります。
CSSについて
2014年3月20日
テーマによって、スタイルが崩れる場合があります。
上のようにタイトルの背景が途中で切れている場合は、CSSの修正が必要です。
- .htbl_popular_entry_text の width の値を 90% から 100% に変更して下さい。
/*- 修正前 -*/ .htbl_popular_entry_text { ~ 省略 ~ width: 90%; ~ 省略 ~ } /*- 修正後 -*/ .htbl_popular_entry_text { ~ 省略 ~ width: 100%; ~ 省略 ~ }
追記＆修正について
追記2014年2月3日
http://tweetbuzz.jp/static/imgcounter現在、TweetBuzzさんのツイートカウンタが停止しているため、当スクリプトでもツイート数が表示されない状態となっています。
様子見の姿勢でスクリプトはまだ修正しませんが、この状態が長く続くようであれば考えようと思います。
一応、オプション欄にもこの旨を追記していおきます。
修正
2014年1月29日
修正内容
- 出力コードが不正だったため、「Now Loading...」から進まなかった問題を修正しました。
- 「タイトル」のリンクに、「ブログURL」ではなく「ブログタイトル」が入ってしまう問題を修正しました。
- 出力コード中のhtmlでdiv要素を閉じ忘れていたため、一つしか表示されなかった問題を修正しました。
- 投資ハックのグッチ (id:sleepingbaby77)さん、コメントありがとうございました。
/* ----- 修正前出力コード ----- */ //最初の画像を抽出 var first_image = entry.content.match(/(http:){1}[S_-]+.(?:jpg|gif|png)/); //画像サイズを調整 first_image[0] = first_image[0].replace(/(.[^.]+$)/ , "_l$1"); /* ----- 修正後出力コード ----- */ //最初の画像を抽出 var first_image = entry.content.match(/(http:){1}[\S_-]+\.(?:jpg|gif|png)/); //画像サイズを調整 first_image[0] = first_image[0].replace(/(\.[^.]+$)/ , "_l$1");
2014年1月30日
修正内容
2014年2月13日
修正内容
- 必須項目に「デフォルト画像」を追加しました。
- 「http://b.hatena.ne.jp/images/append.gif」の場合の代替URLになります。
2014年3月20日
修正内容
- ブログURLでドメイン名の後ろに「/」が無い場合、自動補完するように調整。
- 無くても特に問題はないはず。
2016年8月12日
- 「https:」から始まる画像URLに対応させました。
2019年1月30日
2020/04/12
- HTTPS配信切り替えに伴いソースを変更
- Mixed Contentにならないように対応
