外部CSSを扱えるブラウザ拡張機能Stylusとは

Webサイトなどを見ていると、たまに画像がいっぱい貼ってあるサイドバーであったり、記事のあらゆる所にRSSのリンクなどが貼ってあって見にくいサイトがたくさんあります。

昔のように1からサイトを全部html等で書いている人は少なくなり今はブログサービスを利用してそのテンプレートに記事を流し込んでいるだけなのでアフィリエイト目的で作っているサイトなどは特に見にくくなっています。
それらとは別に単にデザインが問題で記事が読みにくいとか好みでないということから、もう少しなんとかできないものかと思うこともあるのではなかろうかと思うわけです。

最近のブラウザは広告に関してはある程度ブロックしてくれるのでGoogleの広告のバナーなどはブラウザの設定で勝手に消えますが、見た目が問題な部分はCSSをいじって直す必要があります。
なんならJavascriptやjQueryを使ってhtmlの構造自体を変更したい所ではあるのですがそこまでではなくCSSを変更したいという場合は外部CSSを読み込めるような拡張機能があれば事足ります。それらを可能にするものの一つがStylusです。 同じようなものは他にも色々ありますが比較的使いやすいので紹介したいと思います。

各ブラウザのStylusダウンロード リンク
Google Chrome系向け Stylus - Chrome ウェブストア
Firefox アドオン Stylus - Mozilla Add-ons

上記のリンクからブラウザに追加するだけです。

CSSを扱う

これらの拡張機能は、サイトが読み込まれた後にスタイルシートを読み込み事で従来のサイトのCSSを上書きする仕組みなんだろうと思いますが、Stylusではブラウザがサポートしていたら例えば:has、:where、:isなどの新しい構文にも対応しています。
なんせCSSを読み込んでいるだけなので。

cssによってどれぐらい変わるかは、スクリーンショットを撮ったので比較してもらえればよいかと思います。

オリジナル CSS適用
ファーストビュー
オリジナルのファーストビュー
CSSを適用したファーストビュー
少し下の記事部分
オリジナルの記事部分
CSSを適用した記事部分
テキスト
オリジナルのテキスト
CSSを適用したテキスト

オリジナルのGIGAZINEサイトでは、左カラムとメインのカラムがくっつき過ぎで更に記事もメインのカラム幅いっぱいに広がるので、スマホなどでは問題ないにしてもPCだと文字を目で追って読むのが大変です。特に行末まで行った後、次の行の先頭に視線を移す場合など。

これらの問題もあって、以下の様なことをしました。

  • 記事の幅を狭くして読みやすく
  • ごくわずかテキストにシャドウでぼかしを入れてWindowsでもほんのり綺麗に見えるように
  • リンクの左右にマージンを入れて、色がついてあるのでわかるがリンクをリンクと視認しやすく、またPCではマウスオーバーでアンダーラインを表示するようにした
  • 若干、文字間を広げ、行間も広げた
  • Twitterなどが貼り付けてある場合はセンタリング
  • 左カラムの関連リンクも見やすくした

等がしてあります。広告等が消えているのはブラウザがBRAVEだからです。BRAVEのBRAVE SHIELDを外せば広告は表示されます。

Stylusはユーザースタイルシートが読み込めます

この記事を書くにあたって、スタイルシートを公開していますので、それを探してもらって適応するだけで良いのですが、こういった外部から読み込めるものはたとえそれがCSSだとしても読み込まない方が何かとよろしいのではなかろうかと、一応こちらにも同じスタイルシートを貼っておきますので、コピペで使ってみてください。

公開スタイルシートを読み込む手順

方法としては、まずサイトを開いてブラウザのStylusのアイコンをクリックして表示されたメニューからスタイルを検索を押せば候補が出るので選択するだけです。

コピペで使う

  1. ブラウザの拡張機能Stylusのアイコンをクリック

  2. どのページを対象にするかを選択するべく、「次のスタイルを書く」の所にマウスを持っていき、gigazine.net がフォーカスされた所でクリック。「このURL」までを選んでしまうと現在見ているページだけがCSSの対象になります

  3. 2でクリックすると、新しいタブが開いてCSSが編集できるエディターが表示されるので、そのエディターにCSSをコピペするだけです。

この3で、注意するべき所は、エディタの一番下にある、どのサイトを対象にするかを設定する箇所になります。2で、正しくgigazine.netが選択できていれば、「ドメイン上のURL」の所にgigazine.netのみが表示されているはずです。

この箇所は、例えば正規表現でarchiveやarticleが含まれているURL全てなどが設定できる箇所になっていて、どのアドレスに対してCSSを適用するかの箇所になります。つまりそれぞれのサイトごとに設定せずとも同じブログサービスを利用しているものならアドレスの形式が同じような感じになるので上記のarchiveやarticleが含まれているものは全て対象にすることができます。

例えば、
https://xxxxxx.net/archives/1234.html
https://xxxxxx.com/~user/article/abcd.php

このように、URLは色々と違っててもarchivesやarticleが含まれているアドレスは全て対象にできると言う感じです。

これができると、例えば同じサービスのテンプレートなどでrssやblogrollというようなクラス名、ID名が設定されているものは不必要なら全て非表示することができますのでとても便利です。
特定のページのrssは表示したいとかなら、別のスタイルシートでそのページ専用のスタイルを読み込ませることもできます。

複数の単語に対応させるようにするためには正規表現が必要になったりもします。正規表現がちょっとややこしいですが、まぁ動けば何でもいいんですよ。

このようにしてブログサービスの共通した面倒くさい部分は非表示にしつつ、ちょっとわかっているサイト管理者が色々手を入れてある部分は、個別に消していくということが可能です。

これらはあくまでもデータ量を減らすのが目的で、湯水のようにどれだけでもデータが使えるのであれば別にそのまま何もしなくても良いのかもしれませんが、もしいつも見に行っているサイトなどでこれらをうまく使ってRSSのリンクなどを取り除いた時、本来の記事の量が一目瞭然でわかります。
たかだか100文字程度のページにその何倍ものRSSのリンクや画像、バナー、広告などが敷き詰めるようにして貼られているサイトがどれだけ無駄の押しつけをしてるのか是非体感してみてください。回線の速さに甘えて無駄なものをたくさん表示させられるのは良いことでしょうか？

公開しているGigazineのスタイルシート

以下をコピペ

*,*::before,*::after {
    /*content: "";*/
    box-sizing: border-box;
    clear: both;
}

/*structure*/

#header {
    grid-template-areas: "logo1 logo2 logo3" "other other other";
}
#header > div {
    grid-area: other;
}
#header > .logo {
    grid-area: logo2;
    margin: 0 auto;
}

#main {
    width: unset;
    max-width: 1200px;

    display: grid;
    grid-template-areas: "left center" "left bottom";
    grid-template-columns: 1fr min(70ch, 100%);
    grid-gap: 1rem;

    margin: 0 auto;
}

#main > #article {
    position: relative;
    width: unset;
    grid-area: center;
    padding: 2rem 1rem;
}

/*footer*/
dl.navi-list-2col.comments {
    display: flex;
    flex-direction: row;
    align-content: center;
    flex-wrap: wrap;
    margin: 0 auto;
}

footer {
    padding: 2rem;
}

/*main article*/
#article .cntimage p,
#article .cntimage pre {
    width: min(80ch, 80%);
    margin: 0 auto 1rem;
    line-height: 1.7;
}

@media (width <= 768px ) {
    #article .cntimage p {
        width: 100%;
    }
}


#main > #latest {
    width: unset;
    grid-area: left;
    background-color: #e9edfb;
}

#main > #sub {
    grid-area: bottom;
}


@media (1200px >= width >= 768px )  {
    #main {
        grid-template-areas:
            "top"
            "middle-bottom"
            "bottom";
        grid-template-columns: 100%;
    }

    #main > #article {
        grid-area: top;
    }
    #main > #latest {
        grid-area: middle-bottom;
    }
}

@media (width <= 768px )  {
    #main {
        grid-template-areas:
            "top"
            "bottom";
        grid-template-columns: 100%;
    }
        #main > #article {
        grid-area: top;
    }
    #main > #latest {
        grid-area: bottom;
    }
}

/*title*/

.cntimage > div[style="width:100%;position:relative;"] {
    margin-top: 1.5rem;
}

.cntimage .title {
    background: unset;
    margin: unset;
    padding: 0 1rem 1rem;
    line-height: 1.1;
    font-size: unset;
    font-size: clamp(1.125rem, -0.125rem + 4.167vw, 3rem);
    text-shadow: 0px 0 5px #816368;
    color: #111;
}

/*link and article title*/

a:visited {
    color: #916ceb;
}

.cntimage p br + b,
.cntimage p br + b a,
p.article b a {
    display: inline-flex;
    line-height: 1;
}

p.article br + br {
    display: block;
    height: 0;
}

p.preface {
    letter-spacing: 0.25px;
    text-shadow: 0px 0 2px #816368;
}

.cntimage p.preface a {
    position: relative;
    margin: 0 0.25rem;
}

.cntimage p.preface a:hover {
    text-decoration: underline;
}

/*embed twitter */
.twitter-tweet {
    margin: 1rem auto;
}

/*image*/

.img-standard-size {
    width: unset !important;
}

#article .cntimage img {
    display: flex;
    object-fit: cover;
    width: min(70ch, 80%);
    margin: 1rem auto;
    align-items: center;
}

#article .cntimage img.lzsmall.img-standard-size {
    display: block;
    width: 100% !important;
    aspect-ratio: 16/9;
}

/*video*/
video {
    display: block;
    margin: 2rem auto 1rem;
}

video + br {
    display: none;
}


/*url clip*/
#URLClip {
    display: flex !important;
    justify-content: space-around;
    align-items: center;
    margin: 1rem auto;  
}

/*pre*/
.cntimage pre {
    display: block;
    padding: 20px;
    font-size: 16px;
    letter-spacing: -0.022em;
    line-height: 1.18;
    background-color: #e6e6e6;
    overflow: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-width: 100%;
}

.cntimage pre code {
    background-color: unset;
    color: #111;
    padding: unset;
    border-radius: unset;
    font-family: monospace;
    font-size: 1em;
}

/*left list*/
#latest ul {
    margin: unset;
}

#latest li {
    margin: unset;
    margin-bottom: 1.5rem;
}

#latest #list {
    padding: 1rem 2rem;
}

#yt-ranking li {
    width: unset;
}

#yt-ranking li {
    width: min(calc((100% / 3) - 10px), 300px);
}

#yt-ranking ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

.yt-ranking-link {
    line-height: 1.2;
}

改造したりなどはご自由にどうぞ。何かしらおかしな所があったり、もしご自身で直せないとかあるいはここに設定していないリスト等の構造などが記事に掲載された場合に表示がおかしいなどがあった場合は、報告いただければ直せるようなら直します。

htmlの構造上どうしてもcssだけではムリという場合があるのでそれらについても重ねてご了承下さい。

最後に

GIGAZINEは広告収益を上げるべくたくさん広告が入っていて、読みにくく、光回線を常時利用できるような環境であれば何ら問題はありませんが、テザリングしてPCを使っているような環境ではむしろ(広告を読み込むデータが)重いし、写真も多用されていて本当に気になった記事しか読みに行くことは無いかもしれません。
しかしそれらを寛容な心で許せる場合は記事の内容も多様で役に立つようなことも多く掲載されています。 軽く読みやすいデザインで、広告も控えめになるような何かしらの良い方法でサイトがこれまで以上に読まれるようになれば、もっと良くなるのにと常々思っていたりします。 運営していくには費用も必要だし広告をなくすのも難しいかもしれませんが、何かしら良い方法はないものかなぁと。