システムで選択しているモード(ライト/ダーク)に対応しました。ちゃんと見てないのでそのうちボチボチ直していきます。
その他色々と修正しました。2024/12/27
gigazine.net改 by hidekichi
Details
Authorhidekichi
LicenseNo License
Categorygigazine.net
Created
Updated
Code size31 kB
Code checksumeb6bb44e
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name gigazine.net改
@version 1.0.2
@namespace https://userstyles.world/user/hidekichi
@description 20241204.01.00。オリジナルからちょっと見やすく変更しています。レスポンシブにはしてありますが、色々チェックはしてないので問題があったらTwitter(@ko_hidekichi)等で報告いただければ、気が向いた時に直したりできる範囲のことはしてみます。
@author hidekichi
@license No License
==/UserStyle== */
@-moz-document regexp("https?://gigazine.net/") {
/*Roboto*/
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*,
*::before,
*::after {
/*content: "";*/
box-sizing: border-box;
clear: both;
}
:root {
color-scheme: light dark;
}
html {
font-size: unset;
font-size: 16px;
}
h1,
h2,
h3,
h4,
a,
p,
span,
blockquote,
li,
th,
td,
dt,
dd,
input,
.yeartime,
.calendarBG {
font-family: "Roboto", sans-serif;
line-height: 1.5;
}
@media (prefers-color-scheme: dark) {
body {
color: #eee;
background-color: #222831;
}
#header {
background-color: transparent;
}
.content {
section {
h2 {
font-weight: 700;
background-color: #393E46;
a {
color: #eee;
background-color: transparent;
}
}
}
}
#nextpage {
a {
border: 1px solid #5f6773;
border-bottom: 1px solid #111;
color: #eee;
background-color: #393E46;
}
}
#subtop {
background-color: transparent;
#subNav {
background-color: #222831;
dl {
margin: 1rem;
background-color: transparent;
border: 0;
dt {
color: #eee;
background-color: #393E46;
}
}
.navi-list-2col {
background-color: transparent;
dd {
border-color: #666;
border: 1px solid;
border-right: 0;
background-color: inherit;
&:nth-of-type(4n+1) {
border-left: 0;
}
&:not(:last-of-type) {
border-top: 0;
}
&:nth-of-type(-n+4) {
border-top: 1px solid;
}
&:last-of-type {
border-top: 0;;
border-right: 1px solid;
}
a {
border: 0;
}
}
a {
color: #00ADB5;
background-color: transparent;
}
}
}
a {
color: #2F4F2F;
}
}
footer {
background-color: #222831;
}
}
body {
font-family: "Roboto", sans-serif;
}
#main {
width: 100%;
max-width: 1200px;
margin-inline: auto;
&> #section {
border: 0;
}
}
.content {
grid-template-columns: unset;
grid-template-columns: repeat(4, 1fr);
gap: 20px 10px;
section {
padding: 0;
overflow: hidden;
.card {
width: 100%;
margin: 0;
box-shadow: unset;
background: unset;
border-radius: 5px 5px 0 0;
position: relative;
display: grid;
grid-template-areas: "thumb" "title";
grid-template-rows: 150px 80px;
overflow: inherit;
.thumb {
width: 100%;
height: 100%;
a {
display: unset;
}
img {
width: 100%;
max-width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
}
& > .date-parent {
grid-area: thumb;
display: flex;
align-items: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1.5rem;
background-color: rgba(0,30,50,50%);
.date {
display: flex;
align-items: center;
font-size: 0.8125rem;
background-color: transparent;
.date-child {
height: 1rem;
line-height: 1.5;
}
a {
color: #eee;
}
}
}
h2 {
display: flex;
justify-content: center;
font-size: 0.85rem;
margin: 0;
line-height: 1.5;
font-weight: normal;
letter-spacing: 0.05rem;
padding: 0.5rem 0.3rem;
a {
display: -webkit-box;
width: fit-content;
margin-inline: auto;
height: max-content;
font-size: inherit;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
text-overflow: ellipsis;
overflow: hidden;
}
}
}
}
}
#nextpage {
margin: 2rem auto 3rem;
}
#subtop {
#subNav {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
dl {
width: 100%;
text-align: center;
margin-inline: auto;
margin: 1rem;
dt {
text-align: center;
width: 100%;
}
dd {
padding: 1rem 0;
}
}
.list-2 {
&.navi-list-2col {
display: grid;
width: min(150px, fit-content);
grid-template-columns: repeat(4, 1fr);
max-width: unset;
&::after {
display: none;
}
dt {
grid-column: 1 / span 4;
margin-bottom: 3rem;
}
dd {
border-color: #333;
border: 1px solid;
border-right: 0;
background-color: inherit;
&:nth-of-type(4n+1) {
border-left: 0;
}
&:not(:last-of-type) {
border-top: 0;
}
&:nth-of-type(-n+4) {
border-top: 1px solid;
}
&:last-of-type {
border-top: 0;;
border-right: 1px solid;
}
a {
border: 0;
}
}
}
dd {
display: flex;
width: 100%;
margin: 0;
flex-flow: row wrap;
align-items: center;
a {
display: flex;
justify-content: space-between;
width: 100%;
margin: 0;
padding: 0 2rem;
line-height: 1;
border-top: none;
align-items: center;
& > * {
display: unset;
margin: 0;
}
i {
display: block;
}
b {
...