この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
GitHub上でコードレビューを行う際、もうちょっと幅が広いとありがたいなと思ったことはないでしょうか？
幅を広げるため、これまでは「Widescreen for GitHub」というChrome拡張を使っていました。しかし、最近のGitHubのアップデートによりサイトの構造が変わったのか、2019年7月29日現在ではコード幅がうまく広がらなくなってしまいました。
そこで、CSSをいじくってなんとかしようというのが、本エントリです。
やり方
先日弊社の稲葉が書いた記事を参考に「Stylus」Chrome拡張をインストールし、カスタムCSSを設定できるようにしてください。
そして、以下のCSSを追加します。
/* 全体の幅 */
.container-lg {
max-width: calc(100% - 40px);
}
/* コメント用 */
.comment-holder, .inline-comments .inline-comment-form, .inline-comments .inline-comment-form-container, .timeline-new-comment {
max-width: calc(100%);
}Before & After
CSS適用前がこちら
適用後がこちら
画面いっぱいに広がっているのがわかりますね。
まとめ
特定用途のChrome拡張は便利ですが、サイトデザイン変更にすぐ追従されないこともよくあります。そんな時でもあきらめず、代替する手は案外あるので、みんなでGitHub生活をエンジョイしていきましょう！
19
