Stylus を使ってサイトデザインを自分好みに変えよう、って話です。今回は GitHub README のスタイルをいじります。
Stylus
Stylus は閲覧するサイトの CSS を変更できるブラウザ拡張機能です。
CSS
ブラウザの開発者ツールを使って変更したい CSS クラスを探し、Stylus に以下を登録します。
.markdown-body h2 {
margin-top: 2rem;
border-bottom: solid 1px #FF7F50 !important;
}
.markdown-body h3 {
margin-top: 2rem;
margin-bottom: 1rem;
padding-left: 0.5em;
border-left: solid 4px #FF7F50 !important;
}
.markdown-body em {
text-decoration: underline;
}
.markdown-body strong {
text-decoration: underline;
}
.Label--outline {
background-color: #FFA500;
}
こんな感じになります
Before | After |
---|---|
個人的に <h2>
と <h3>
が判別しにくかったので、色をつけてマージンを追加しています。
あと Private repository のバッジが見にくいので色を付けました。
リポジトリ一覧ページ | 個別リポジトリページ |
---|---|
オススメの公開テーマ
Qiita Dark
GitHub Dark
サイトデザインに不満があるからといって、サービス運営側に要望を出しても解決されることはまずないでしょうから、オリジナルのスタイルを適用しちゃいましょう。