Wikipediaのレイアウトの横幅が狭いのでCSS上書きで広くしてみた

はじめに

Wikipedia （ウィキペディア） のデザインレイアウトの横幅が狭くて耐えられないので広くしてみました。現時点で期待通りに動いていますが、将来の wikipedia 側のデザイン変更で使えなくなる可能性があります。ご利用は自己責任でどうぞ。

Before

After

手順

1. Chrome に Stylus をインストール

2. Stylus の管理画面を開いて新スタイルを作成する

3. 次のようなスタイルシートを書く

最終更新日 2023-04-23

注意 全画面にするには右下のボタンをクリックして幅を広げてください

@-moz-document domain("wikipedia.org") {
    #content {
        font-size: 90%;
    }
    .vector-feature-limited-width-enabled .mw-body {
        grid-template-columns: minmax(0,74em) min-content;
    }
    .vector-feature-limited-width-disabled .mw-body {
        grid-template-columns: none;
    }
    .mw-page-container-inner  {
        grid-template-columns: 220px minmax(0,1fr);
        column-gap: 0px !important;
    }
    .mw-page-container {
        padding-left: 1em;
        padding-right: 1em;
    }
    .vector-feature-toc-pinned-enabled #mw-panel-toc {
        margin-left: -8px;
    }
    .vector-toc-link .vector-toc-text {
        width: auto !important;
    }
    #vector-toc {
        font-size: 14px;
    }
    #vector-toc:after {
        background: none !important;
    }
    #vector-toc-pinned-container .vector-toc {
        padding-top: 0;
        padding-right: 0;
    }
    .vector-settings {
        opacity: 0.4;
    }
    .vector-settings:hover {
        opacity: 1;
    }
}