拡張機能

 ブラウザに付加できる拡張機能はとても便利です。今日は私が使っている chrome の拡張機能の一つを取り上げます。
 毎日のようによく訪れるサイトは、表示を自分好みにしたいものです。サイト作者には申し訳の無いことですが、スタイルシートの一部を変更して、その目的を達成する拡張機能があります。stylish、stylist と chrome の更新につれ変遷してきて、今は stylus(※1)を使っています。
 導入するにはインストールして、ツールバーに現れるアイコンを左クリックし、スタイル検索でサイトにあるサンプルを使うのも良いですが、できることなら自分で設定するのがお薦めです。

改変前サイト 改変後サイト

 上図は改変前と後の様子の例です。アイコンをクリックし、管理ボタンをクリックし、新規に
   aside.sidebar{
    display:none !important;
   }
   section.main-content{
    max-width:70% !important;
    margin-left:15% !important;
   }
と設定したものです。
 上記の「sidebar」や「main-content」といったサイトの id や class の名前を見つけなければなりませんが、それも楽になりました。右上のアイコンをクリックして、「その他のツール」→「デベロッパーツール」、「Element」タグでマウスカーソルで順に html 記述をたどっていくとサイトのその部分の色が変わるので、改変したい場所と html 記述場所を特定でき、そこに記されているスタイル名を見つけることができます。

 自分で試行錯誤してやるのも達成感があり楽しいですし、何よりスタイルシートの勉強にもなります。お薦めです。

(※1) https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne

se.gif

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です