BetterDiscord でテーマや背景など見た目を変更する

ryomatsu

8年前

Discord ではテーマを変更する事で見た目を変える事ができます。が、標準状態ではダークとライトの二種類の色しか無く、より細かくカスタマイズしたり、背景画像を変更するといった事はできません。

BetterDiscord を利用すると背景画像やフォントなど Discord の見た目を自分好みに変更する事が可能となります。

BetterDiscord はテーマを変更するだけでなく様々な機能を Discord へ追加するものとなっています。上記記事にて簡単な解説を行っています。

BetterDiscord を利用してテーマを変更する

BetterDiscord をインストールしたらテーマを探しましょう。BetterDiscord 用のテーマは以下にあります。

好きなテーマを選んで css ファイルをダウンロードしましょう。

Discord の設定を開くと、左のメニュー下部に BETTERDISCORD という項目があり、その下に Themes という項目があります。

初期状態では何も入っていません。

画面右上に「Open Theme Folder」というボタンがあります。これをクリックするとエクスプローラーでフォルダが開きます。

ここにテーマの css ファイルを保存し、Discord を再起動(Ctrl+R)する事でファイルを読み込む事で設定の Themes に表示されるようになります。

2つテーマを入れてみました。

Discord を再読込するとこのようにテーマが2つ表示されました。

スイッチを入れるとテーマが有効になります。

テーマもいいけどそれよりは背景画像を自由に変更したいという人も多いでしょう。背景を変更する方法を紹介します。

まずは元となるテーマを選びましょう。例として DarkMatter を利用しました。

css ファイルの16行目に背景画像を指定している箇所があります。

ここを自分の好みの画像の URL へ変更する事で背景画像を変える事ができます。

変えれば良いといっても自分が試した所、ローカルファイルの読み込みも制限されており、Web 上からの読み込みも https からでないとダメと結構面倒な仕様です。

元から設定されてる画像と同様に imgur へアップロードし、https 形式の画像の URL を読み込むのが手っ取り早いのですが、他人の画像を勝手に Web 上にアップロードするのはあまり良くありませんね。

そういう場合は画像を base64 形式の文字列に変更する事で Web 上にアップロードせずにテーマファイルで読み込む事が可能です。

画像を base64 形式にするには以下の Web サイトに画像をアップロードするだけです。

画像をアップロードすると右側に data:image/jpeg;base64 から始まる文字が現れます。

これをコピーし、先程の css ファイル内の背景画像を設定している場所に貼り付けます。

貼り付けて保存し、Discord を再読込してテーマをオンにすれば背景画像が読み込まれます。

画像を変更するだけでなく、CSS に詳しければ画像の位置や大きさを調節する事も可能です。

背景画像を変更する箇所はテーマによって異なるので注意が必要ですが、やり方さえわかれば自由に画像を自由に変更する事が可能です。