Discordでやり取りしてたら、Discordに壁紙を貼り付けられるようなのでやってみました。

これが普通のDiscordです

BettorDiscordという拡張するソフトをいれて壁紙など、変更することができます

BettorDiscordをインストール

Discordは予めインストールをしておいてください

BettorDiscordの配布先を開きます

Get Bettor Discord – BettorDiscord

Download Windowsをクリックしてダウンロード、展開します

BettorDiscordWI.exeをダブルクリックしてインストールします

利用規約を確認して同意

基本そのままにしますが、「Restart Discord after installation」にチェックを入れます

これでDiscordがインストール後再起動します

InstallをクリックするとDiscordが終了し、インストールが開始されます

Discordが起動したら完了です

起動直後はBettorDiscordの準備(初回のみ)があるため、すぐには変化は起きません

右下にこれが出てたらまだ準備中です

ちょっとだけ変わりました

ユーザー設定を見ると言語の下にBetterDiscordの設定が追加されています

テーマを適用する

BettorDiscordのテーマは

Themes – BetterDocs

にありました

教えて貰ったスクショを頼りにDiscord Rebornを選びました

DownloadをクリックするとおなじみのGitHubに飛びます

手っ取り早くやりたいので「Raw」と書かれているボタンを右クリックして一旦デスクトップなどに名前をつけて保存をします

Discordのユーザー設定→Thermesを開き、上にある「Open Theme Folder」を開きます

フォルダーが開かれるので先ほどダウンロードしたファイルを移動させます

すぐに認識しないので、一旦Discordを終了します

Discordのアイコンを右クリックしてQuitDiscordです

こうすることでDiscordを完全に終了できます

そして、Discordをもう一度起動させます

もう一度ユーザー設定からThemesを開くと先程追加したテーマが追加されています

有効にするにはテーマ右上のチェックボックスをオンにします

一旦設定を閉じると変わっています

壁紙を変える

まず、変えたい画像を用意します。

画像をアップロード版

次にgyazoやimgurなどにアップロードします

一番上の画像にあるWindows10の壁紙は

C:\Windows\Web\Wallpaper\Windows

にあります

アップロードしたら画像に直接アクセスするリンク(ダイレクトリンク)を作成します

Imgurなら　https ://i.imgur.com/(文字列).(拡張子)

gyazoなら　https ://i.gyazo.com/(文字列).(拡張子)

になります

困ったら画像を右クリックして、画像のアドレスをコピーとやったほうが確実です

先程テーマとして入れたファイルをメモ帳以外のテキストエディタで開きます

(このテーマでは)21行目の

.app { background-image: url("https://imgur.com/RG03PyX.png") !important; background-size: cover !important; }

のURLを書き換えます

.app { background-image: url("https ://i.gyazo.com/(文字列).(拡張子)") !important; background-size: cover !important; }

もう一度、Discordを終了して、起動し直します

変更できました

ちなみに「.user-popout:before」の方は使った感じ設定されてなくても行けるようです。心配であればこちらも変更しておきましょう

ファイルを変換編

HTML、CSSを触ったことがある方は上の画像で感づいているかもしれませんが、画像をBase64に変換して貼り付けることでもできます

Base64?

一昔前は画像というファイルを取りに行くごとにアクセスが有り、サイズもそこそこあるので文字列に変えてしまう方法を取りました。

BetterDiscordでもこれが使えました

まず画像をBase64に変えます

Base64エンコーダー – Syncer

が、簡単に使えます。

画像を開き、Data URLと出たところをコピーします

先程テーマとして入れたファイルをメモ帳以外のテキストエディタで開きます

(このテーマでは)21行目の

.app { background-image: url("https://imgur.com/RG03PyX.png") !important; background-size: cover !important; }

のURLをダブルクォーテーションも含め、貼り付けます

.app { background-image: url(data:image/jpeg;base64,/9j/2wC(中略)ZbWizmCZZlDX/9k=) !important; background-size: cover !important; }

もう一度、Discordを終了して、起動し直します

変更できました

こちらの場合は、アップロードなどせずできるので安全ですが、Base64にエンコードすると画像のサイズなどにより非常に文字列が長くなります

後から変更した時、面倒になってきそうです

もともと少し起動が遅いDiscordですが、BetterDiscordが読み込まれるまで更に時間がかかってしまいましたが、結構気にっています

アンインストールはDiscordとBetterDiscordのフォルダを削除すればだいたい消えるみたいです

参考：

【Windows版】 Discord テーマの適用と背景画像設定 – Qiita

CSS内の画像埋込で高速化(Data URI) – Qiita