Stylusで新しいGitHubのUIのヘッダーがコンテンツ幅と揃ってないのをどうにかする

この記事は最終更新日から1年以上が経過しています。情報が古くなっている可能性があります。

みなさん GitHub は使ってますか？私は使ってます。

こんな記事を見に来る人が GitHub 使ってない訳ないだろ！というのはそう

そうそう、ちょうど昨日（2020/6/25）あたりから GitHub の UI が突然変わりました。
今までは1カラムだったものが2カラムになったりと大幅に画面が変更されていて、しばらく慣れなさそう…。。
今まで feature preview として試験的に使えた UI が正式に採用されたみたいです。

ヘッダーがコンテンツ幅と揃ってない
Stylus でどうにかする
おわりに
1. 関連

ヘッダーがコンテンツ幅と揃ってない

…ここまではまだ許容範囲でしたが、ナビゲーションヘッダーがコンテンツ幅と揃ってない…
今回の UI 変更で、ナビゲーションヘッダーは画面幅いっぱいに広がるようになってしまいました。

普通はコンテンツ幅とヘッダー（Code とか Issuesとか）が同じ幅になっているはずで、実際その方が見やすい（視線移動がしやすい）のですが、なぜかそうなっていません（参考）。
大きいディスプレイで見た場合はコンテンツ幅が 1280px 固定なのに対しヘッダーは画面幅いっぱいに広がってしまうので、見づらさがより顕著になりそうです。

しかも以前の UI ではコンテンツ幅とヘッダーが同じだった（上の画像参照）ので余計に違和感が…
~~GitHubは早くどうにかしろ~~

Issues や Pull requests のページは以前の 1 カラムのレイアウトを 2 カラムの幅に合わせて引き伸ばしたようなレイアウトになっているので、特に目立ちます（というか単に見づらい）。
ウインドウ幅を狭めれば気になりませんが、いずれにせよ個人的には改悪と感じました。

他の UI 変更は割と良かったけど
画像だと見づらさを感じにくいですが、実際に GitHub を開いてみるとわかるはず

Stylus でどうにかする

さすがに耐えられそうになかったので、Stylus（ブラウザの拡張機能の方、メタ言語の方ではない）で GitHub 用に定義したスタイルシートを書き、ナビゲーションヘッダーをコンテンツ幅に揃えてみました。
ヘッダーをコンテンツ幅（今回は1280px）に揃えることでかなり見栄えがよくなり、視線移動もしやすくなっていると思います。

設定は簡単、

ブラウザに Stylus をインストールする
Stylus に GitHub のヘッダーをコンテンツ幅に揃えるユーザー CSS をインポートする

だけです。

もし Stylus をインストールしていない場合は Chrome は Chrome ウェブストアから、Firefox は ADD-ONS からインストールしましょう。

ユーザーで定義した CSS を適用できる拡張機能では Stylish が有名ですが、以前 Stylish の買収後に閲覧履歴を勝手に収集していたとかで Chrome ウェブストア・ADD-ONS から追放されたことがあったので、おすすめはしません（Stylus は Stylish のフォークです）

インストールできた（あるいはすでにインストールしてた）ら、GitHub 上の適当なリポジトリを開いた状態でブラウザバー上の Stylus をクリックし、ウインドウを表示します。
[次のスタイルを書く] という項目があるので、[github.com] の方にカーソルを持っていってクリックします。

[このURL] をクリックすると現在開いているページだけに適用されます
この記事では github.com 上のすべてのページに適用させてみます

[スタイルを追加] という画面が表示されるので、[Mozilla Format] → [インポート] から下記のコードを貼り付けたあと、[スタイルを上書き] からスタイルを追加します。

2020/07/19 追記: 効かなくなっていたのでスタイルを変更しました

@-moz-document domain("github.com") {
.bg-gray-light.pt-3.hide-full-screen.mb-5 {
    box-shadow: inset 0 -1px 0 #e1e4e8;
}
.bg-gray-light.pt-3.hide-full-screen.mb-5 div, .UnderlineNav {
    max-width: 1280px;
    margin: 0 auto;
}
}

最後に [保存] から変更を保存します。
GitHub をもう一度開くと、先ほどの画像のようにヘッダーをコンテンツ幅に揃えられていると思います。
Stylus は設定を保存するとリロードしなくても即座に反映されます。

@-moz-document domain("gist.github.com") {
.gisthead.pagehead .mb-3.d-flex, .reponav.js-repo-nav, .gisthead.pagehead .d-flex.px-0.pr-md-3.px-lg-5 {
max-width: 1012px;
margin-left: auto;
margin-right: auto;
padding-left: 16px !important;
padding-right: 16px !important;
}
}

GitHib Gist 用のスタイルシートは上記のようになります。