[BetterDiscord]Discordの背景やUIを変更させる方法

Discordの背景やUIを変更させる拡張機能のような物があります。

それが、BetterDiscordです。

今回はBetterDiscordの使い方を紹介します。
これはパソコンのみ出来る方法で、スマホやブラウザ版では出来ないのでご了承ください。

Windowsを使って説明するのでMacの方は分かりづらいかと思います。

※betterdiscord自体のアップデートにより一部食い違う点があるかもしれませんがご理解ください。

ダウンロード

下記のurlに入ります。

https://betterdiscord.net/home/

‘One more step’と出るので、そのまま’私は人間です’にチェックを入れて進めてください。

BetterDiscordに入ったら’Download’とあるのでクリックします。

GitHubのサイトに飛びます。
自分が使ってるOS(MacやWindows)と同じファイルをクリックします。

これでダウンロードは完了です。

インストール

ダウンロードしたファイルを開きます。

‘Install BandagedBD’の横にある青色の四角の中をクリックします。

‘Install To Stable’の横にチェック欄があるのでチェックを入れます。

チェックを入れたら’Install’をします。

インストールはこれで完了です。

使い方

まずテーマをダウンロードして背景やUIを変更する方法を紹介します。

テーマをダウンロードする方法は自分が知る限り2つあるのでその2つを紹介します。

  1. 公式サーバーからダウンロード
  2. ウェブサイトで検索

公式サーバーからダウンロード

BetterDiscordのサーバーリンクを張っておきます。

https://discord.gg/0Tmfo5ZbOR8bKrMJ

サーバーに加入したら、REPOSの項目にある’#official theme list’を開きます。

そこで’Preview(s)’を見ながら自分が気に入ったテーマを見つけ次第’Download’してください。

今回はpuckzxzさんのテーマを参考に説明します。テーマのダウンロードリンクを貼っておきます。

https://github.com/puckzxz/NotAnotherAnimeTheme

Downloadと書かれている横のリンクを開きます。

Download先が4つもあるのは、ファイル名の最後にSCSLとかTCSLとかありサーバーアイコンが横並びになってる数のことを説明しています。
下の画像を見てもらった方が早いのですが、Singleだったら当然1つ、Quadだったら4つ並びます。

ファイル名がQCSLの場合

ウェブサイトで検索

公式サーバーで気に入ったデザインが見つからないとなる場合もあるかと思います。

なので、ウェブサイトで画像のように調べても出てきます。
因みに「Nier Automata BetterDiscord」と調べた例です。

ダウンロードする時の拡張子は’.css’の物を選んでください。

適用方法

ダウンロードが終わったら次に適用させる方法です。

そこの’Themes’を開きます。

‘THEMES-0’の横に’Open Theme Folder’と書かれた青のボタンがあるはずなのでそれを開きます。

Discordのユーザー設定を開きます。
下の方にスクロールすると、’BANDAGED BD’と書かれた項目が追加されています。
そこの’Themes’を開きます。

‘THEMES-0’の横に’Open Theme Folder’と書かれた青のボタンがあるはずなのでそれを開きます。
開いたら、そのフォルダの中に先程ダウンロードしたテーマをコピペかドラッグ&ドロップで入れてください。
入れたら画像のようにゴミ箱の横にオンオフのスイッチがあります。
(もし表示されない場合は一度Discordを再起動してください。)

自分が適用させたいテーマを選んでオンにするとデザインが変わります。

好きな画像を背景にする

先程まで基本的な使い方を紹介しました。
しかしこの記事のメインディッシュはここからです。

それは、好きな画像を背景にすることです。
それでは早速やり方を説明します。

自分は「やがて君になる」という作品が好きなのでその画像をお借りして説明します。
まず自分が背景にしたい画像を選びます。
選んだらその画像のurl(アドレス)をコピーしてください。

画像のurl(アドレス)をコピーするには、ネットの画像を右クリックしないと出てこない選択肢なので、ローカルフォルダ(PC内)にある画像を使いたい場合は、一度ネット上に画像を出す必要があります。
やり方はGyazoで画像を切り抜くことでネット上にその切り抜いた部分の画像が表示されるため、そこから画像のurlをコピーしてください。

Gyazoで切り抜けたら画像のような感じになるので、その画像を右クリックすれば画像のurl(アドレス)をコピーできます。

出来たら自分がダウンロードしたテーマのファイル(.css)を開きます。

画像のように文字がズラッと並んでいるかと思います。

その中にあるBackground-imageを探します。

もし見つからない場合は、win10デフォルトのメモ帳を使っているなら’F3’を押してそこに’background’と打ち調べると、backgroundと書かれている部分を表示してくれるのですぐに見つかります。

※それでも見つからない場合はそもそもそのテーマにbackgroundが記入されていない場合があります。やり方はありますが、今回は説明しないため他のテーマにすることをおすすめします。

background-imageが見つかったらその先の括弧内にある’http~jpg’までを消して自分がコピーした画像のurlを貼り付けてください。

--background-image: url(http://imgcc.naver.jp/kaze/mission/USER/20190522/75/7191175/305/1920x1080x6d0f01ef8a65e16ced0f47.jpg);

これで保存すると、背景の画像が変わります。

こんな感じです。

もし、背景を明るくしたり暗くしたい場合は、

--main-transparency: rgba(0, 0, 0, 0.8);

の0.8を変えると明るさが変わります。
0.1にすると画像が明るすぎて文字が見づらいので0.9から0.1ずつ下げる事をおすすめします。

因みに下記の画像のようなアイコンが、Discordの左上にあるかと思います。

これは

friends-icon 

home-icon

等と呼ばれる場所です。

ここも’friends-icon’や’home-icon’の括弧内にある’http~jpg’を自分の好きな画像のurlをコピーしたものに変えれば変更できます。

終わり

この記事では、

  1. BetterDiscordのダウンロード
  2. インストール
  3. 使い方(テーマの入手方法から適用方法まで)
  4. 背景の画像変更方法

を紹介しました。

ダウンロードしたテーマによっては今回紹介した背景の変更方法とかが上手くいかない可能性が十分にあります。その場合は他の方の記事を参考にしてみてください。

Discordってアプリケーション自体よりもBOTとか背景の変更方法とか出来るので楽しいです。

BetterDiscordのプラグイン

以下の記事で自分が使っているプラグインを紹介しています。Discordをより一層便利にしたい人は見てみてください。