#ChiroruNote

小さな便利を作りたい。

はてなブログの人気記事を画像付きで表示させるコードを作るやつ。

はてなブログの人気記事を画像付きで表示させるコード

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

HTML & JS & CSS

  • ブログタイトルには、ブログURLに入力したブログのタイトルを入力して下さい。
  • タイトルには、サイドバーで表示させるタイトルを入力して下さい。
  • デフォルト画像には、「http:」または「https:」から始まる、jpg / gif / pngの画像URLを入力して下さい。
    • 「http:/ /b.hatena.ne.jp/images/append.gif」の場合の代替URLになります。


ブログURL*
ブログタイトル*
タイトル*
表示オプション


デフォルト画像*
表示件数*



ソートルール*


HTML & JS


CSS

CSSについて(追記:2014年3月20日)

f:id:chiroru_27:20140320010255p:plain
テーマによって、スタイルが崩れる場合があります。
上のようにタイトルの背景が途中で切れている場合は、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日

修正内容

  • 出力コードが不正だったため、tweet数にcssが適用されなかった問題を修正。

2014年2月13日

修正内容

2014年3月20日

修正内容

  • ブログURLでドメイン名の後ろに「/」が無い場合、自動補完するように調整。
    • 無くても特に問題はないはず。

2016年8月12日

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

レビュー用のテンプレートコードを簡単に作るやつ。

自分用。


商品名*
購入金額*
購入日*
購入場所*
満足度*
ヒトコト



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

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

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

HTML & JS & CSS

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


ブログURL*
デフォルト画像*
タイトル*
表示件数*





HTML & JS


CSS

CSSについて(追記:2014年3月20日)

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

  • .htbl_new_entry_text の width の値を 90% から 100% に変更して下さい。
/*- 修正前 -*/
.htbl_new_entry_text {
~ 省略 ~
  width: 90%;
~ 省略 ~
}

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

修正:2014年3月20日
以下の問題を修正しました。

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


2016年8月12日

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