とっちゃん@nyanco! です。
今回は、ブラウザ（chrome、firefox）の拡張機能「Stylus」がすごく便利！というお話です。
まず、ブラウザの拡張機能（firefoxでは「アドオン」と呼ばれています）というのはずばりブラウザに機能を追加できるものです。
色んな便利な拡張機能がある中、今回は「Stylus」という拡張機能のご紹介です。
ブラウザの種類によって拡張機能は異なるのですが、この「Stylus」はchromeでもfirefoxでも全く同じように使えます。
「Stylus」は何ができるのか？
ホームページの「見た目」を定義している「CSS」を擬似的に編集することができます。
CSSの知識があれば、他人のホームページの見た目を編集できちゃうんです。
何やらハッキング臭い行為に聞こえますが、あくまで擬似的なので違法行為でもなんでもありませんのでご安心を。
「見た目を変更できて何が良いのか？」と思われるかも知れませんが、これがとっても良いのです！
以下に実例をビフォーアフターでご紹介します。
仕事でエキサイトブログを利用しているのですが、その管理画面を「Stylus」で使いやすくした例です。
ビフォー（Stylus使用前）
アフター（Stylus使用後）
いかがでしょう？アフターの方が見た目スッキリしてませんか？
「Stylus」で必要のない表示や、使わないメニュー・ボタンを非表示にしています。
こうすると、最小限のスペースで作業ができるようになるので作業効率がアップします！
（特に画面の狭いノートパソコンなどでは効果テキメンです！！）
広告がうるさいページなんかもスッキリ綺麗にさせることも可能です！
続いて、簡単な使い方の紹介をいたします。
「Stylus」の使い方
「chrome」ブラウザを使って説明しますが、「FireFox」でも大きくは変わらないと思います。
まずは下記URLから「Stylus」をインストールします。
インストールが完了すると、URLバーの右横に下記のようなアイコンが現れます。
「Stylus」を適用したいページを表示させた状態でアイコンをクリックします。
下記のようなメニューが現れるので、「次のスタイルを書く」の下のURLをクリックします。
別ウィンドウで「Stylus」のCSS編集画面が現れます。赤枠部分にCSSを記述していきます。
次に、CSSを適用したいホームページの要素を調べるため、「chrome」の「デベロッパーツール」を起動します。
ブラウザ右上にある下記のボタンをクリック→「その他のツール」→「デベロッパーツール」をクリックで起動できます。
（「ctrl」+「shift」+「J」同時押しのショートカットキーでも起動できます）
画面下部に新たな画面が現れるので、下記のボタンをクリックします。
ホームページの構成要素の情報を確認できるモードになります。
今回は、例として画面左側にあるサイドメニューを非表示にしたいと思いますので、サイドメニュー全体がハイライトされる位置にカーソルを持っていき、クリックします。
すると画面下のウィンドウにサイドメニューの情報が表示されました！
サイドメニューは「menu」という名前のIDがつけられていることが分かりました。
「Stylus」のCSS編集画面に戻り、下記のコードを入力します。
#menu{display:none;}
そして「保存」ボタンをクリックして元の画面を確認すると…
サイドメニューが消えたのが確認できると思います。
この要領で、非表示にしたい要素の「id名」や「class名」もしくは「タグ名」などのセレクタを確認して {display:none;} のCSSを適用するだけでスッキリした画面にすることができます。
（display:none; に設定しても、画面から非表示になるだけで裏で読み込みはされますが、画面表示のレンダリングはされなくなるので体感的に読み込みスピードも上がる気がします）
もちろんCSSなので、非表示にする以外にも色や大きさ、レイアウト位置などを変えたりもできます。
htmlとCSSを独学で覚えた初級レベルの私でもある程度できるので、精通している方なら自由自在にできると思います。
ドメイン丸ごとに適用させることも、ページごとに細かく設定させることもできます。
オン・オフもアイコンから簡単にできるし、CSSのインポートやエクスポートも対応しているのでかなり優秀な拡張機能ではないでしょうか。
ブラウザの拡張機能なので、MacやWindowsなどOSの違いも関係なく使えるところも素晴らしいです。
このツールの存在を知ってからというもの、私にとってなくてはならないツールとなってます。
htmlとCSSが分かる人は「Stylus」を使っていつも見るページをカスタマイズしてみてはいかがでしょうか？
他人のページの構成も分かるし、CSSの勉強になったりもしますよ！
今回は以上となります。
最後まで読んでいただきましてありがとうございました！
それではまた〜✧٩(ˊωˋ*)و✧
コメント