すたすた式
web
はてなブックマークのユーザースタイルシートを作りました。
エントリー全体をリスト型にして縦に並べています。
各カテゴリーページの表示レイアウトは右上のアイコンからタイル形式を選択してください。
ダークテーマは便宜的に分けましたが、1つにまとめてもOKです。
ユーザースタイルシートはブラウザの拡張機能Stylusをつかって適用しています。
Stylus: Chrome
Stylus: Firefox
Windowsの以下のブラウザで確認しました。
/** * 各カテゴリーページの表示レイアウトはタイル形式を使用 */ :root { --border-top: 1px solid rgb(236, 236, 236); --border-color: #ececec; } /***** 全体 *****/ .entrylist-unit { margin: 0 30px; } /***** 1番上のエントリー *****/ .entrylist-header { border-top: var(--border-top); } .entrylist-header-main { max-width: initial; } .entrylist-header-main>li { margin: 0 10px; } .entrylist-contents { background: initial; border: none; } .entrylist-contents-main { padding: initial; border: none; } .entrylist-header-main .entrylist-image-entry .entrylist-contents-title { padding-right: initial; } /***** 広告 *****/ .entrylist-header-sub { padding: initial; margin-left: 5px; } /***** 2番目以降のエントリー *****/ .entrylist-item { flex-direction: column; } .entrylist-item>li { flex-basis: initial; max-width: initial; border-right: none; margin: 0 10px; border-top: 1px solid #ececec; } /* グリッドレイアウト */ .entrylist-contents-main { display: grid; grid-template-rows: auto auto; grid-template-columns: 100px 160px auto 200px; grid-template-areas: "users title title domain" "category category tags tags"; } .entrylist-contents-users { grid-area: users; } .entrylist-contents-title { grid-area: title; } .entrylist-contents-domain { grid-area: domain; } .entrylist-contents-meta { grid-area: category; } .entrylist-contents-tags { grid-area: tags; } /* End グリッドレイアウト */ .entrylist-contents-users { left: initial; position: relative; right: initial; margin: auto; } .entrylist-contents-users a { display: flex; align-items: last baseline; height: initial; } .entrylist-contents-users span { font-size: 16px; } .entrylist-contents-title { min-height: initial; font-size: 18px; border: none; margin-bottom: 5px; } .entrylist-contents-title a { -webkit-line-clamp: 1; } .entrylist-contents-domain { order: initial; margin: auto 0; text-align: end; } .entrylist-contents-domain span { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .entrylist-contents-body { display: none; } .entrylist-contents-meta { padding-bottom: initial; border-bottom: initial; margin-bottom: 12px; } .entrylist-contents-tags li a { font-size: 12px; } /***** ブックマークコメント *****/ .entry-comment-contents { font-size: 16px; } /***** オプション *****/ /* 色の情報を減らす */ /* .cat-economics .entrylist-contents-users a, .cat-social .entrylist-contents-users a, .cat-knowledge .entrylist-contents-users a, .cat-life .entrylist-contents-users a, .cat-it .entrylist-contents-users a, .cat-entertainment .entrylist-contents-users a, .cat-fun .entrylist-contents-users a, .cat-game .entrylist-contents-users a { color: rgb(75, 86, 93); } .cat-economics .entrylist-contents-category, .cat-social .entrylist-contents-category, .cat-knowledge .entrylist-contents-category, .cat-life .entrylist-contents-category, .cat-it .entrylist-contents-category, .cat-entertainment .entrylist-contents-category, .cat-fun .entrylist-contents-category, .cat-game .entrylist-contents-category { background: initial; } .entrylist-contents-category a { color: rgb(75, 86, 93); padding: 2px 7px; border: 1px solid var(--border-color); font-size: 12px; } */ /* タグを消す */ .entrylist-contents-tags a { background-color: initial; } .entrylist-contents-tags a::before { all: initial; } .entrylist-contents-tags a::after { all: initial; } /* 広告を消す */ /* .entrylist-header-main { flex-basis: initial; border-right: initial; } .entrylist-header-sub { display: none; } */ /***** ブックマークコメント *****/ .entry-comment-contents { font-size: 16px; }
コメントアウト/* */を取ると広告を消すこともできます。
/*
*/
/***** 広告を消す *****/ .entrylist-header-main { flex-basis: initial; border-right: initial; } .entrylist-header-sub { display: none; }
prefers-color-scheme: darkでOSのカラー設定がダークのときに実行するようにしました。
prefers-color-scheme: dark
prefers-color-scheme - CSS: カスケーディングスタイルシート | MDN
/***** ダークテーマ *****/ @media (prefers-color-scheme: dark) { :root { --dark-background-color: rgb(43, 42, 51); --dark-input-background-color: rgb(30, 30, 35); --dark-inpit-text-color: rgb(240, 240, 240); --dark-border-color: rgb(55, 60, 60); --dark-foreground-color: rgb(53, 52, 61); --dark-text-color: rgb(204, 204, 204); --dark-list-border: 1px solid rgba(236, 236, 236, 0.2); --dark-group1-background-color: rgb(34, 36, 38); --dark-group1-color: rgb(172, 164, 154); } body { background-color: var(--dark-background-color); } /***** グローバルヘッダー *****/ #global-header { background-color: var(--dark-foreground-color); } #global-header a { color: var(--dark-text-color); } /***** 検索ボックス *****/ .branding-searchbox .inputtext { background-color: var(--dark-input-background-color); color: var(--dark-inpit-text-color); } /***** ナビゲーション *****/ .navi-wrapper { background-color: var(--dark-background-color); } .navi-item-detail-inner { background-color: var(--dark-foreground-color); } .navi-item-detail-inner a { color: var(--dark-text-color); } /***** エントリーリスト *****/ .entrylist-header { border-top: var(--border-top); border-right-color: var(--dark-border-color); border-left-color: var(--dark-border-color); } .entrylist-header-main, .entrylist-item, .entrylist-contents-main { background-color: var(--dark-backbround-color); border-right-color: var(--dark-border-color); border-left-color: var(--dark-border-color); } .entrylist-header-main, .entrylist-item>li { border-top: var(--dark-list-border); } .entrylist-contents-title a, .entrylist-contents-domain a, .entrylist-contents-date, .entrylist-contents-tags a { color: var(--dark-text-color); } /***** オプション *****/ /* 色の情報を減らす */ .cat-economics .entrylist-contents-users a, .cat-social .entrylist-contents-users a, .cat-knowledge .entrylist-contents-users a, .cat-life .entrylist-contents-users a, .cat-it .entrylist-contents-users a, .cat-entertainment .entrylist-contents-users a, .cat-fun .entrylist-contents-users a, .cat-game .entrylist-contents-users a { color: var(--dark-text-color); } .cat-economics .entrylist-contents-category, .cat-social .entrylist-contents-category, .cat-knowledge .entrylist-contents-category, .cat-life .entrylist-contents-category, .cat-it .entrylist-contents-category, .cat-entertainment .entrylist-contents-category, .cat-fun .entrylist-contents-category, .cat-game .entrylist-contents-category { background: initial; } .entrylist-contents-category a { color: var(--dark-text-color); padding: 2px 7px; border: 1px solid var(--border-color); font-size: 12px; } /***** エントリーリスト すべて読む・もっと読む *****/ .entrylist-readmore { border-left-color: var(--dark-border-color); border-right-color: var(--dark-border-color); } .entrylist-readmore a { background-color: var(--dark-group1-background-color); color: var(--dark-group1-color); } .entrylist-readmore a:hover { background-color: rgb(35, 38, 39); } /***** あとで読むランキング *****/ .entrylist-issue-unitTitle, .entrylist-title, .entryilst-readlater-ranking-tabs-head, .entrylist-readlater-ranking-tabs-item:checked+.entrylist-readlater-ranking-tabs-label, .entrylist-readlater-ranking-title a, .entrylist-readlater-ranking-domain, .entrylist-readlater-ranking-date, .entrylist-readlater-ranking-term { color: var(--dark-text-color); } .entryilst-readlater-ranking-tabs-head { border-right-color: var(--dark-border-color); } .entrylist-readlater-ranking-items { border-left-color: var(--dark-border-color); border-right: none; } .tooltip-button { background-color: var(--dark-text-color); } .entrylist-issue-unitTitle, .entrylist-title { background-color: var(--dark-foreground-color); } .entrylist-readlater-ranking-tabs-item:checked+.entrylist-readlater-ranking-tabs-label { background-color: rgb(0, 123, 166); } .entrylist-readlater-ranking-body { border-top-color: var(--dark-border-color); } .entrylist-readlater-ranking-item { background-color: var(--dark-background-color); border-right-color: var(--dark-border-color); } .entrylist-readlater-ranking-item:nth-child(3n) .entrylist-readlater-ranking-body { border-bottom-color: var(--dark-border-color); } .entrylist-readlater-ranking-item:nth-child(n + 4) .entrylist-readlater-ranking-head { border-top-color: rgb(157, 174, 121); color: rgb(157, 174, 121); } /***** エントリーリスト 3カラム *****/ .entrylist-3column-items { background-color: var(--dark-background-color); border-left-color: var(--dark-border-color); } .entrylist-3column-items>li { border-top-color: var(--dark-border-color); } .entrylist-3column-title a, .entrylist-3column-domain a { color: var(--dark-text-color); } .entrylist-3column-items>li:last-child { border-bottom-color: var(--dark-border-color); } .entrylist-3column-inner:last-child .entrylist-3column-items { border-right-color: var(--dark-border-color); } .entrylist-3column-readmore { border-left-color: var(--dark-border-color); } .entrylist-3column-inner:last-child .entrylist-3column-readmore { border-right-color: var(--dark-border-color); } .entrylist-3column-readmore a { background-color: var(--dark-group1-background-color); color: var(--dark-group1-color); } .entrylist-3column-readmore a:hover { background-color: rgb(35, 38, 39); } /***** 人気エントリーもどうぞ *****/ .entrylist-recommend a { background-color: var(--dark-background-color); } .entrylist-recommend-list { color: var(--dark-text-color); background-color: var(--dark-background-color); } .entrylist-recommend-list:hover { background-color: var(--dark-background-color); } .entrylist-recommend-title { color: var(--dark-text-color); background-color: var(--dark-foreground-color); } .entrylist-recommend-list li { border-bottom-color: var(--dark-border-color); } .entrylist-recommend-list li:last-child { background-color: var(--dark-group1-background-color); color: var(--dark-group1-color); } /***** 特集 *****/ .entrylist-issue-items { border-left-color: var(--dark-border-color); } .entrylist-issue-contents { border-bottom-color: var(--dark-border-color); } .entrylist-issue-items, .entrylist-issue-items>li { border-right-color: var(--dark-border-color); } .entrylist-contents-list { background-color: var(--dark-background-color); } .entrylist-contents-list li { border-bottom-color: var(--dark-border-color); } .entrylist-contents-list li a { color: var(--dark-text-color); } .entrylist-contents-list li a:hover { background-color: rgba(53, 58, 60, 0.7); } /***** フッター *****/ .footer, .footer-title a { color: var(--dark-text-color); } .footer { margin: initial; background-color: var(--dark-group1-background-color); border-top-color: var(--dark-border-color); } /***** ブックマークコメント *****/ .entry-main, .entry-bookmark { border-color: var(--dark-border-color); } .breadcrumb a { color: var(--dark-text-color); } /* bookmark */ .entry-info-title a, .entry-info-domain, .entry-info-domain a, .entry-info-domain .text, .entry-relationContents-users a { color: var(--dark-text-color); } /* my bookmark */ .entry-myBookmark { background-color: var(--dark-group1-background-color); } .entry-user-and-comment { color: var(--dark-group1-color); } .entry-myBookmark-guest-form { background-color: var(--dark-input-background-color); color: var(--dark-inpit-text-color); } /* エントリーコメント */ .entry-comment-title, .entry-comment-contents, .entry-comment-tags, .entry-comment-text a, .entry-comment-timestamp a, .entry-comment-permalink a, .entry-comment-note, .entry-subMenu-embed { color: var(--dark-text-color); } .entry-comment-tabs { background-color: var(--dark-group1-background-color); border-bottom-color: var(--dark-border-color); } .entry-comment-tab li { color: var(--dark-group1-color); } .entry-comment-contents .entry-comment-contents-foot { border-bottom: var(--dark-list-border); } /* 関連記事 */ .entry-relationContents-sectionTitle { color: var(--dark-group1-color); background: var(--dark-group1-background-color); } .entry-relationContents-title a, .entry-relationContents-domain a { color: var(--dark-text-color); } .entry-relationContents-list>li { border-bottom: var(--dark-list-border); } /* aside */ .entry-about-title, .entry-about-description, .entry-bookmarkUsers-title { color: var(--dark-group1-color); } .entry-bookmarkUsers-title, .entry-about { background: var(--dark-group1-background-color); } .entry-relationContents-title a { color: var(--dark-text-color); } .entry-relationContents-list>li, .entry-group-list li .entry-group-list-inner { border-bottom: var(--dark-list-border); } /* エントリーグループ */ .entry-group-title a, .entry-group-users a, .entry-group-domain, .entry-group-domain a { color: var(--dark-text-color); } .entry-group-sectionTitle a { color: var(--dark-group1-color); } .entry-group-sectionTitle { background: var(--dark-group1-background-color); } .entry-group-list li .entry-group-list-inner { border-bottom: var(--dark-list-border); } .entry-group-list li:nth-of-type(2n + 1) { border-right: 3px solid var(--dark-border-color); } /***** 検索結果 *****/ .entrysearch-searchbox { background: var(--dark-foreground-color); } .centerarticle-aside-title, .centerarticle-sidebar-menu a, .centerarticle-sub-navi, .entrysearch-title, .entrysearch-word, .centerarticle-entry-title a, .centerarticle-entry-data a, .page-entrysearch .centerarticle-entry-data .entry-contents-date, .centerarticle-entry-summary { color: var(--dark-text-color); } .entrysearch-searchbox, .left-container, .centerarticle-aside-title, .bookmark-item, .interest-touch-bookmark-item { border-color: var(--dark-border-color); } .centerarticle-sub-navi a:hover { color: #25282b; } .entrysearch-searchbox-btn.js-entrysearch-form-button { background-color: rgb(0, 123, 166); } .page-entrysearch .centerarticle-entry-title { font-size: 18px; } .page-entrysearch .centerarticle-entry-contents .centerarticle-entry-summary { font-size: 16px; } .page-entrysearch .entrysearch-entry-tags a { font-size: 14px; } /* タグを消す */ .page-entrysearch .entrysearch-entry-tags a { background-color: initial; color: var(--dark-text-color); } .page-entrysearch .entrysearch-entry-tags a::before, .page-entrysearch .entrysearch-entry-tags a::after { display: none; } } /***** End ダークテーマ *****/
全体はflex-direction: column;で縦に並べる。
flex-direction: column;
各エントリーのパーツはdisplay: grid;で配置。
display: grid;
ダークモード、ダークテーマは拡張機能Dark Readerにまかせた。
Dark Reader: Chrome
Dark Reader: Firefox
サイト内検索に使ってください 🐤
© 2015 すたすた式
Enjoy!👍
QooQ
コメントなし:
コメントを投稿