GIGAZINEの見た目をシンプルに、新しくできるUserStyle。
Simple GIGAZINE by irh
Details
Authorirh
LicenseMIT
Categorygigazine.net
Created
Updated
Size32 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Simple GIGAZINE
🌟 - これはGIGAZINEの見た目をシンプルに、新しくできるUserStyleです。
✅ - "Stylus"などのブラウザ用拡張機能を使用して適用することができます。
🐛 - 動作確認は解像度WQHD、表示倍率100%でLinux上のFirefoxでしか行っていません。
🗃️ - ”シークレットメンバー”会員でないため、会員ページなどでの動作については未確認です。現在記事ページ及びトップページのみ対応しています。また、誤字脱字の指摘ページはまだ対応していません。
🚧 - レスポンシブ対応は完璧に対応していませんが、FHD以上のPCであれば大抵問題は起きないと思います。
📨 - このUserStylesは今後通知せず更新される可能性があります。更新は改良や修正などのために行われます。
⚠️ - ご注意
--------------------------------------------------------------------------------
これはGIGAZINE様とは関係のない個人が作成したものです。
不正確な情報が表示されたりレイアウトの破綻が起きる可能性があります。
今後の更新により正常に利用できなくなる可能性があります。
このCSSを利用した際に生じたいかなる損失に対しても製作者は責任を負うものではないことを予めご了承ください。
このUserStyleは通知せずに削除される可能性があります。
GIGAZINEの広告削除は行っていません。
ユーザの個人情報の収集などは全く行っていません。
-----------------------------------------------------------------------------------------
(c) 2022 irh
Released under the MIT license
https://opensource.org/licenses/mit-license.php
設定一覧
Enable Image Width 100%：画像の横幅を大きくします。
整って見えますが次のSet Max Widthと併用しないと画像が大きくて見づらくなるかもしれません。
Set Max Width：記事表示エリアの横幅を小さくします。元の状態より遥かに読みやすいです。
レスポンシブ対応が行われていないので画面サイズにより表示崩れが発生します。
現状,オフの場合に小さい画面で表示崩れが発生します。オンオフ両方確かめてから適したほうを使用してください
読みさすさを向上させる(字間やハイフネーションの調整)：デフォルトはオンです。タイトルの通りです
BIZ UDPGothicにフォントを変更：フォントをBIZ UDPGothicに変更します。窮屈になるかもしれないです。人により見やすいかも。
Changelog
アップデート履歴です。
- 1.1.0
レスポンシブ対応を強化
不必要なoverflow: hiddenを削除して、意図せず表示されない領域がなるべく出ないように
ヘッダーの文字が中央からずれていた問題を修正
記事表示画面の不必要なマージン(中央寄せなので無くても変わらない)などを、整理
最新の記事を強調して表示するように変更
記事一覧画面をGridでレスポンシブに対応、記事カードホバー時などの拡大率を修正
画面サイズによっては、"Set Max Width"がオフだと崩れるので、オンをデフォルト化
ついでに"Set Image Width 100%"をデフォルト有効化
変更が多いためコメントなどでのフィードバックがあると嬉しいです
バージョンを上げた
- 1.0.3
トップページの記事一覧でタグ名をホバー時の効果をきれいに
hoverのみでなくactiveも設定してリンクをクリックしたときにも効果をつけた。
バージョンを上げた
- 1.0.2
記事のカードのホバー時、クリック時のアニメーションを追加
人気動画の画像ホバー時のアニメーションを追加
リンクコピーボタンのデザイン変更、ホバー時クリック時のアニメーション追加
記事一覧画面で２ページ目以降でスタイルが適用されいない問題を修正
バージョンを上げた
- 1.0.1
UDゴシックへのフォント変更をオプション化
字間、ハイフネーションの調整による可読性の向上を図るオプションを追加（デフォルト：オン）
バージョンを上げた
- 1.0.0
初回版リリース
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Simple GIGAZINE
@description GIGAZINEをシンプルに、読みやすく。(画面サイズによっては対応できていません)
@namespace irh.dsgn.simple_gigazine
@author irh
@version 1.1.0
@license MIT
@preprocessor stylus
@var checkbox image-width_100 "Enable image width 100%" 1
@var checkbox max-width "Set Max Width" 1
@var checkbox readability "読みさすさを向上させる(字間やハイフネーションの調整)" 1
@var checkbox font-ud "BIZ UDPGothicにフォントを変更" 0
==/UserStyle== */
@-moz-document url-prefix("https://gigazine.net/"),
url-prefix("http://gigazine.net/") {
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&family=Jost&display=swap');
/*
Simple GIGAZINE
🌟 - これはGIGAZINEの見た目をシンプルに、新しくできるUserStyleです。
✅ - "Stylus"などのブラウザ用拡張機能を使用して適用することができます。
🐛 - 動作確認は解像度WQHD、表示倍率100%でLinux上のFirefoxでしか行っていません。
🗃️ - ”シークレットメンバー”会員でないため、会員ページなどでの動作については未確認です。現在記事ページ及びトップページのみ対応しています。また、誤字脱字の指摘ページはまだ対応していません。
🚧 - レスポンシブ対応は完璧に対応していませんが、FHD以上のPCであれば大抵問題は起きないと思います。
📨 - このUserStylesは今後通知せず更新される可能性があります。更新は改良や修正などのために行われます。
⚠️ - ご注意 --------------------------------------------------------------------------------
これはGIGAZINE様とは関係のない個人が作成したものです。
不正確な情報が表示されたりレイアウトの破綻が起きる可能性があります。
今後の更新により正常に利用できなくなる可能性があります。
このCSSを利用した際に生じたいかなる損失に対しても製作者は責任を負うものではないことを予めご了承ください。
このUserStyleは通知せずに削除される可能性があります。
ユーザの個人情報の収集などは全く行っていません。
-----------------------------------------------------------------------------------------*/
/*
(c) 2022 irh
Released under the MIT license
https://opensource.org/licenses/mit-license.php
*/
/* ここから */
html {
/*overflow-x: hidden!important;*/
}
body {
width: 100%;
padding: 0!important;
margin: 0!important;
}
.article * {
line-height: .2rem!important;
}
.article > br {
display: none;
}
.article > b:nth-child(1)::after {
content: "";
height: 0px;
}
.article > b:after {
content: "";
display: block;
width: 100%;
height: 1px;
margin-bottom: 3px;
background-color: #ffffff21;
top: 0;
left: 10px;
}
.cntimage blockquote {
background: #ffffff0f;
padding: 1em 3em;
color: #fff;
border: solid #4d4d4d 2px;
border-left: solid #fc0;
border-radius: 6px;
margin-left: 0!important;
}
.cntimage blockquote a {
color: #547ccc!important;
transition: .3s!important;
}
.cntimage blockquote a:hover {
color: #8baae6!important;
text-decoration: underline;
}
if image-width_100 {
.cntimage img {
width: 100%!important;
}
}
if font-ud {
* {
font-family: 'BIZ UDPGothic', sans-serif!important;
}
}
#subNav {
background: transparent!important;
border: solid #ffffff14 1px;
padding: 20px 30px!important;
border-radius: 6px;
}
.gsc-search-button {
display: none;
}
#searchform {
overflow: hidden;
}
#ranking-entry > ol > li:nth-child(n + 4) {
display: none;
}
#yt-ranking > ul > li:nth-child(n + 4) {
display: none;
}
#yt-ranking > ul > li > .yt-ranking-link > a {
line-height: 1.2rem!important;
color: #ffffffc4 !important;
font-size: 0.8rem;
}
#yt-ranking > ul > li > .yt-ranking-link {
line-height: 1rem!important;
padding: 0!important;
}
#ranking-entry > p {
display: none;
}
.list-2 {
display: none!important;
}
* {
line-height: 2em!important;
}
h1.title {
line-height: 2.8rem!important;
}
div h2 a {
background-color: #242424!important;
height: 115px!important;
}
h2 a span {
color: #e3e3e3!important;
margin: 30px!important;
}
#header {
position: fixed;
padding: 10px 0px;
top: 0;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.8)!important;
width: 100%!important;
display: flex!important;
justify-content: center!important;
align-items: center!important;
backdrop-filter: saturate(180%) blur(20px);
}
#header-social-button-box {
display: none;
}
#header > .logo {
height: 1.8rem;
}
#header > .logo > a::after {
pointer-events: none;
font-size: 1.8rem;
font-weight: bold;
content: "GIGAZINE"!important;
color: #fff!important;
display: block;
margin-bottom: 3rem;
font-family: 'Jost', sans-serif!important;
letter-spacing: 3px;
/*margin-right: 1.5rem!important;*/
}
.logo > a > svg {
display: none;
padding: 10px 1px 10px 1px!important;
margin: 20px!important;
border-radius: 8px!important;
background-color: #fff!important;
height: 50px!important;
width: 130px!important;
}
body {
background-color: #171717!important;
margin: 0!important;
}
#section {
border-style: none!important;
}
div div section {
margin: 10px!important;
}
.e_ad a {
color: #d6d6d6;
background: transparent!important;
}
.e_ad > .card {
background: transparent!important;
}
.e_ad h2 {
background: transparent!important;
}
.e_ad {
margin-bottom: 1vh!important;
border-bottom: solid 1px #595959!important;
}
.e_ad > .card > .date {
background: transparent!important;
}
.twitter-tweet {
margin-left: 1.5vw!important;
}
div.date {
background-color: #242424!important;
height: 40px!important;
border-radius: 0px 0px 8px 8px!important;
}
.card {
border-radius: 8.5px!important;
background-color: #000!important;
color: #000!important;
}
div time a {
color: rgb(117, 117, 117)!important;
margin: 30px!important;
}
.yeartime {
font-size: .8rem!important;
}
.cntimage > div {
display: flex!important;
flex-direction: column;
justify-content: center;
}
#ranking-entry > ol > li {
list-style-type: none;
}
#ranking-entry > ol {
padding: 0!important;
}
#ranking-entry > ol > li {
display: flex;
align-items: center;
padding-bottom: 10px;
border-bottom: solid 1px #ffffff12;
}
#ranking-entry > ol > li > * {
line-height: 1.6em!important;
font-size: .9em;
}
#yt-ranking > ul > li > div > a > img {
transition: .2s;
object-fit: cover;
}
#yt-ranking > ul > li > div {
overflow: hidden!important;
}
#yt-ranking > ul > li > div > a > img:hover {
transform: scale(1.1);
object-fit: cover!important;
}
#yt-ranking > ul > li > div > a > img:active {
transform: scale(0.8);
}
#ranking-entry > ol > li:nth-child(1)::before {
content: "1";
color: #ffffffd9;
font-size: 1.1rem;
font-weight: bold;
display: block;
margin-right: 9px;
}
#ranking-entry > ol > li:nth-child(2)::before {
content: "2";
color: #ffffffd9;
font-size: 1.1rem;
font-weight: bold;
display: block;
margin-right: 9px;
}
#ranking-entry > ol > li:nth-child(3)::before {
content: "3";
color: #ffffffd9;
font-size: 1.1rem;
font-weight: bold;
display: block;
margin-right: 9px;
}
span.catab {
color: rgb(102, 102, 102)!important;
margin-right: 28px!important;
padding: 0px 5px!important;
border-radius: 3px!important;
transition: .3s!important;
}
span.catab:hover {
color: #7a7a7a!important;
background-color: #363636!important;
}
img.lazyloaded {
border-radius: 8px 8px 0px 0px!important;
}
img.lzsmall {
border-style: none!important;
}
.cntimage img {
border-style: none!important;
border-radius: 3px!important;
margin: 1rem 0!important;
}
#article {
overflow: visible!important;
border-style: none!important;
}
p.preface {
color: #cbcbcb!important;
/*margin-left: 30px!important; */
font-size: 1rem!important;
}
if readability {
p.preface {
margin-bottom: 3rem;
hyphens: auto;
line-break: strict;
overflow-wrap: break-word;
word-break: break-word;
letter-spacing: 0.05em;
font-feature-settings: "palt" 1;
/* font-weight: 500; */
/*font-size: 1em!important;*/
/*line-height:1.6!important;*/
}
}
h1.title {
background-color: transparent!important;
color: #e3e3e3!important;
font-size: 2em!important;
margin: 0px!important;
margin-top: 1rem!important;
padding: 0px!important;
margin-bottom: 80px!important;
}
div p b {
color: #e3e3e3!important;
}
p b a {
color: #547ccc!important;
transition: .3s!important;
}
p b a:hover {
color: #8baae6!important;
text-decoration: underline;
}
p b a:active {
text-decoration: none;
}
div span a {
color: #547ccc!important;
transition: .3s!...