忍者ブログ

上田用保管庫

Home > ユーザーCSS

原神のデイリーログインボーナスのトレンドを消す

こちらの下に表示される「トレンド」の内容に不快感を覚える人向け。

ユーザーCSSのコード

トレンドを非表示にする

.components-home-assets-__sign-recom-test_---recommend---1CKbTa {
display: none !important ; /* トレンドを非表示 */
}

右のQRコードを非表示にする(おまけ)

.components-home-assets-__home_---qr-code---iYG7z9 {
display: none !important ; /* QRコードを非表示 */
}

ユーザーCSSの使い方

こちらの記事を参考にして下さい。

ユーザーCSSを使う方法(OS別)

CSS=Cascading Style Sheetsの略。
特定のウェブサイトを見やすくカスタムしたい人向け。
2023/12/16 Android版Firefoxを追加

ブラウザに拡張機能「Stylus」をインストール

使ってるブラウザに合わせて選んでください。
Chrome以外のブラウザでもChromiumベースのブラウザだとChromeの拡張機能を使えるものもあります(バージョン83以降のMicfosoft EdgeVivaldiなど)

※過去に似たような機能を持つ「Stylish」があり有名だったため古いサイトだと紹介している所が多いですが、閲覧履歴を収集していた事が発覚した危険性の高い拡張機能なのでもしインストールしている人がいたら削除するのをお勧めします。

ChromeでStylusを使う(Windows)

拡張機能Stylusをインストールする。
ユーザーCSSを使いたいサイトを開いておく。
ブラウザのアドレスバーの右側にある「Stylus」アイコンをクリック。「次のスタイルを書く」にチェックを入れ、その下にあるURLをクリック。
「Usercssとして」にチェックを入れ「アクション>新スタイルを作成」をクリック。
使いたいユーザーCSSのコードをコピーして「  /* ここにコードを挿入... */」の部分にペーストする。
タイトル(左上にある細長い長方形の欄)に自分が分かりやすいタイトルを入力。
タイトル下の「有効」にチェックが入ってるのを確認。
「保存」ボタンクリックで設定終了。

※もしCSSを使いたくなくなったら該当サイトを開きStylusアイコンをクリックし、上の方にある使用中のユーザーCSSの項目のチェックを外してください。

※別な端末でも同じユーザーCSSを使いたい場合は「Stylusアイコンをクリック>管理>バックアップ>エクスポート」でStylusの設定ファイルを保存し、別な端末で「Stylusアイコンをクリック>管理>バックアップ>インポート」から読み込んでください。
(Stylusの設定ファイルは定期的にバックアップしておくのをお勧めします)

FirefoxでStylusを使う(Windows)

拡張機能Stylusをインストールする。
ユーザーCSSを使いたいサイトを開いておく。
アドレスバーの右にある拡張機能アイコン(パズルのピースのようなアイコン)をクリックし、Stylusをクリック。「次のスタイルを書く」にチェックを入れ、その下にあるURLをクリック。

あとはChromeの「『Usercssとして』にチェックを入れ~」以降と同じ。

Androidでユーザースタイルシートを使う

FirefoxKiwi BrowserでChrome用のStylus拡張機能(アドオン)を入れて使いましょう。
詳しくは拡張機能が使えるブラウザまとめ(OS別)記事をどうぞ。
拡張機能の使い方は基本的にWindows版と同じです。

iOSでユーザースタイルシートを使う

現在ユーザースタイルシートを使う手段は無いようです。

ユーザーCSSを自分好みにカスタムする

・フォントの色を変更したい場合はこちらのサイトで変えたい色のカラーコードを調べて「color:」の右にあるコードを書き換えてください
WEB色見本 原色大辞典 - HTMLカラーコード

・フォントの太さを太くしたい場合は「font-weight:」の右にある「normal」を「bold」に書き換えてください。

・もっと他の部分をカスタムしたい人はCSSのリファレンスサイトを調べて参考にしてみてください。そんなに難しくないです。

あにまん掲示板のレスの文字を見やすくする

こちらの掲示板のレスの文字の装飾(巨大化、太文字化、原色化)が読みづらいと感じている人向け。

ユーザーCSSのコード

通常(ライト)モード用

     .resbody p , .resheader p  {
        line-height: 1.2em; /* フォントと上下の余白の高さ */
        color: #000 !important; /* フォントの色 */
        font-size: 16px !important; /* フォントサイズ */
        font-weight: normal !important; /* フォントの太さ */
    }

ダークモード用

     .resbody p , .resheader p  {
        line-height: 1.2em; /* フォントと上下の余白の高さ */
        color: #ccc !important; /* フォントの色 */
        font-size: 16px !important; /* フォントサイズ */
        font-weight: normal !important; /* フォントの太さ */
    }

おまけ

右端に表示されるフロートボタンを消す。

    #fixbtn {
        display:none !important;
    }

ユーザーCSSの使い方

こちらの記事を参考にして下さい。

Togetterの文字を読みやすくする(記事本文とコメント欄両対応)

2023/09/18 サイトのアップデートの影響により上手く動いてなかったため修正

こちらのサイトの文字の装飾(巨大化、太文字化、原色化)が読みづらいと感じている人向け。

ユーザースタイルシート

p.tweet , p.tweet > span , p.css-5obanl > span, p.css-mdguyd > span , p.css-15agrzi > span, p.css-1tobdhd > span {
    line-height: 1.2em; /* フォントと上下の余白の高さ */
    font-size: 14px !important; /* フォントサイズ */
    font-weight: normal !important; /* フォントの太さ */
    color: #000 !important; /* フォントの色 */
}

スタイルシート適応前と適応後比較

↓適応前

↓適応後

おまけ

左下と右下にあるSNS等への投稿フロートボタンを消す

    .fixed_social_footer {
    display: none ;
    }

ユーザーCSSの使い方

こちらの記事を参考にして下さい。

ブラウザのスクロールバーを使いやすくカスタムする

たまにスクロールバーの幅が細すぎて上下にスクロールしづらいウェブサイトに出会って困る事があるのでCSSを使って見やすくしてみました。

ユーザースタイルシート用コード

* ::-webkit-scrollbar {
    width: 15px !important; /* スクロールバーの幅 */
}

* ::-webkit-scrollbar-thumb {
    background: #aaa !important; /* スクロールバーのスライダーの色 */
}

* ::-webkit-scrollbar-track {
    background: #ddd !important; /* スクロールバーの背景色 */
}

ユーザーCSSの使い方

こちらの記事を参考にして下さい。

※下の画像のようにコードのURLの指定を外すと全サイトに適応できます。

wikiのあぼーんリストを消す

ゲームの攻略wiki等でよく右端に見かけるこれ。

使わない人にとっては閲覧してるだけで勝手に開いて邪魔なので消す方法を書いておきます。
(普通にクリックで開くようにすれば良かったのにどうしてマウスオーバーで開く仕様にしたんでしょうかね…)

ユーザーCSS用コード

あぼーんリストを非表示にする

    .js-listcontainer {
    display:none;
    }

トップに戻るフローティングボタンを非表示にする(おまけ)

    #page-top {
    display:none;
    }

ユーザーCSSの使い方

こちらの記事を参考にして下さい。

        

プロフィール

ユーザーネーム:
上田
Webサイト:
メールアドレス:
Gmail「uedananka」

ブログ内検索


PR