2017.02.23スポンサーリンクこんにちは。(@miki_ud1)です。今回は「Stylish」という自由にデザインを変更できるブラウザ拡張をご紹介します!!Stylishは閲覧履歴を取得していたとしてChrome版、Firefox版ともに削除されました。そのためURLを削除させて頂きます。現時点での使用は大変危険なのでご注意ください。人気のFirefox拡張機能「Stylish」がポリシー違反でブロック、すべての閲覧履歴を収集か/有志のセキュリティエンジニアによる調査で発覚Mozillaは3日(米国時間)、拡張機能「Stylish」を「Firefox」のブロックリストに追加したことを明らかにした。Add-ons”での掲載が中止されるほか、利用中の場合は自動で無効化され、利用できなくなる。ChromeやFireFoxの拡張機能(ブラウザアドオン)です。Stylishはどんなブラウザ拡張かと言うとStylishを使えばだれでも(CSSが分かる方であれば)webサイトのデザインを変更することができるのです!!つまり自分の好きなようにサイトをカスタマイズすることができるのです!!と言うわけで早速使ってみたいと思います!!StylishのインストールではStylishをインストールしていきます!!まずはChrome版をダウンロードしていきます。Chrome版StylishのインストールまずはChromeウェブストアのStylishのページにアクセスします。Chromeウェブストアから削除されたためURLを削除しました。アクセスしたら右上にある[CHROMEに追加]をクリックしてください。クリックすると権限の確認がでてくるので権限を確認してから[拡張機能を追加]をクリックしてください。続いてFirefox版をインストールしていきます!!Chrome版stylishの使い方にここから飛ぶことができますFirefox版StylishのインストールまずはFirefox版Stylishのインストールページにアクセスします。Firefoxから削除されたためURLを削除しました。アクセスできたら[Firefoxへ追加]をクリックしてください。すると下記のようなダイアログが表示されるので[インストール]をクリックしてください。するとFirefoxの再起動を促すダイアログが表示されます。StylishのインストールにはFirefoxの再起動が必要なので[今すぐ再起動]をクリックしてください。Firefoxの再起動が終わるとツールバーにStylishが表示されます。これでインストールは終わりです!!Firefox版stylishの使い方にここから飛ぶことができますStylishの使い方Stylishの使い方です!!まずはChrome版から説明していきます!!Chrome版Stylishの使い方まずはツールバーのStylishをクリックしてください。すると下のような画面が表示されるので[新しいスタイルを作る]をクリックしてください。クリックすると新規タブで以下のようなページが開きます。ここからはcomivelのデザインを変えていきたいと思います!!まずは右上の[名前を入力してください]と書いてある入力ボックスに分かりやすいスタイルの名前を入力してください。今回は「comivelのカスタマイズ」と入力します。CSSを書いていきます。今回は分かりやすいようにheaderの色、メニューの色、背景の色を変更したいと思います!!今回入力するCSSです。{border-color:#ff4949;}body.custom-background{background-color:#ffe96d;}執筆時点で適用可能なCSSです。仕様の変更等により動作しなくなる可能性もございます。1と書かれたところに記入してください。記入ができたら適用サイトを指定します。※comivel.netを開いた状態でスタイルの作成を行った場合は自動で入力されています。適用サイトの指定はCSS記載場所の下にある[適用先]で指定します。今回はcomivelすべてで適用させるので以下のように設定してください。適用するサイトの設定ができたら保存をクリックしてスタイルを適用させてください。保存が完了するとスタイルが適用されます。上記CSSを適用状態comivel↓どうです?すごいでしょ!!ちなみに色はChromeを意識して緑、赤、黄色を利用しました!!適用後の画像で赤く囲みましたがスタイルが適用されているページには適用されているスタイルの数がツールバーに表示されます!!このスタイルを無効化させたいときはツールバーからstylishをクリックして[インストールされたスタイル]を選択してください。選択できたら[comivelのカスタマイズ]と言う項目があるのでカーソルを合わせて[無効にする]をクリックしてください。styles]をオンからオフにすればすべてのサイトからスタイルが無効化されます。続いてはFirefox版Stylishの使い方です。Chrome版と変わらないと思いますが...では、行きます!!Firefox版ではカスタマイズしたいサイトもしくはページにアクセスしてからStylishの操作をするようです。今回はcomivel.net全体に適用させます。comivel.netにアクセスしてください続いてツールバーにあるStylishをクリックしてください。クリックすると以下のように表示されるので[新しいスタイルを書く]にカーソルを合わせて[comivel.net専用...]をクリックしてください。すると新規タブで以下のようなスタイル作成ページが開きます。Chrome版と違い以下のコードが記述されています。今回記述するCSSです。{border-color:#e0812f;}body.custom-background{background-color:#e8d035;}Chrome版と同じくヘッダー、メニュー、背景の色が変わります。デフォルトの記述のCSSを記述するとこんな感じになります。{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などで画像と一緒にご報告いただければうれしいです!!と言うわけで今回はここまでです。コメントをキャンセルメールアドレスが公開されることはありません。