【随時更新】BetterDiscordのカスタムCSS講座

著者もまだまだ勉強中だからお手柔らかに!!

まえがき

まずカスタムCSSで出来ることはプラグインなどで追加されたボックス*等の
位置や大きさなどの変更、色の変更など様々。

*ボックス=チャンネル表示域やメンバー表示枠など

壁紙の変更もカスタムCSSでいじることも出来る。
なおこちらは自分が魔改造した絵()

こんな感じで両サイドをいじることも出来ます。
まあ物は試し、コピペで出来るCSSも書くのでぜひご活用。

壁紙変更やボックスサイズ変更

まず最初に覚えておくことはCSS系はまず何処を変更するかを指定する記述が必要です。

例えば

壁紙変更CSS
.callout-backdrop {
background-image: url(“画像のURL”);
}

で、背景を好みの画像にできます。
ただしフォルダの画像指定は出来ません、プラグインでローカルに
画像のURLを作ることも出来ますが、それは要望が多い場合に紹介します。

自分が確認した限りではほとんどの画像のURLは認識され壁紙にできます。

おすすめの画像サイトはAlpha Coders言うサイト、外国のサイトだが
日本のアニメの画像も多く取り扱ってるので愛用。

画像を右クリックして画像の直リンクをさっきのCSSの”画像のURL”の部分を
書き換えてURLにすればおk

次にボックスサイズの変更を試す。

まあする必要があるかと言うと人それぞれ
見にくければ拡大させればいいし、チャットに集中したければ縮小など。
便利なことにマウスを重ねると拡大ということも出来る

メンバー枠の大きさ変更CSS
.membersWrap-3wRngy{
min-width:65px!important;
max-width:240px!important;
width:65px;
}

でメンバー枠がアイコン表示ぐらいの大きさまで小さくなります、
でもコレではメンバー名がわかりません…
なのでメンバー枠にマウスを重ねた際の動作を追記

マウスを重ねた場合の追記CSS
.membersWrap-3wRngy:hover{
width:240px;
}

これで重ねた場合はデフォルトの大きさの枠になります(240pxがデフォルトっぽい)

察しのいい人はお気づきでしょうが{}で囲まれる前の指定記述部分にhover
追記するだけで重ねた場合の動作に切り替えることが出来ます。

つまり.なんちゃらなんちゃら:hoverという感じで書けば大抵は重ねた場合の
動作が決めれます。

変更する部分の記述(今後追記予定)

変更する枠名のCSS
.membersWrap-3wRngy{}
メンバー枠

.channels-3g2vYe{}
チャンネル枠

.guilds-wrapper{}
サーバー枠

という感じになります、プラグインでボックスが追加されてる場合は
プラグインファイル(.js)をメモ帳などで開くと
CSS形式の記述がされてる部分があるのでソレをコピペして
カスタムCSSの部分に追記しいじるとそのボックスが反映されます

つまりカスタムCSSが最優先で適応されます。

プラグインでボックスを追加した場合の変更例

日付・時間追加プラグインのCSS変更例
#dv-mount{
box-sizing: border-box;
height: 65px;
}

これをみなさんのカスタムCSSに入れてもなにも起こりません
別途でDate Viewerというプラグインを入れてる必要があります。
参考程度にどうぞ。

プッシュ通知を

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA