#chiroruLab

趣味と日々の雑記録

はてな公式の最新記事モジュールをあのスタイルに。

(´・ω・`) にゅるにゅるのあのスタイルに。

f:id:chiroru_27:20141119233204p:plain

.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の方で出すと思ふ。

あのスタイル