ブラウザに付加できる拡張機能はとても便利です。今日は私が使っている 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
