communication-g7396f4352_1280

※まれに追加・更新します。

▼更新履歴（クリック/タップで展開）

2023/07/14：「その他、Misskey向けカスタムCSSが配布されているページ」にて、2件ほど公開先リンク追加。

2023/06/27 : 「特定のリアクション（カスタム絵文字）を非表示にする」の適用範囲が、自分の所属サーバー内の投稿に限定されていたのを、リモートフォロー（ホーム）などの投稿にも適用されるように改変。　同時に、「引用」としていたものから「改変」に変更。

※サーバーで稼働しているMisskey/Firefish（旧Calckey、以下省略しFirefishとのみ記載）のバージョンによっては動作しない場合もありますので、ご了承ください。 Misskeyは13.13.2、Calckeyは14.0.0-rc2c-jp2、Firefishは1.0.5devで動作確認。

この記事では、MisskeyやFirefishで使える、便利・ちょっと面白いカスタムCSSをまとめています。

他の方が作ったもの（引用）と、私が移植したものや改変したもの、作成したもの……が混在していますが、なにかしら発見があれば幸いです。

引用元・移植元となったカスタムCSSを制作してくださった方に深く感謝しております！　これらなくして移植もこの記事も存在しません！！

使い方

Misskey

「設定」→「全般」下部にあるカスタムCSSへコピー&ペーストし、保存。

Firefish

「設定」→「テーマ」下部にあるカスタムCSSへコピー&ペーストし、保存。

どちらの場合も、カスタムCSSを設定することで何らかの不具合が生じた場合は、問題となっているカスタムCSSを削除した上で保存すると復旧できます。

リアクションのカスタム絵文字を大きくする

Misskey（引用）

/* 老眼用絵文字表示（リアクションのみ） */
.x9Io4 { 
 height: 2.25em;
}

リアクションだけ大きくしたい場合はこっちのCSS使ってください
こっちだと名前欄の絵文字は大きくならず、リアクションだけ大きくなります

オルコンのフリッター (@fritter) | ゲームすきー

Firefish（移植）

/* リアクションのカスタム絵文字を大きく表示する
  名前欄のカスタム絵文字のサイズは変更せず、
  リアクションだけ表示の大きさを変更できます。
  数値を調整することで、お好みの大きさにできます。 */

.mk-emoji.custom.normal.icon {
  height: 2.25em;
}

カスタム絵文字を全体的に大きく表示する

Misskey（引用）

/* 老眼用絵文字表示 */
.x5kTm { 
 height: 2.25em;
}

老眼用の絵文字表示CSSです
使用するとリアクションや名前欄の絵文字がデカくなります
数値を大きくするとその分大きくなります
10にするともうやべーです

オルコンのフリッター (@fritter) | ゲームすきー

Firefish（移植）

/* カスタム絵文字を全体的に大きく表示する
  カスタム絵文字を標準より大きめに表示します。
　数値を調整することで、お好みの大きさにできます。 */

.mk-emoji.custom.normal {
  height: 2.25em !important;
}

リアクションされた回数の表示を消す

通常の状態
このカスタムCSS適用時

Misskey

/* リアクションされた回数だけを消す
　リアクションは表示しつつ、リアクション数だけを消せます。
  数字が気になってしまう場合にご利用ください。 */

.xDpSv{
  display: none;
}

Firefish

/* リアクションされた回数だけを消す
　リアクションは表示しつつ、リアクション数だけを消せます。
  数字が気になってしまう場合にご利用ください。 */

.count{
  display: none;
}

特定のリアクション（カスタム絵文字）を非表示にする

苦手な絵文字を投稿や通知欄から消し去り、見なくてすむようになります。　当該の絵文字のリアクション数も含めて非表示になります。

※2023/06/27 引用元のカスタムCSSだと自分の所属サーバーの投稿にしか適用されなかったため、RN/BTされてきた投稿に対しても適用されるように改変させていただきました。

Misskey（改変）

/* リアクションから特定の絵文字を非表示 */
button._button.xDRXD:has(img[title=":絵文字の名前:"]) {
    display: none;
}

/* リアクションの通知欄から特定の絵文字を非表示 */
div.notification:has(div.xAV2R > img[title=":絵文字の名前:"]) {
    display: none;
}

特定の絵文字のみリ非表示にするCSSです。
ノートについたリアクションは非表示にするといくつ付いたかも非表示になるので注意してください。

便利な機能 - Misskey げむすき鯖非公式ファン Wiki*
▼リモート先からのリアクションへの対応をする場合はこちら（タップ/クリックで表示）

リモートからの特定のカスタム絵文字リアクションを非表示にする場合、以下の書式に則りつつ、絵文字名だけでなくサーバーのドメインまで入力する必要があります。

例えばリモート先の「example.com」からの「:igyo:」を受け取りたくない場合は、下記の書き換えるべき箇所に「:igyo@example.com:」と書きます。

複数のリモート先を対象にする際は、その都度追加で指定していってください。

/* リモートのリアクションから特定の絵文字を非表示 */
button._button.xDRXD:has(img[title=":絵文字の名前@サーバーのドメイン:"]) {
    display: none;
}

 /* リアクションの通知欄から特定の絵文字を非表示 */
 div.notification:has(div.xAV2R > img[title=":絵文字の名前@サーバーのドメイン:"]) {
     display: none;
}

Firefish（移植）

Misskeyのものとは異なり、絵文字名の末尾に「@.」をつける必要があるようです。　例えば「:igyo:」を受け取りたくい場合は書き換えるべき場所に「:igyo@.:」と書く必要があります。

おそらく“@.”で同サーバー内の絵文字であることを明示的にしているのだと思われます。

/* リアクションから特定の絵文字を非表示 */
button.hkzvhatu._button:has(img[title=":絵文字名@.:"]) {
    display: none!important;
}

/* リアクションの通知欄から特定の絵文字を非表示 */
div.notification:has(div.sub-icon.reaction > img[title=":絵文字名@.:"]) {
    display: none;
}
▼リモート先からのリアクションへの対応をする場合はこちら（タップ/クリックで表示）

リモートからの特定のカスタム絵文字リアクションを非表示にする場合、以下の書式に則りつつ、絵文字名だけでなくサーバーのドメインまで入力する必要があります。

例えばリモート先の「example.com」からの「:igyo:」を受け取りたくない場合は、下記の書き換えるべき箇所に「:igyo@example.com:」と書きます。

/* リモートからのリアクションから特定の絵文字を非表示 */
button.hkzvhatu._button:has(img[title=":絵文字名@サーバーのドメイン:"]) {
    display: none!important;
}

 /* リモートからのリアクションの通知欄から特定の絵文字を非表示 */
 div.notification:has(div.sub-icon.reaction > img[title=":絵文字名@サーバーのドメイン:"]) {
     display: none;
}

リアクションの単位を変更する

リアクションされた回数に単位をつけて遊べます。　億でも恒河沙でもバズり放題です！

Misskey（引用）

.xDpSv:after {
  content: "億";
}

リアクションの単位をクッソデカくする #カスタムCSS

キルミちゃん:zessan_hatuzyou_tyuu__i::vrc::ablobdj:🌱 (@kirumi_shibu) | Misskey.io

Firefish（移植）

/* リアクションの単位を大きくする
　リアクションの単位を変更できます。
  億単位でリアクションがつく、究極のバズり気分を堪能できます。
  「億」の部分をお好みの単位・文字列にしてください。 */

.count:after{
  content: "億";
}

投稿日時を絶対時間表記にする

投稿の投稿時間表記を、相対時間表記（○分前とか○時間前とか）から、絶対時間表記（2023/01/01 12:34:56 とか）にします。

Misskey/Firefish兼用（引用）

time {
    font-size: 0;
}
time:after {
    content: attr(title);
    font-size: 0.9rem;
}

投稿日時に絶対時間表記にする

GitHub - kanade/misskey-css: Misskey用カスタムCSS

公開範囲に応じた色分け（統合版）

各種タイムライン上の投稿や、投稿時の公開範囲によって背景色を変更することで、公開範囲が適切かどうかの察知・誤爆防止が見込める……かもしれないカスタムCSSです。　ホーム・フォロワー限定・ダイレクト（DM）・チャンネル投稿の色分けをします。

※記事公開時点では、Firefishはチャンネル投稿の色分け非対応

次項以降で記載する、「公開範囲に応じた色分け系カスタムCSS」をひとつに統合したものです。　もしこれらの「公開範囲に応じた色分け系カスタムCSS」の利用が初めてなら、とりあえずこれをコピー&ペーストすればOKです。

※こちらは、さなちゃ♪（@isana）さんの投稿（1, 2）と、そこから派生したc30（@c30_eo）さんの投稿や、みれい（@Mi）さんの投稿を一つに統合したものです。　皆様、とても便利なカスタムCSSの投稿、本当にありがとうございます！

Misskey

/* 公開範囲に応じて、投稿や投稿作成時の背景色を変更する
  投稿の公開範囲に応じて、各投稿や投稿作成時の背景色を通常と異なるものに変更します。
  これにより、ひと目で公開範囲が判別でき、誤爆の早期察知や誤爆防止の効果が期待できます。
  RGBA（赤, 緑, 青, 透明度）の数値を変更すれば、お好みの色にできます。 */

/* 公開範囲がホームの投稿作成時の背景色を変更 */
.xpDI4.xxtDg._popup:has(.ti-home),.xpDI4._panel:has(.ti-home) {
	background-color: rgba(0, 40, 40, 1) !important;
}

/* 公開範囲がホームの投稿の背景色を変更 */
.xcSej:has(.ti-home) {
	background-color: rgba(0, 255, 255, 0.10) !important;
}

/* 公開範囲がダイレクト（DM）の投稿作成時の背景色を変更 */
.xpDI4.xxtDg._popup:has(.ti-mail),.xpDI4._panel:has(.ti-mail) {
	background-color: rgba(40, 40, 10, 1) !important;
}

/* 公開範囲がダイレクト（DM）の投稿の背景色を変更 */
.xcSej:has(.ti-mail) {
	background-color: rgba(255, 255, 100, 0.10) !important;
}

/* 公開範囲がフォロワー限定の投稿作成時の背景色を変更 */
.xpDI4.xxtDg._popup:has(.ti-lock),.xpDI4._panel:has(.ti-lock) {
	background-color: rgba(40, 0, 40, 1) !important;
}

/* 公開範囲がフォロワー限定の投稿の背景色を変更 */
.xcSej:has(.ti-lock) {
	background-color: rgba(255, 0, 255, 0.10) !important;
}

/* チャンネルの投稿作成時の背景色を変更 */
.xpDI4.xxtDg._popup:has(.ti-device-tv),.xpDI4._panel:has(.ti-device-tv) {
	background-color: rgba(0, 40, 0, 1) !important;
}

/* チャンネルの投稿の背景色を変更 */
.xcSej:has(.ti-device-tv) {
	background-color: rgba(100, 255, 100, 0.10) !important;
}

Firefish

/* 公開範囲に応じて、投稿や投稿作成時の背景色を変更する
  投稿の公開範囲に応じて、各投稿や投稿作成時の背景色を通常と異なるものに変更します。
  これにより、ひと目で公開範囲が判別でき、誤爆の早期察知や誤爆防止の効果が期待できます。
  RGBA（赤, 緑, 青, 透明度）の数値を変更すれば、お好みの色にできます。 */

/* 公開範囲がホームの投稿作成時の背景色を変更 */
.gafaadew.modal._popup:has(.ph-house),.gafaadew._panel:has(.ph-house) {
	background-color: rgba(0, 40, 40, 1) !important;
}

/* 公開範囲がホームの投稿の背景色を変更 */
.tkcbzcuz:has(.ph-house) {
	background-color: rgba(0, 255, 255, 0.10) !important;
}

/* 公開範囲がダイレクト（DM）の投稿作成時の背景色を変更 */
.gafaadew.modal._popup:has(.ph-envelope-simple-open),.gafaadew._panel:has(.ph-envelope-simple-open) {
	background-color: rgba(40, 40, 10, 1) !important;
}

/* 公開範囲がダイレクト（DM）の投稿の背景色を変更 */
.tkcbzcuz:has(.ph-envelope-simple-open) {
	background-color: rgba(255, 255, 100, 0.10) !important;
}

/* 公開範囲がフォロワー限定の投稿作成時の背景色を変更 */
.gafaadew.modal._popup:has(.ph-lock),.gafaadew._panel:has(.ph-lock) {
	background-color: rgba(40, 0, 40, 1) !important;
}

/* 公開範囲がフォロワー限定の投稿の背景色を変更 */
.tkcbzcuz:has(.ph-lock) {
	background-color: rgba(255, 0, 255, 0.10) !important;
}

/* 以下、チャンネルとはありますが、現時点では「ローカルのみ」を対象として
　代用＆暫定対応しています。　不要なら削除するかコメントアウトしてください。 */

/* チャンネルの投稿作成時の背景色を変更 */
.gafaadew.modal._popup:has(.ph-hand-fist),.gafaadew._panel:has(.ph-hand-fist) {
	background-color: rgba(0, 40, 0, 1) !important;
}

/* チャンネルの投稿の背景色を変更 */
.tkcbzcuz:has(.ph-hand-fist) {
	background-color: rgba(100, 255, 100, 0.10) !important;
}

公開範囲に応じて、投稿の背景色を変更する

Misskey（引用）

/* 公開範囲がホームの投稿の背景色 */
.xcSej.x3762:has(.ti-home),.xcSej:has(.ti-home) {
    background-color: rgba(0, 255, 255, 0.10) !important;
}
/* 公開範囲がダイレクト(DM)の投稿の背景色 */
.xcSej.x3762:has(.ti-mail),.xcSej:has(.ti-mail) {
    background-color: rgba(255, 255, 100, 0.10) !important;
}
/* 公開範囲がフォロワー限定の投稿の背景色 */
.xcSej.x3762:has(.ti-lock),.xcSej:has(.ti-lock) {
    background-color: rgba(255, 0, 255, 0.10) !important;
}

【公開範囲に応じて背景色変更するカスタムCSS】
通知の全ての欄のリプ等に色つかにゃい問題修正バージョンです
細かい変更にゃので今使ってるやつで良い方は変更しにゃくてもいいかも
注意：更新される方で色変更している場合は、色の上書きにご注意ください…

自分の投稿がどれににゃってるかも気づきやすくにゃるから
ちょっと便利だよ！

色はそれぞれ
rgba(r,g,b,a)で触ってね(aはたぶん透過率)

さなちゃ♪ (@isana) | Misskey.io

Firefish（移植）

/* 公開範囲に応じて、投稿の背景色を変更する
  投稿の公開範囲に応じて、各投稿の背景色を異なるものに変更します。
  これにより、ひと目で公開範囲が判別できる効果が期待できます。
  RGBA（赤, 緑, 青, 透明度）の数値を変更すれば、お好みの色にできます。 */

/* 公開範囲がホームの投稿の背景色 */
.tkcbzcuz.qtqtichx:has(.ph-house) {
  background-color: rgba(0, 255, 255, 0.10) !important;
}

/* 公開範囲がダイレクト(DM)の投稿の背景色 */
.tkcbzcuz.qtqtichx:has(.ph-envelope-simple-open) {
  background-color: rgba(255, 255, 100, 0.10) !important;
}

/* 公開範囲がフォロワー限定の投稿の背景色 */
.tkcbzcuz.qtqtichx:has(.ph-lock) {
  background-color: rgba(255, 0, 255, 0.10) !important;
}

投稿時に公開範囲を間違えるのを、色分けで防止する

Misskey（引用）

/* 公開範囲がホームの投稿作成時の背景色を変更 */
.xpDI4.xxtDg._popup:has(.ti-home) {
background-color: rgba(0, 40, 40, 1) !important;
}
/* 公開範囲がダイレクトの投稿作成時の背景色を変更 */
.xpDI4.xxtDg._popup:has(.ti-mail) {
background-color: rgba(40, 40, 10, 1) !important;
}
/* 公開範囲がフォロワー限定の投稿作成時の背景色を変更 */
.xpDI4.xxtDg._popup:has(.ti-lock) {
background-color: rgba(40, 0, 40, 1) !important;
}

投稿範囲をよく間違える人向けカスタムCSS

自分が投稿するときによく間違えるので防ぐために作成

色はダークモード基準にゃのでそれぞれ
rgba(r,g,b,a)で触ってね(aは1固定がいいよ)

さなちゃ♪ (@isana) | Misskey.io

Firefish（移植）

/* 投稿時に公開範囲を間違えるのを、色分けで予防する
  投稿時の公開範囲に応じ、背景色を異なるものに変更することで、
  公開範囲を間違えたまま投稿することを予防します。
  これにより、ひと目で公開範囲が適切かに気づける効果が期待できます。
  RGBA（赤, 緑, 青, 透明度）の数値を変更すれば、お好みの色にできます。 */

/* 公開範囲がホームの投稿作成時の背景色を変更 */
.gafaadew.modal._popup:has(.ph-house) {
  background-color: rgba(0, 40, 40, 1) !important;
}

/* 公開範囲がダイレクトの投稿作成時の背景色を変更 */
.gafaadew.modal._popup:has(.ph-envelope-simple-open) {
  background-color: rgba(40, 40, 10, 1) !important;
}

/* 公開範囲がフォロワー限定の投稿作成時の背景色を変更 */
.gafaadew.modal._popup:has(.ph-lock) {
  background-color: rgba(40, 0, 40, 1) !important;
}

チャンネル投稿も色分けする

Misskey（引用）

/* チャンネルの投稿作成時の背景色を変更 */
.xpDI4.xxtDg._popup:has(.ti-device-tv) {
background-color: rgba(0, 40, 0, 1) !important;
}

/* チャンネルの投稿の背景色 */
.xcSej.x3762:has(.ti-device-tv) {
    background-color: rgba(100, 255, 100, 0.10) !important;
}

こちらを改造してチャンネル投稿も色が変わるようにしてみたよ

みれい :verified_misskey_gradiant: (@Mi) | Misskey.io

Firefish

※単体提供していないので、統合版をお使いください。

ウィジェットの投稿フォームを色分けし誤爆を防止

※「投稿時に公開範囲を間違えるのを、色分けで防止する」と重複する箇所があります。

Misskey（引用）

/* 公開範囲がホームの投稿作成時の背景色を変更 */
.xpDI4.xxtDg._popup:has(.ti-home) {
    background-color: rgba(0, 40, 40, 1) !important;
}
.xpDI4._panel:has(.ti-home) {
    background-color: rgba(0, 40, 40, 1) !important;
}

/* 公開範囲がダイレクトの投稿作成時の背景色を変更 */
.xpDI4.xxtDg._popup:has(.ti-mail) {
  background-color: rgba(40, 40, 10, 1) !important;
}
.xpDI4._panel:has(.ti-mail) {
  background-color: rgba(40, 40, 10, 1) !important;
}

/* 公開範囲がフォロワー限定の投稿作成時の背景色を変更 */
.xpDI4.xxtDg._popup:has(.ti-lock) {
  background-color: rgba(40, 0, 40, 1) !important;
}
.xpDI4._panel:has(.ti-lock) {
  background-color: rgba(40, 0, 40, 1) !important;
}

ウィジェットの投稿でもなるようにしました！

c30 (@c30_eo) | Misskey.io

Firefish

※単体提供していないので、統合版をお使いください。

その他、Misskey向けカスタムCSSが配布されているページ

いくつか、他にも色々とカスタムCSSが公開・共有されているところを列挙しておきます。　こちらに関してもサーバーで動いているMisskeyのバージョンによっては動作しないものがあると思います。

なお、残念ながらFirefishにはそのまま持ち込んでも動作しないものがほとんどだと思うので、使いたい場合は手を入れる必要があります。