Stylesで任意のCSSを適用し、好みのデザインにしよう

目次

• 目次
• 前書き
• Styles
• おわりに

前書き

HTML, CSSを書くことができ、普段からChrmeのDevToolを使っている人間はこう思う時がたびたびある。

「このサイト使いづらいな。独自カスタムできないものか？」
と。

そこで今回紹介するのが、StylesというChromeの拡張機能だ。

任意のCSSを自動反映できる代物。他の人が一般公開したCSSカスタマイズも利用することができる。

簡単な例として、今回はQiitaの色を変えてみる。

Styles

1. 拡張機能Stylesをインストール

2. カスタマイズしたいURL(今回はhttps://qiita.com/mpyw/items/a816c6380219b1d5a3bf)へ行き、Stylesのアイコンをクリック。

   

3. 「次のスタイルを書く:qiita.comこのURL」をクリック。

4. あとは、Chrome DevToolで各要素のクラスを調べて上書き、またはカスタマイズしたり、任意のスタイルを書いたりしてゆく。

   • エディタは、シンタックスハイライトのテーマを変えたり、ホットリロード機能があったりと、かなり充実している。
   

• 今回はサンプルということで、緑調のQiitaを水色調へと変えるコードを掲載。

/* ヘッダー */
.st-RenewalHeader {
    background-color: #62a1bd;
}
.st-RenewalHeader_communitySelector {
    background-color: #56e2e2;
}
.st-RenewalHeader_postButton {
    background-color: #56e2e2;
}

/* 目次 */

.it-Toc a {
    color: #dedede;
}

/* 背景 */
.p-items_wrapper {
    background-color: #3c5f79;
}

/* LGTMカラー */
.css-1cguqpk {
    border-color:  #3fc6c8;
    background-color: #42acad;
}
.css-3bz6kw {
    border-color:  #3fc6c8;
    background-color: #42acad;
}

/* 左サイドバー */
.css-1w23gl9{
    color: #fff;
}
.css-1iupg5d {
    color: #ded8d8;
}

.css-115f4t {
    color: #ded8d8;
}

.css-1b8uj5v {
    color: #fff;
}

.css-16hhh7b {
  color: #dedede;
}


/* 記事リンク */
.it-MdContent a {
    color: #001aff;
}

.co-Item_text a {
    color: #0097ff;
}

• なお、Stylesアイコンをクリックしたのち、「スタイルを検索」を押すと、公開されているさまざまなスタイルを適用することが可能になる。

• CSS適用時の画像

  

おわりに

配色ミスで文字が読みづらかったり、好みの色ではなかったり。
そういったときにCSSを積極的に有効活用していきたいところ。

⇧目次へ戻る

F67BD3E9-7825-8D5F-3FB0-D62C0057E92A

init_ums