■anond:20240210212445

じゃあワイも無責任にはてな用CSS貼っとくわ

パソコン画面右上のアイコンで選ぶ表示スタイルを一番右の「ヘッドライン」表示にしといてな

/* ヘッドライン表示を切り詰める */
/* #container 指定でCSS優先度を上げる必要がある */
body[data-entrylist-layout="headline"] #container .entrylist-main{
  padding-right: 0 !important;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents{
  padding-left: 0 !important;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-users{
  position: static !important;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-users{
  top: 14px !important;
}

/* ヘッドライン表示にサムネイルを追加 */
body[data-entrylist-layout="headline"] #container .entrylist-contents-main{
  display: grid;
  grid-template:
    "users    body title"  28px
    "bookmark body domain" 20px
    / 60px 120px 1fr;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-users{
  grid-area: users;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-users a span{
  margin-right: 0;
}
body[data-entrylist-layout="headline"] #container .following-bookmarks-container{
  grid-area: bookmark;
  position: absolute;
  left: 20px;
  bottom: 2.5px;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-body{
  grid-area: body;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-title{
  grid-area: title;
  z-index: 99;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-title > a{
  margin-left: -120px;
  padding-left: 120px;
  margin-bottom: -28px;
  padding-bottom: 28px;
  width: 890px;
  white-space: nowrap;
  display: block;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-body{
  display: block !important;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-thumb{
  position: static;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-thumb span{
  width: 100px;
  height: 50px;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-thumb{
  background: #f0f0f0;
  width: 100px;
  height: 50px;
  background-position: 50%;
  background-size: cover;
  border-radius: 4px;
}
/* 2行目に、総合ではドメイン(domain), サイト内一覧ではカテゴリと時刻(meta), マウスホバー時はいずれも概要文(description) */
body[data-entrylist-layout="headline"] #container .entrylist-contents-domain,
body[data-entrylist-layout="headline"] #container .entrylist-contents-meta,
body[data-entrylist-layout="headline"] #container .entrylist-contents-description{
  grid-area: domain;
  display: block;
  opacity: 0;
  padding: 0 !important;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-meta > li{
  vertical-align: top;
}
html[data-stable-request-url^="https://b.hatena.ne.jp/entrylist/"] body[data-entrylist-layout="headline"] #container .entrylist-contents-domain,
html[data-stable-request-url^="https://b.hatena.ne.jp/site/"] body[data-entrylist-layout="headline"] #container .entrylist-contents-meta{
  opacity: 1;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents:hover .entrylist-contents-domain img.favicon + span,
body[data-entrylist-layout="headline"] #container .entrylist-contents:hover .entrylist-contents-meta{
  opacity: 0;
}
body[data-entrylist-layout="headline"] #container .entrylist-contents-description{
  opacity: 0;
  position: absolute;
  top: calc(40px - 3px);
  left: calc(180px + 16px + .5em);
  height: 20px;
  line-height: 20px;
  color: #999;
  min-height: auto !important;
  padding-right: 0 !important;
  width: 890px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-stable-request-url^="https://b.hatena.ne.jp/site/"] body[data-entrylist-layout="headline"] #container .entrylist-contents:hover .entrylist-contents-domain,
body[data-entrylist-layout="headline"] #container .entrylist-contents:hover .entrylist-contents-description{
  opacity: 1;
}
/* 増田調整 */
body[data-entrylist-layout="headline"] #container a[href^="/entry/s/anond.hatelabo.jp/"] .entrylist-contents-thumb{
  background-image: url('https://cdn-ak-scissors.b.st-hatena.com/image/square/b1638cdb5807a4788e4ba3c1109a984166e095fc/height=288;version=1;width=512/https%3A%2F%2Fanond.hatelabo.jp%2Fimages%2Fog-image-1500.gif');
}

/* マウスホバー時にサムネも反応させる見た目調整 */
.entrylist-contents-title:hover ~ .entrylist-contents-body .entrylist-contents-thumb{
  opacity: .90;
}

Permalink | 記事への反応(0) | 09:03

ツイートシェア