はてなブログの「最新記事」を画像付きにするコードを作るやつ。
はてなブログの「最新記事」を画像付きにするコード
「はてなブログの「最新記事」を画像付きにする」で必要なコードを簡単に作れます。続きの作業等は元記事を参考にしてください。
HTML & JS & CSS
Now Loading...
\n'
+ '\n'
+ '<!'
+'-- SCRIPT : new_entries_feed -->\n'
+ '\' + useFeed + \'
\';\n'
+ ' }\n'
+ ' } \n'
+ '});\n'
+ '\n'
+ '//日付変換処理\n'
+ 'var dateFormat = 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 = function(str) {\n'
+ ' var no_image = \''+ image +'\';\n'
+ ' format_str = (str.match(/http(?:s|):{1}[\\S]+\\.(?:jpg|gif|png)/) != null) ? str.match(/http(?:s|):{1}[\\S]+\\.(?:jpg|gif|png)/) : no_image.match(/http(?:s|):{1}[\\S]+\\.(?:jpg|gif|png)/)\n'
+ ' return format_str;\n'
+ '};\n'
+ ''
+'script>';
document.RECM.css.value = '/* ----- NEW_ENTRY ----- */\n'
+ '.htbl_new_entries {\n'
+ ' height: 100%;\n'
+ ' width: 100%;\n'
+ '}\n'
+ '.htbl_new_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_new_entry_img { position: relative; top: -9px; min-height: 118px;}\n'
+ '.htbl_new_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: 0px 0px 5px 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_new_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_new_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'
+ ' font-weight: lighter;\n'
+ '}\n'
+ '.htbl_new_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'
+ '}';
document.RECM.code.focus();
document.RECM.code.select();
}
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日
