| Mastodonカラム内ユーザーTOPを圧縮 | Mastodon未収載アイコン変更 |
|---|---|
 |
 （GIFアニメ） |
| YouTubeLiveコメント一覧カスタム | YouTubeサムネ時間どかし |
|---|---|
 |
 |
𝓐𝓷𝓭 𝓜𝓸𝓻𝓮...
Chrome/Firefox/Opera向けブラウザ拡張機能 Stylus で使える上書きCSS。
良ければ持ってって。
まず大前提として、ブラウザにStylusを導入する。
- Chrome: https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne
- 上記が利用不能な場合はβ版の方を。
- Firefox: https://addons.mozilla.org/ja/firefox/addon/styl-us/
- Opera: https://addons.opera.com/ja/extensions/details/stylus/
以下の各リンクから使いたいものを開くと突然インストール画面に飛ぶので、そこで「インストール」を押せばただちに追加が完了する。はず。
| 名前、リンク | 対象サイト | 概要、効果 |
|---|---|---|
| Mastodonカラム内ユーザーTOPを圧縮 [～v3] [v4] |
Mastodon | カラム表示時のユーザーページの上部を色々と圧縮表示 |
| Mastodon未収載アイコン変更 [～v3] [v4] |
Mastodon | 未収載トゥートのブーストアイコンを、公開トゥートとは別のものに変更してわかりやすくする |
| myTypingキーボードカスタム | myTyping | myTypingのゲーム内キーボードに対する、指毎の色分けや、FキーとJキーの強調表示など |
| TogetterコメNG | Togetter | コメント欄の特定ユーザーのアイコンと名前とIDを黒塗り |
| YouTube長文コメント自動展開 | YouTube | 「続きを読む」のクリック無しで長文コメントを自動展開 |
| YouTubeサムネ時間どかし | YouTube | 動画視聴画面の右側の別動画一覧で、時間バッジをどかしてサムネイル全体を見やすくする |
| YouTubeLiveコメント一覧カスタム | YouTube Live | コメント一覧のパーツ削除、高さ変更、ユーザー名省略（マウスオーバーで表示）など |
もしStylus導入済みの環境で上記の直リンクが上手くはたらかない場合、各スタイル（/usercssフォルダ下の*.user.stylファイル）をGitHub上で開き、そのページの「Raw」ボタンから生ファイルを直接開けば、同じようにインストール画面が現れる。はず。
（それでも上手くいかない場合はこちら）
上記の方法が上手くいかない場合、以下の手順でどうぞ。
- お目当てのファイルをGitHub上で開いて、中身のコードを全てコピーする。
- Stylusの管理ページで、「UserCSSとして」にチェックを入れてから「新スタイルを作成」を押す。
- 新スタイルの編集画面が表示され、そこに色々とテンプレート用のコードが書かれているが、それらを全て削除して先ほどコピーしたコードを貼り付ける。
- 保存する。
Web上からの方法すら上手くいかない場合、以下の手順でどうぞ。
- お目当てのファイルやこのリポジトリ全体をローカルに保存する。
- Stylusの管理ページで、バックアップ関連のメニューから「スタイルをインポート」を選択する。
- お目当てのファイルを開く。なお、全ての拡張子のファイルを表示していないとファイルが見つからないかもしれない。
- インストール画面に飛ぶので、そこで「インストール」を押す。
追加されれば、対象サイト上ですぐに効果を発揮する。
なお、対象サイトで効果が出ている状態でStylusの拡張機能アイコンを押すと、現在効いている各スタイル名が表示される。
そして、その右にある歯車マークを押せば、スタイルごとに柔軟なオプション指定ができる。
これが超便利なので、導入後は是非ご確認を。
もしまだ何か満足できず、自分で中身を直接記述したくなった場合は、拡張機能の管理画面から各スタイルをクリックすると専用のエディタが立ち上がって編集可能になるので、まあ是非。
記述の際は、オプション機能の詳細仕様ページや、Stylus（CSSメタ言語としての方）の公式リファレンスページなどが大いに参考になるはず。何もかも英語だけど…。
注意事項として、個人的に悪いハマリをした経験を1つだけ書いておきたい。
インデントにタブ文字と半角スペースが混在しているとそれだけでエラーが出て、しかもエラーがそういう理由を教えてくれなかったりするので、インデントに使う空白文字の統一性にはご注意を。
専用エディタのカラーテーマにはタブ文字を可視化してくれるものもあるので、そういった部分で予防は可能。
（オプションのStylelintルールで "indentation": "tab" と指定すれば監視できるかと思ったりもしたけど、インデントの深さがCSSとして監視されてエラー祭りになるので駄目だった）
個別に断りがない限り、CC0-1.0。