はてな公式の最新記事モジュールをあのスタイルに。
(´・ω・`) にゅるにゅるのあのスタイルに。
.hatena-urllist { position: relative; background: #ddd; width: 100%; overflow: hidden; margin-top: 1px; border-radius: 1px; } .hatena-urllist li { padding: 0; border-bottom: 0; line-height: 1.5; position: relative; } .hatena-urllist li a { text-decoration: none; } .urllist-item-inner.recent-entries-item-inner { height: 100%; } img.urllist-image.recent-entries-image { position: relative; margin: 0; } a.urllist-title-link.recent-entries-title-link.urllist-title.recent-entries-title { position: absolute; top: 0%; left: 0; word-break: break-all; overflow: hidden; background: rgba(77, 77, 77, 0.42); width: 90%; height: 100%; margin-top: 0; padding: 10% 5%; color: rgba(255, 255, 255, 0.985); font-size: 14px; text-align: center; text-shadow: -1px 1px rgba(0, 0, 0, 0.15); -webkit-transition: all 0.35s ease-out; -moz-transition: all 0.35s ease-out; -o-transition: all 0.35s ease-out; transition: all 0.35s ease-out; } a.urllist-title-link.recent-entries-title-link.urllist-title.recent-entries-title:hover { background: rgba(255, 255, 255, 0.05); color: transparent; text-shadow: none; padding-top: 100px; text-decoration: none; } .urllist-date-link.recent-entries-date-link a time { position: absolute; bottom: 0; right: 5px; font-size: 10px; color: white; text-shadow: none; } a.bookmark-widget-counter img { position: absolute; left: 0px; bottom: 0px; } .urllist-categories.recent-entries-categories { position: absolute; bottom: 15px; right: 0px; font-size: 10px; padding: 0; margin: 0; } a.urllist-category-link.recent-entries-category-link { color: white; text-shadow: none; }
気が向いたのでざっくりと移植。レポート?なにそれ美味しいの?
サムネサイズは275x110(まぁ指定が%だからこれ以外でも動くだろうけど。)
一応全オプションに対応
サムネイルサイズとかオプションごとに最適化したコードを吐いてくれるツールは気が向いたら#ChiroruNoteの方で出すと思ふ。
あのスタイル
Category
- Windows (13)
- Hackintosh (2)
- 備忘録 (25)
- Mac (10)
- Linux (15)
- 自作PC (18)
- Raspberry Pi (13)
- iOS (62)
- JavaScript (28)
- カスタマイズ (13)
- homebridge (4)
- iPhone (8)
- Python (2)
- スクレイピング (1)
- 自作 (5)
- Blog (14)
- ハムスター (2)
- α6400 (1)
- 写真 (37)
- 買ったもの (38)
- 模様替え (2)
- レビュー (23)
- アプリ (38)
- DIY (1)
- iPad mini (29)
- NEX-5R (24)
- Workflow (1)
- Walkman (1)
- PSO2 (1)
- AppleScript (2)
- 文房具 (3)
- 料理 (24)
- Textwell (19)
- 旅行 (3)
- MyShortcuts (3)
- 食事 (19)
- ブックマークレット (14)
- iOSアプリセール情報 (11)
- Write Space (6)
- 万年筆 (1)