Chrome FirefoxのCSSカスタマイズ Stylus の使い方・初期設定方法

Stylus

Webブラウザでページを表示する際にはCSSという機能によりデザインが決定されています。そんなCSSを自由に書き換え、デザインを書き換えたり、不要な要素を非表示にすることができるStylusという拡張機能が公開されています。この記事ではGoogle Chrome、Firefox向けにStylusの設定方法や使い方をまとめます。

Stylus 設定方法

Stylus をインストール

拡張機能『Stylus』のインストールを行います。ChromeやFirefoxのウェブストアにて、配布されているためそちらからインストールを行います。

Google Chrome

GoogleChromeにて以下のページのリンクを開き、画面右上に表示される『Chromeに追加』のボタンからインストールを行います。権限の許可を聞かれますので、『拡張機能を追加』をクリックすることでインストールされます。

Stylus Google Chrome

Stylus - Chrome ウェブストア

Stylus でウェブのデザインを変更しましょう。これは、ユーザースタイルを管理するツールです。Stylus を利用すると、多くの人気サイト向けのテーマやスキンを簡単にインストールできます。

chromewebstore.google.com

FireFox

Firefoxにて以下のページのリンクを開き、『Firefoxに追加』のボタンからインストールを行います。権限の許可を聞かれますので、『追加』をタップすることでインストールができます。

Stylus FireFox

Stylus – 🦊 Firefox (ja) 向け拡張機能を入手

Firefox 向け Stylus をダウンロード。お気に入りのWebサイトをStylusでデザインしましょう。Stylusは、アクティブに開発されているコミュニティ主導型のユーザースタイル管理ツールです。有名なオンラインリポジトリからカスタムテーマを簡単にインストールしたり、あなたの個人用のCSSスタイルシートを作成したり、編集したり、管理したりすることができます。

addons.mozilla.org

CSS設定方法

拡張機能のインストールが終了すると、ウェブブラウザ画面右上のパズルのピースのようなアイコンをしている拡張機能の項目に、『Stylus』が追加されます。

『Stylus』をクリックすると、現在のページのCSSの適用状況や設定、管理するウィンドウが用事されます。。

CSSを適用したいページを開いた状態で、このウィンドウを表示すると『次のスタイルを書く』の項目の下に、現在のページのURLが表示されていることがわかります(上記画像では当ブログ skypenguin.net)。

この状態で、『次のスタイルを書く』ボタンをクリックすることで、現在のページに適用するCSSの設定画面に移ります。

このページの画面右側のテキスト入力部分に、必要なCSSコードを入力、右側のサイドメニュー上にある、保存ボタンを押すことでCSSの設定が可能となります。

CSSの適用範囲の設定

ウェブページを開いた状態で、スタイルを書くを押すと自動的にそのページのCSSを各設定がされますが、この設定項目は変更が可能となっており、CSSを適用するウェブページの指定が可能となっています。

CSSコードを各部分の上にあるボックスにて適用範囲を設定することが可能となっており、初期状態では『ドメイン上のURL』となっており、そのドメインにある全てのページに適用することになります。

これを『すべて』に変更すれば、全てのWebページに適用するCSSになりますし、『URL』を指定してしまえば、指定したページのみに適用するCSSとすることも可能。ただ、URL指定の場合は、パラメータなどが付加された場合には動かないため、その場合には『次で始まるURL』を使用するとよさそうです。他にも、正規表現を活用した指定もできるようになっています。

他の人が作ったスタイルの検索・インポート

さらに現在開いているページに適用できる他の人が作ったスタイルを検索し、利用することも可能。

適用したいウェブページを開きながら、『クリックしてオンラインでスタイルを検索。』をクリックすることで、現在のウェブページに適用できる公開済みのスタイルの検索が可能。

それぞれの検索結果から、気に入ったスタイルを適用して見た目を変更することができるようです。