はてなブログの人気記事を画像付きで表示させるコードを作るやつ。
はてなブログの人気記事を画像付きで表示させるコード
「はてなブログの人気記事を画像付きで表示させる」で必要なコードを簡単に作れます。続きの作業等は元記事を参考にしてください。
HTML & JS & CSS
Now Loading...
\n'
+ '\n'
+ '<!'
+'-- SCRIPT : popular_entries_feed -->\n'
+'\' + useFeed + \'
\';\n'
+' }\n'
+' } \n'
+'});\n'
+'\n'
+'//日付変換処理\n'
+'var dateFormat_populer = function(str){\n'
+' var my_date = new Date(str);\n'
+' var month = my_date.getMonth() + 1;\n'
+' var date = my_date.getDate();\n'
+' format_date = month + "月" + date + "日";\n'
+' return format_date;\n'
+'};\n'
+'\n'
+'// 画像取得処理\n'
+'var getPic_populer = function(str) {\n'
+' var no_image = \''+ image +'\';\n'
+' format_arr = str.match(/http(?:s|):{1}[\\S]+\\.(?:jpg|gif|png)/);\n'
+' if(format_arr[0] != \'http://b.hatena.ne.jp/images/append.gif\') {\n'
+' return_str = decodeURIComponent(format_arr[0]).match(/\\/(http(?:s|):{1}[\\S]+\\.(?:jpg|gif|png))/);\n'
+' return_str = return_str[1];\n'
+' } else {\n'
+' return_str = no_image;\n'
+' }\n'
+' return return_str;\n'
+'};\n'
+'\n'
+ ''
+ 'script>';
// CSS
document.PECM.css.value = '/* ----- POPULAR_ENTRY ----- */\n'
+ '.htbl_popular_entries {\n'
+ ' height: 100%;\n'
+ ' width: 100%;\n'
+ '}\n'
+ '.htbl_popular_entry {\n'
+ ' position: relative;\n'
+ ' background: #ddd;\n'
+ ' width: 100%;\n'
+ ' height: 100px;\n'
+ ' overflow: hidden;\n'
+ ' margin-top: 1px;\n'
+ ' border-radius: 1px;\n'
+ '}\n'
+ '.htbl_popular_entry_img { position: relative; top: -9px; min-height: 118px;}\n'
+ '.htbl_popular_entry_text {\n'
+ ' position: absolute;\n'
+ ' top: 0px;\n'
+ ' word-break: break-all;\n'
+ ' overflow: hidden;\n'
+ ' background: rgba(15, 15, 15, 0.60);\n'
+ ' width: 90%;\n'
+ ' height: 100px;\n'
+ ' margin-top: 0px;\n'
+ ' padding: 0 5%;\n'
+ ' color: rgba(255, 255, 255, 0.95);\n'
+ ' text-shadow: -1px 1px rgba(0, 0, 0, 0.5);\n'
+ ' -webkit-transition: all 0.35s ease-out;\n'
+ ' -moz-transition: all 0.35s ease-out;\n'
+ ' -o-transition: all 0.35s ease-out;\n'
+ ' transition: all 0.35s ease-out;\n'
+ '}\n'
+ '.htbl_popular_entry_text:hover {\n'
+ ' background: rgba(255, 255, 255, 0.05);\n'
+ ' color: transparent;\n'
+ ' text-shadow: none;\n'
+ ' padding-top: 100px;\n'
+ '}\n'
+ '.htbl_popular_entry_text span.entry_title {\n'
+ ' display: table-cell;\n'
+ ' vertical-align: middle;\n'
+ ' text-align: center; \n'
+ ' height: 100px;\n'
+ ' font-size: 14px;\n'
+ '}\n'
+ '.htbl_popular_entry_text span.entry_date {\n'
+ ' position: absolute;\n'
+ ' bottom: 0;\n'
+ ' right: 5px;\n'
+ ' font-size: 10px;\n'
+ ' color: rgba(255, 255, 255, 0.4);\n'
+ ' text-shadow: none;\n'
+ '}\n'
+ '.htbl_popular_entry_text span.entry_hatebu,\n'
+ '.htbl_popular_entry_text span.entry_tweet {\n'
+ ' position: absolute;\n'
+ ' left: 5px;\n'
+ ' bottom: 0px;\n'
+ ' filter: alpha(opacity=90);\n'
+ ' -moz-opacity: 0.9;\n'
+ ' opacity: 0.9;\n'
+ '}\n'
+ '.htbl_popular_entry_text span.entry_tweet { bottom: 13px; }\n'
+ '.htbl_popular_entry_count {\n'
+ ' position: absolute;\n'
+ ' top: 0;\n'
+ ' left: 0;\n'
+ ' background: rgba(165, 255, 165, 0.65);\n'
+ ' width: 65px;\n'
+ ' height: 18px;\n'
+ '}\n'
+ '.htbl_popular_entry_count span {\n'
+ ' display: table-cell;\n'
+ ' vertical-align: middle;\n'
+ ' text-align: center; \n'
+ ' color: rgba(255, 255, 255, 0.98);\n'
+ ' height: 18px;\n'
+ '}\n';
if(!document.PECM.data.checked) document.PECM.css.value += '.htbl_popular_entry.data,'; //日付
if(!document.PECM.hatebu.checked) document.PECM.css.value += '.htbl_popular_entry.hatebu,'; //はてぶ
if(!document.PECM.tweet.checked) document.PECM.css.value += '.htbl_popular_entry.tweet,'; //ツイート数
if(!document.PECM.count.checked) document.PECM.css.value += '.htbl_popular_entry.count,'; //番号
if(!document.PECM.data.checked|!document.PECM.hatebu.checked|!document.PECM.tweet.checked|!document.PECM.count.checked){
document.PECM.css.value += '{\n'
+ ' display: none;\n'
+ '}';
}
document.PECM.code.focus();
document.PECM.code.select();
}
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にならないように対応
