RAKUS Developers Blog | ラクス エンジニアブログ

株式会社ラクスのITエンジニアによる技術ブログです。

Stylusでデザインを変更してみた

はじめに

こんにちは。新卒2年目のmrym_618です。 最近業務でChrome拡張の「Stylus」を使い、CSSの設定とデザインの変更を行うことがありましたので、 今回はその使い方について紹介していきたいと思います。

Stylusとは

Stylusとは、特定のCSSをブラウザ側で設定するためのChrome拡張機能です。

インストール方法

インストール方法は、以下のサイトより

chrome.google.com

Chromeウェブストアを開き、「Chromeに追加」を押してインストールするだけです。

f:id:mrym_618:20200218131219p:plain

インストールが完了すると以下の画像のようなアイコンが表示されます。

f:id:mrym_618:20200217023945p:plain

CSSの設定方法

CSSを設定したいサイトを開いたままインストール完了後に表示されるようになったSのアイコンをクリックします。すると以下のようなダイアログが表示されますので、赤枠のようにCSSを設定したいURLをクリックします。

f:id:mrym_618:20200217030012p:plain

すると、スタイルの編集画面が表示されますので、実際に適用したいCSSを記述します。

f:id:mrym_618:20200217031420p:plain

今回は、このサイトのタイトルと注釈の色を変更してみたいと思いますので、以下のように記述します。

.header-image-enable #blog-title #title a {
    color:#000000 ;
}
.header-image-enable #blog-title #blog-description {
    color:#000000 !important;
}

CSS設定後、Sアイコンで表示されるダイアログにチェックを入れることでCSSを適応することができます。

f:id:mrym_618:20200218004334p:plain

CSSの適応を無効にしたいときは、チェックボックスのチェックを外すかすべてのスタイルをオフにするにチェックを入れることで無効にすることができます。CSSを編集したい場合は、鉛筆マークを押すことで編集画面に遷移することができます。

おわりに

今回は、CSSを設定することで自由にデザインの変更をできるStylusについて紹介しました。

Stylusを使い自分独自のCSSを設定することで、Webサイトを見やすくて使いやすいようにカスタマイズすることができますので、皆さんもぜひ試してみてください。

Copyright © RAKUS Co., Ltd. All rights reserved.