BetterDiscord 文字色変更方法 覚書

betterDiscordの拡張機能”Custom CSS”によるDiscord内の文字色の変更方法の覚書です。

 

1.BetterDiscordを導入する。

これは当記事では説明しません。

 

2.custom CSSにベースとなるCSSを導入しておく。

これは当記事では説明しません。

 

3.ブラウザ版ディスコードを起動し、開発者ツール(F12)を開く。

今回はGoogleChromeを使用します。

 

4.開発者ツールの左上にある下図の○で囲まれているアイコンをクリックする。

discord_1

 

5. 4の状態で色を変えたい場所の文字をかざす。

例えばチャット欄の文字色を変えたい場合は下図のようになります。

discord_2

“div .markup”と出ると思います。これがこの部分のクラス名です。

この状態で左クリックをしてください。

ここで開発者ツールでCSSの紐付け(?)を確認します。

 

6.開発者ツールの中辺りにある”styles”を確認する。

discord_3

○で囲まれた部分があなたが現在使用しているclass名及び文字色です。

この場合は、classが

.theme-dark .message-group .comment .markup

文字色が

color: hsla(0,0%,100%,.7);

となります。

 

7.アプリケーションのDiscordのcustom CSSを開く。

なるべく下の方までスクロールをし、適当な場所で先程のclass名と色をコピペします。

その後、hsla(0,0%,100%,.7);を変更することで色を変更することができます。

例えば次のようにすると、オレンジがかった色になります。

.theme-dark .message-group .comment .markup{
color: rgb(225,179,0) !important;
}

discord_4

colorを指定するときに、最後に”!important”を忘れないように記述してください。

 

同じclassが予め用意してあるCSSに初めから入っていた場合、その部分のcolorを変更するか、付け足しても問題ありません。

同じclassが今回付け足した文よりも下にあった場合反映されない可能性があるので注意です。

 

以上で完了です。

同じ操作を繰り返すと別の場所の文字色も変更できます。