自由にデザインが変えれるブラウザ拡張「Stylish」のご紹介

こんにちは。こんばんは。
みき です。

今回は「Stylish」という自由にデザインを変更できるブラウザ拡張をご紹介します!!

Stylishとは?

StylishはGoogle ChromeやFireFoxの拡張機能(ブラウザアドオン)です。

Stylishはどんなブラウザ拡張かと言うと
Stylishを使えばだれでも(CSSが分かる方であれば)webサイトのデザインを変更することができるのです!!

つまり自分の好きなようにサイトをカスタマイズすることができるのです!!

と言うわけで早速使ってみたいと思います!!

Stylishのインストール

ではStylishをインストールしていきます!!

まずはChrome版をダウンロードしていきます。

Chrome版Stylishのインストール

まずはChromeウェブストアのStylishのページにアクセスします。

アクセスしたら右上にある[CHROMEに追加]をクリックしてください。

クリックすると権限の確認がでてくるので権限を確認してから[拡張機能を追加]をクリックしてください。

これでインストールが完了しました!!

簡単ですね♪

続いてFirefox版をインストールしていきます!!

Firefox版Stylishのインストール

まずはFirefox版Stylishのインストールページにアクセスします。

アクセスできたら[Firefoxへ追加]をクリックしてください。

すると下記のようなダイアログが表示されるので[インストール]をクリックしてください。

するとFirefoxの再起動を促すダイアログが表示されます。

StylishのインストールにはFirefoxの再起動が必要なので[今すぐ再起動]をクリックしてください。

Firefoxの再起動が終わるとツールバーにStylishが表示されます。

これでインストールは終わりです!!

Stylishの使い方

Stylishの使い方です!!

まずはChrome版から説明していきます!!

Chrome版Stylishの使い方

まずはツールバーのStylishをクリックしてください。

すると下のような画面が表示されるので[新しいスタイルを作る]をクリックしてください。

クリックすると新規タブで以下のようなページが開きます。

ここからはcomivelのデザインを変えていきたいと思います!!

まずは右上の[名前を入力してください]と書いてある入力ボックスに分かりやすいスタイルの名前を入力してください。

今回は「comivelのカスタマイズ」と入力します。

ではCSSを書いていきます。

今回は分かりやすいようにheaderの色、メニューの色、背景の色を変更したいと思います!!

今回入力するCSSです。

#header,
#header-in {
background-color:#20932d;
}
#navi,
#navi ul {
background-color:#ff4949;
}
#navi ul {
border-color:#ff4949;
}
body.custom-background{
background-color:#ffe96d;
}

上記のCSSをコード 1と書かれたところに記入してください。

記入ができたら適用サイトを指定します。

※comivel.netを開いた状態でスタイルの作成を行った場合は自動で入力されています。

適用サイトの指定はCSS記載場所の下にある[適用先]で指定します。

今回はcomivelすべてで適用させるので以下のように設定してください。

ドロップダウンからドメイン上のURLを選択して入力ボックスに[comivel.net]と入力

入力後の画面↓

適用するサイトの設定ができたら保存をクリックしてスタイルを適用させてください。

保存が完了するとスタイルが適用されます。

通常時のcomivel↓

上記CSSを適用状態comivel↓

どうです?
すごいでしょ!!

ちなみに色はChromeを意識して緑、赤、黄色を利用しました!!

適用後の画像で赤く囲みましたがスタイルが適用されているページには適用されているスタイルの数がツールバーに表示されます!!

このスタイルを無効化させたいときはツールバーからstylishをクリックして[インストールされたスタイル]を選択してください。

選択できたら[comivelのカスタマイズ]と言う項目があるのでカーソルを合わせて[無効にする]をクリックしてください。

サンプルではcomivelのカスタマイズだけですが
さまざまなサイトにスタイルを適用した場合に
すべてのサイトからスタイルを無効化したい場合は[インストールされたスタイル]の一番上にある[All styles]をオンからオフにすればすべてのサイトからスタイルが無効化されます。

以上でChrome版stylishの主な使い方の説明は終了です!!

Firefox版Stylishの使い方

続いてはFirefox版Stylishの使い方です。

多分Chrome版と変わらないと思いますが…

では、行きます!!

Firefox版ではカスタマイズしたいサイトもしくはページにアクセスしてからStylishの操作をするようです。

今回はcomivel.net全体に適用させます。

ではcomivel.netにアクセスしてください

続いてツールバーにあるStylishをクリックしてください。

クリックすると以下のように表示されるので[新しいスタイルを書く]にカーソルを合わせて[comivel.net専用…]をクリックしてください。

すると新規タブで以下のようなスタイル作成ページが開きます。

Chrome版と違い以下のコードが記述されています。

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("comivel.net") {

}

CSSを記述する場所は

@-moz-document domain("comivel.net") {

}

の間です。

今回記述するCSSです。

#header,
#header-in {
background-color:#1f58ba;
}
#navi,
#navi ul {
background-color:#e0812f;
}
#navi ul {
border-color:#e0812f;
}
body.custom-background{
background-color:#e8d035;
}

Chrome版と同じくヘッダー、メニュー、背景の色が変わります。

デフォルトの記述のCSSを記述するとこんな感じになります。

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("comivel.net") {
#header,
#header-in {
background-color:#1f58ba;
}
#navi,
#navi ul {
background-color:#e0812f;
}
#navi ul {
border-color:#e0812f;
}
body.custom-background{
background-color:#e8d035;
}
}

記述できたら左上にある[お試し(P)]をクリックしてみてください。

クリック後comivelを見てみると…

Firefoxの色である青、オレンジ、黄になっています。

個人的にはChromeの色よりもFirefoxの色のほうがしっくりきます。

そういえばスタイルの名前をつけるの忘れていました。

コードを入力するエリアの上にある[名前(N)]に名前を入力します。

今回は「comivelカスタマイズ」と言う名前にします。

名前を記入したらスタイル作成ページの右上にある[保存(S)]をクリックしてスタイルを保存してください。

これでサイトのカスタマイズは完了です!!

最後に今適用したスタイルを外してみましょう!!

これはChrome版より簡単です。

まずはツールバーのstylishをクリックしてください。

すると「comivelカスタマイズ」と言う項目が追加されているのでクリックしてチェックをはずしてください。

これだけです
簡単ですよね♪

では最後にまとめです。

まとめ

思った以上にChrome、Firefoxで違いがあってびっくりです…

個人的にはChrome版の方が使いやすかったです。

ただ無効化の方法についてはFirefoxのほうが楽でした!!

カスタマイズにはidやclassなどのコードを調べないといけませんが他の方のサイトをカスタマイズできるので面白そうです!!

皆さんもcomivelをアレンジしてみてください!!

アレンジできた方はTwitterなどで画像と一緒にご報告いただければうれしいです!!

と言うわけで今回はここまでです。

シェア、コメントよろしくお願いします m(_ _)m

それではまた次回のブログでお会いしましょう

バイバイ♪