方法
「Stylebot」というChromeの拡張機能あり、ブラウザで読み込んだページに対して、独自のCSSを適用することが可能になります。
使い方
1.上記URLからChromeアドオンをインストール
2.有効にする
3.独自のCSSを適用したいページを開く
4.Stylebotを開く
5.サイドメニューが開くので、下部の「コード」を選ぶ
6.適用したいCSSを書く
要素の指定について
Chromeのデベロッパーツールを使っても良いですし、↑の画像の左上の矢印から開いたページのHTML要素を取得できます。
実用例
例としてYouTubeのタイトルが切られているものを全部表示します。
結果
-
スタイル適用前（赤枠部が2行で切れている）
-
スタイル適用後（タイトルが全て表示されている）
設定方法
yt-formatted-string.style-scope.ytd-rich-grid-media {
overflow: visible; /* 要素を横幅超えた場合でも表示する */
white-space: normal; /* 行を折り返します */
max-height: inherit; /* 最大の高さを親要素に合わせる※指定した要素に高さの制限があったので、それをなくすため */
-webkit-line-clamp: initial; /* このプロパティは指定された行数に制限し、それを超えたものは「…」三点リーダーにするものですが、それをしないため、値をinitialにした */
}
注意
- サイトによっては、繰り返しの要素であってもクラス名がバラバラになるケースが有り、その場合は、CSSセレクターを解読して、当てたい要素になるように組み立てる必要があります。
その他
設定はJSON形式でエクスポート、インポートできるので、使いづらい社内システムとかはStylebotをインストールしてもらって、設定のJsonを配れば生産性向上に使えそうですね。
背景
広告運用の仕事もしているのですが、ある広告の管理画面が酷すぎる。。。
メニュー上で操作しているアカウントを選択可能なのですが、アカウント名やメールアドレスが長いと途中で切れてしまい判別できない。
かなりの数のアカウントで運用するので、画面上で確認できないとミスの元。
広告を見る人、出す人には関係ないからか、管理画面は運用者の使い勝手を無視して作ってる。
しかも、コロコロUIを変え、その上まともに情報提供もしない。
UIが変わると今までの画面を使えなくなるので、RPAツールも作り直し。
自分だけで使うわけではないので、UIが変わると問い合わせと修正に時間が取られる。。。
（見た目変わってなくても、CSSセレクターが変わることも多々）
少なくともミスに直結する画面表示だけでも社内で直せないかと検討してみましｔ