カスタムCSS(misskey)
主に自分向け
PC向け・デッキUI、Firefoxでしか動作確認していません。
サーバによってmisskeyのバージョン等が違うため予想したとおりの動作にならないことがあります。
misskey.cloudとbackspacekeyで動作を確認していますが、他鯖での動作はわかりません。
firefish関係とかめいすきーとか、本家Misskeyとの差分が大きい鯖は多分だめだと思います。しらんけど。
あと動作不具合が起きたときはまずカスタムCSS原因を疑ってください。
カスタムCSS入れたまま公式の不具合と決めつけて報告入れないように。
設定→全般の下端から入れる「カスタムCSS」欄に入力すると反映される。
ページ下の「保存」押さないと反映されないので注意すること
おそらく環境ごとに設定する必要がある?
ノート本文中のidの表示があふれないようにする
https://gyazo.com/ddc41210de8f0728977eab94e9728f94→https://gyazo.com/2e12482a4dc214e026e316064e6a1796
※デフォルト状態だと複数行にわたった時表示が崩れるので、角の丸さも固定値で設定し直しています。ここはお好みで変更してください。
code:afurenai.css
/* ノート本文中id表示調整 */
a.x6gsV {
word-break: break-all;
border-radius: 15px;
}
ウィジェットの「プロフィール」でidが読めなかったり隠れたりするのをどうにかする
※widthのところはカラム幅にあわせて適宜調整してください
https://gyazo.com/733cdb723c871695ed2750df61a3d551→https://gyazo.com/95116ddb0dfb369f93b0e52fc57fef09
code:profile.css
/* ウィジェット「プロフィール」表示調整 */
.xaIFe {
width: 130px;
font-weight: bold;
}
CWの もっと見る/隠す、埋め込みのボタン等をでかくする
https://gyazo.com/e2c6a243988572278a2606694addd5cd→https://gyazo.com/ce480d1fe7aba1c3f48d15bd576cd78d
https://gyazo.com/bbbc53e5756d36bdd20ffda854bbc013→https://gyazo.com/51587e866cc040d91a9532fe282af52e
code:dekai.css
/* CWのボタンをでかくする */
.xd2wm {
width: 100%;
height: 28px;
font-size: 13px;
border-radius: 15px;
overflow: hidden;
}
.xd2wm:hover {
}
/* ついでにYoutubeとかの埋め込みのボタンもでかくする */
button._button.xbaFh.xfjt2.xrmjY {
width: 100%;
height: 28px;
font-size: 13px;
border-radius: 15px;
overflow: hidden;
}
button._button.xbaFh.xfjt2.xrmjY:hover {
}
左端のナビゲーションバーの表示幅を細くする
※2つのmax-widthは基本的に同一の幅を指定する。なお下の方に少しだけ(10px程度)小さな値を設定することで、ナビゲーションバーと最初のカラムの隙間を詰めることもできる。
code:navigation.css
/*ナビゲーションバーの幅*/
div.xRtfX {
max-width: 50px;
}
div.xryhL.xghTi {
max-width: 50px;
}
カスタム絵文字ピッカーをでかくする
https://gyazo.com/31131b159e6a6aa2d0c3bb7d9e968e19/raw#.png→https://gyazo.com/195f57c98d947bfda424289881324305/raw#.png
単純にでかくすると視覚的にうるさいため、ついでに若干透けさせている。
code:emoji.css
/*カス絵ピッカーのサイズ*/
div.omfetrab.s1.w1.h2._popup._shadow {
width: 376px;
height: 450px;
opacity: 90%;
}
CSSを適用した環境でだけ、カラムの最大表示幅を小さくする
※単にカラム幅を変えたいだけなら、各カラム上にある…→カラムの設定から変更可能。
この設定は、画面幅の関係などで特定の環境でだけカラム幅を変えたいときに使用する。
max-widthの値を画面幅にあわせて微調整すること(stylebotアドオンを使うと便利)
code:column.css
/*カラムの最大幅*/
section.xAOWy {
max-width: 325px;
}
「サーバから切断されました」を表示しない
https://gyazo.com/cb6fedcb4ec1c8b41a27e2d6004d271c←これ
ほんとに切断されてるならリロードが必要なんですが、一瞬切れて再接続した場合でもエラーが消えてくれない仕様らしく、そういう場合のほうが圧倒的に多いので消してしまう
code:setsudan.css
/* サーバから切断を表示しない */
.xn5WL {
display: none;
}
ノート公開範囲別に色を変更する
上記のコードを元に、ダークテーマ向けの色合いに改変したものになります。
code:color.css
/* 公開範囲がホームの投稿作成時の背景色を変更 */
.xpDI4.xxtDg._popup:has(.ti-home),.xpDI4._panel:has(.ti-home) {
background-color: rgba(20,24,36,1) !important;
}
/* 公開範囲がホームの投稿の背景色を変更 */
.xcSej:has(.ti-home) {
background-color: rgba(20,24,36,1) !important;
}
/* 公開範囲がダイレクト（DM）の投稿作成時の背景色を変更 */
.xpDI4.xxtDg._popup:has(.ti-mail),.xpDI4._panel:has(.ti-mail) {
background-color: rgba(43,28,0,1) !important;
}
/* 公開範囲がダイレクト（DM）の投稿の背景色を変更 */
.xcSej:has(.ti-mail) {
background-color: rgba(43,28,0,1) !important;
}
/* 公開範囲がフォロワー限定の投稿作成時の背景色を変更 */
.xpDI4.xxtDg._popup:has(.ti-lock),.xpDI4._panel:has(.ti-lock) {
background-color: rgba(50,42,51,1) !important;
}
/* 公開範囲がフォロワー限定の投稿の背景色を変更 */
.xcSej:has(.ti-lock) {
background-color: rgba(50,42,51,1) !important;
}
/* チャンネルの投稿作成時の背景色を変更 */
.xpDI4.xxtDg._popup:has(.ti-device-tv),.xpDI4._panel:has(.ti-device-tv) {
background-color: rgb(32,55,45) !important;
}
/* チャンネルの投稿の背景色を変更 */
.xcSej:has(.ti-device-tv) {
background-color: rgb(32,55,45) !important;
}