Menu

カスタムCSS

Last-modified: 2024-10-23 (水) 12:04:05

導入方法

CSSを使用するとmisskeyの表示を変えることができます。


【導入場所】
『設定』→『クライアント設定/全般』の一番下にある『カスタムCSS』


Misskey の更新に伴い表示崩れの原因になる場合があります。その場合はカスタム CSS を削除してください。
画面のデザインが変わるため自己責任で使用してね！



リアクション関係

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

今は設定の『全般』で多少いじれるようになったね。

もっと見る
/* 老眼用絵文字表示（リアクション） */
.x9Io4 {
 height: 2.25em;
}
/* 老眼用絵文字表示（ノートについたリアクション） */
.xDpSv {
 font-size: 1.2em !important;
}
/* 老眼用絵文字（ノートのリアクション※v2023.9.0アプデ対応） */
/* 【設定】→【全般】で絵文字サイズ小推奨） */
.xlT1y .x5kTm,
.xlT1y .xagin {
    height: 2.25rem !important;
}


リアクションに影をつける（視認性向上）

背景に紛れて見えにくくなってるリアクションがちょっと見やすくなる。

もっと見る
/* リアクションに影をつける */
.xeJ4G {
    filter: drop-shadow(0px 0px 2px black);
}


特定の絵文字のみ表示しない

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

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

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


特定のサーバーからの絵文字をリアクションから消す

「申し訳ないけど、このサーバーの絵文字はしんどい」という人用。

もっと見る
/* 他のサーバーのリアクションを非表示（misskey.ioの部分を適宜変更してください） */
button:has(img[title*="misskey.io"]) { display: none; }


特定の文字列を含む絵文字を全てリアクションから消す

シリーズものをまとめて非表示にしたいときに、文字が含まれるとなんでも消えるので短い言葉は非推奨

もっと見る
/* 特定の文字列のリアクションを非表示（インコの部分を適宜変更してください） */
button:has(img[title*="インコ"]) { display: none; }


リアクション数を非表示にする

SNSの反応数が疲れた人用。

もっと見る
/* リアクションされた回数だけを消す */
.xDpSv{
  display: none;
}





TL/UIの視認性向上

x3,x4の拡大率を自分のTL上では2倍に固定

TLに字や絵文字がでかいノートが流れてくるよ！って人用。

もっと見る
/* x3,x4の拡大率を2倍に固定 */
.mfm-x3,
.mfm-x4 {
  --mfm-zoom-size: 200%;
}


TLに表示される画像を小さくするCSS

TLに載る画像が大きすぎる……。もっとTLをコンパクトに……という方向けのCSS

もっと見る
/* 画像の高さを調整 */
.xutAY.xsfFg {
	max-height: 180px !important;
    margin-left: auto !important;
    margin-right: auto !important;


ノート投稿画面に表示される、添付画像のプレビューを大きくする

あくまでも投稿画面のプレビューなので、実際に投稿されるサイズは変わらないです。

もっと見る
/* ノート投稿画面に表示される、添付画像のプレビューを大きくする */
.skeikyzd > .files > .file {
    width: 140px !important;
    height: 140px !important;
}


RNした人のアイコンを非表示

RNにアイコンはいらないよねって人へ

もっと見る
/* RNした人のアイコンを非表示 */
.xf8ll { display: none !important; }


RNした人の情報欄の余白縮小

もうちょっとｷｭｯとなってほしい人へ

もっと見る
/* RNした人の情報欄の余白縮小 */
.xBwhh { padding: 4px 4px 1px !important; }


デッキ表示でチャンネル発言をTLで好きな色で表示させる

もっと見る

nth-child(1)の数字は左から何番目のカラムに設定するかで変えてください
color: aqua;の部分をdisplay: none;に変えると特定のチャンネルだけTLに流さないこともできます

.left section:nth-child(1) div .x5yeR:has(.xww2J[href^="/channels/チャンネルのID"]) {
   color: 色指定aquaなど;}

使用例　FF14を水色で表示

.left section:nth-child(1) div .x5yeR:has(.xww2J[href^="/channels/9arvvdva1u"]) {
   color: aqua;}


公開範囲別、ノートの色変CSS（誤爆防止）

とにかく誤爆を防止したい！という人向け
投稿フォームの色替えは↓の方にある【その他、UI微調整関係】にて

もっと見る
/* TL上で公開範囲別で背景色の色変え */
/* ホーム限定ノートを目立たせる（背景色を付ける） */
.x5yeR:has(span[title="ホーム"]) {
    background-color: rgb(90, 60, 60);
    color: #ffffff;
    --fg: #cccccc;}
/* フォロワー限定ノートを目立たせる（背景色を付ける） */
.x5yeR:has(span[title="フォロワー"]) {
    background-color: rgb(65, 65, 70);
    color: #ffffff;
    --fg: #cccccc;}
/* ダイレクトノートを目立たせる（背景色を付ける） */
.x5yeR:has(span[title="ダイレクト"]) {
    background-color: rgb(70, 90, 70) ;
    color: #ffffff;
    --fg: #cccccc;}

ノートを詳細表示した後も色変わっててほしいよって時は↓

/* .xpDI4:投稿 .x5yeR:TL .xBwhh:TL(RN) .xexC6:詳細 .xtE7t:詳細(RN) .xD2mX:関連(返信など) */
/* ホーム限定ノートを目立たせる（背景色を付ける） */
.xpDI4:has(.x6ccQ .ti-home)::before,
:is(.x5yeR, .xBwhh, .xexC6, .xtE7t, .xD2mX):has(.ti-home) {
    background-color: rgb(90, 60, 60);
    color: #ffffff;
    --fg: #cccccc;}

/* フォロワー限定ノートを目立たせる（背景色を付ける） */
.xpDI4:has(.x6ccQ .ti-lock)::before,
:is(.x5yeR, .xBwhh, .xexC6, .xtE7t, .xD2mX):has(.ti-lock) {
    background-color: rgb(65, 65, 70);
    color: #ffffff;
    --fg: #cccccc;}

/* ダイレクトノートを目立たせる（背景色を付ける） */
.xpDI4:has(.x6ccQ .ti-mail)::before,
:is(.x5yeR, .xBwhh, .xexC6, .xtE7t, .xD2mX):has(.ti-mail) {
    background-color: rgb(70, 90, 70) ;
    color: #ffffff;
    --fg: #cccccc;}


タイムラインのデザインを変更する

発言者のアイコンを本来の場所からは消して、ノートの背景画像にする。、特にデッキUIで横幅が稼げます。

もっと見る
/* アイコンを背景として右下に表示する */
.xrEoV {
    scale: 3;
    opacity: 0.4;
    z-index: -1;
    position: absolute!important;
    top: calc(100% - 58px)!important;
    left: calc(100% - 58px)!important;
}
/* ポップアップのズレを補正 */
.xu3k3:has(.xnojU),.x1tDq:has(.xmMls) {
    left: unset!important;
}

ノートの左側が不自然に開く場合、以下も含めてください

/* ノートの左側が不自然に開く場合 */
.xDn7E {
    margin-left:-58px;
}





除外/非表示関係

ソフトミュートの「○○が何か言っています」の表示を消す

せっかくワードミュートしてるのに、気になって開いちゃう…！という人向け。

もっと見る
/* ソフトミュート「〇〇がなにか言った」を消す */
.xkYCV.x3762, .xs9Pb.xCFgx {
    display:none;
}


自分以外のノートでリプライ数、RN数、リアクション数を非表示にする

SNSの数字に右往左往してしまう！したくない！という人向け。

もっと見る
/*自分以外のノートでリプライ数、RN数、リアクション数を非表示にする*/
div[class="xcSej x3762"]:has(>article >a:not([href="/@自分のUserID"])) :is(span.xDpSv, p.xt1qp) {
    display: none !important;
}


特定のユーザーの存在感を弱くするシリーズ

特定のユーザーのアイコン画像がちょっと怖い、同じゲームをやっていてネタバレ画像投稿がちょっと怖い、
リアクション一覧でその人の名前を見たくないなど、ちょっとしたストレスを解消するCSS達です。
作者:@Daru_neve

もっと見る

@USERNAME/USERNAMEの部分を対象のユーザーIDに書き換えることで対象を指定できます。

/* ---- げむすきユーザー全員の投稿する画像の視力が悪くなるやつ ---- */
/*　2023/05/26追記　全般設定＞アピアランス＞データセーバーを有効にする方が色々と良いです。*/
.xutAY {
    filter: blur(10px);
}
/* ---- 特定ユーザーの画像の視力が悪くなるやつ ---- */
.xDn7E:has(.xCPfz a[href$="@USERNAME1"],.xCPfz a[href$="@USERNAME2"],.xCPfz a[href$="@USERNAME3"]) .x48yH~:nth-of-type(2) .xutAY {
    filter: blur(10px);
}
/* ---- 特定ユーザーのアイコンの視力が悪くなるやつ ---- */
:is(a[href$="@USERNAME1"],a[href$="@USERNAME2"],a[href$="@USERNAME2"]) :is(.xdJCj, .xraw1) {
    filter: blur(10px);
}
/* ---- リアクション一覧から特定ユーザーの存在をなかったことにするやつ(ユーザー名に@不要) ---- */
.x6Dog:has(span[title^="USERNAME1"],span[title^="USERNAME2"],span[title^="USERNAME3"]) {
    display: none;
}


特定の誰かのフォロ限投稿を非表示にする

悪い人じゃないんだけど、フォロ限投稿内容だけはどうにも合わない…ということは、まあ、ままありますね。

もっと見る
/* 特定の誰かのフォロ限投稿を非表示にする */
.xcSej:has(.x5yeR > a[href*="/@USER01"]
, .x5yeR > a[href*="/@USER02"]
, .x5yeR > a[href*="/@USER03"])
:has(.ti-lock) {display:none;}

a[href*="/@USER03"]の後ろに、以下のコマンドを増やすことで対象を増やせます

, .x5yeR > a[href*="/@USER04"]


特定の誰かのホーム投稿を非表示にする

フォロ限はみたいけどホーム発言は…という人に

もっと見る
/* 特定の誰かのホーム投稿を非表示にする */
.xcSej:has(.x5yeR > a[href*="/@USER01"]
, .x5yeR > a[href*="/@USER02"]
, .x5yeR > a[href*="/@USER03"])
:has(.ti-home) {display:none;}}}


メインカラムのLTL,GTLを封印するCSS

LTL/GTLで一喜一憂してしまう、HTLに切り替えてもつい意識してしまい、精神衛生的に良くない…
という方向けのCSSです。　心が落ち着いたらこのCSSを解除すれば良いと思うのじゃ
作者:@Daru_neve

もっと見る
/* ---- STL/LTL/GTLタブを選択不可にする ---- */
.xo5lq.xvOIQ:nth-child(2),.xo5lq.xvOIQ:nth-child(3),.xo5lq.xvOIQ:nth-child(4) {
    display: none;
}
/* ---- 公開設定から[グローバル投稿]を非表示にする  ---- */
.xncUq:nth-child(2) {
    display: none;
}


特定のチャンネルをTLで表示させない（RNも非表示）

申し訳ないけどどうしても苦手で……って人用

もっと見る

チャンネルの最後の部分というのは、URLの最後にある数字の羅列です

/* 特定のチャンネルをTLで非表示（RNも非表示にする） */
div.xcSej.x3762:has(.xDn7E>div a[href="/channels/チャンネルURLの最後の部分①"] ,.xDn7E>div a[href="/channels/チャンネルURLの最後の部分②"] ,.xDn7E>div a[href="/channels/チャンネルURLの最後の部分③"]) {
    display: none;
}


名前にカーソルあてた時のポップアップを無効化

急にポップアップ出てきてびっくりする時用。

もっと見る
/*名前にカーソルあてた時のポップアップを無効化*/
.x1tDq._popup._shadow {
    display: none;
}


GTLにげむすきノートを表示させないやつ

別になにということもないけど、なんかグローバルがより雑多に、面白くなる

もっと見る
/* グローバルTLでげむすきのみ除外 */
 div:has(.xj7PE .ti-whirl)+div .xcSej:not(:has(.xrEoV[title*="@"])) {
        display: none;
}


「サーバーから切断されました」を消す（主にスマホ用）

あれ邪魔だよね

もっと見る
/* サーバーから切断されましたを消す */
.xn5WL {display: none; !important;}





その他、UI微調整関係

公開範囲別、ノート投稿欄の色変CSS（誤爆防止）

もっと見る

とにかく誤爆を防止したい！という人向け（投稿フォーム編）
チャンネル投稿に関しては下記に。
TLの色変更は↑の方にある【TL/UIの視認性向上】にて

/* ポップアップノート投稿フォームの背景色変更 */
/* ホーム投稿のときノート投稿フォームの背景色を変更 */
.xpDI4.xxtDg._popup:has(i.ti.ti-home) {
  background-color: rgb(70, 40, 40);
    color: #cccccc;
    --fg: #ffffff;
}
/* フォロワー限定のときノート投稿フォームの背景色を変更 */
.xpDI4.xxtDg._popup:has(i.ti.ti-lock) {
  background-color: rgb(50, 50, 55);
    color: #cccccc;
    --fg: #ffffff;
}
/* ダイレクト投稿のときノート投稿フォームの背景色を変更 */
.xpDI4.xxtDg._popup:has(.ti-mail) {
  background-color: rgb(50, 70, 50);
    color: #cccccc;
    --fg: #ffffff;
}
/* ウィジェットの投稿フォーム背景色変更 */
/* ホーム投稿のときノート投稿フォームの背景色を変更 */
.xpDI4._panel.mkw-post-form.xtI5S:has(i.ti.ti-home) {
  background-color: rgb(70, 40, 40);
    color: #cccccc;
    --fg: #ffffff;
}
/* フォロワー限定のときノート投稿フォームの背景色を変更 */
.xpDI4._panel.mkw-post-form.xtI5S:has(i.ti.ti-lock) {
  background-color: rgb(50, 50, 55);
    color: #cccccc;
    --fg: #ffffff;
}
/* ダイレクト投稿のときノート投稿フォームの背景色を変更 */
.xpDI4._panel.mkw-post-form.xtI5S:has(.ti-mail) {
  background-color: rgb(50, 70, 50) ;
    color: #cccccc;
    --fg: #ffffff;
}


チャンネルのノート投稿欄の誤爆防止CSS（誤爆防止）

もっと見る

とにかく誤爆を防止したい！という人向け（チャンネル編）

/* チャンネル誤投稿防止用 */
/*（スマホ専用）チャンネルではLTLノート投稿ボタンを消す*/
body:has(.xpACr.xCGq6) .x7c6u.xyfXN._button {
    display: none;
}

/* チャンネル投稿 背景色 */
.xpDI4.xxtDg._popup:has(._button.xrrzA:disabled) {
    background-color: #f0e9ee;
    color: #e84d83;
    --fg: #e84d83;
}

/* チャンネル投稿 ボタン色 */
.x1Ye0:has(._button.xrrzA:disabled)>._button.xBTsK>.xiS7Q {
    background: linear-gradient(90deg,rgb(197, 158, 255),rgb(236, 65, 155));
}


ポップアップノート投稿フォームの初期サイズと位置調整

もっと見る

好みに合わせて数値を変えてください

/* ポップアップノート投稿欄の初期サイズと位置 */
.xpDI4.xxtDg._popup .x8B0D {
	width: 720px;
	height: 150px;
}
.xpDI4.xxtDg._popup.xxski {
    margin-right: 110px;
    margin-top: 60px;
}


ウィジェットの投稿フォームのサイズを大きくする（便利）

もっと見る
/*ウィジェットの投稿フォームのサイズを大きくする*/
._panel textarea.x8B0D {
    height: 140px;
}


ポップアップの初期サイズを変更

もっと見る

注意：サイズが固定化されるので、CSS適用中は自分で変更できなくなります。

/* ポップアップの初期サイズ */
.xpAOc:not(.xwAht) {
	width: 700px !important;
	height: 850px !important;


（スマホ用）TL表示の上のアイコン+日本語説明から説明を抜き圧縮

つまり、「ソーシャル」「アンテナ」といった日本語表記を消して、アイコンだけにする

もっと見る
/* （スマホ用）TL表示の上のアイコン+日本語説明から説明を抜き圧縮 */
.xqAei.xvOIQ {
    display: none;
}


ノートの時間表記を絶対時間表記にする

つまりxxxx年xx月xx日xx時xx分ということ

もっと見る

下から2行目のfont-size: 0.8rem の数値変更で文字サイズ変わります
最後のcolor: の数値を変更で文字色が変わります。デフォルトが良い場合は削除してください。

time.xtktr {font-size: 0;}
time {font-size: 0;}
time:after {
    content: attr(title);
    font-size: 0.8rem;
        color: #a9a9a9; }



下記のCSSは、上の時間表記変更CSSタグの表示方法を示すものです。（右寄せか左寄せか）
時間表記変更機能は含んでいません。使用の際は併用してください。

↓左詰めがいい人はこちら

/* 幅が狭いカラムで絶対時間表記CSS適用時に適宜折り返す */
.xCPfz {
    display: block;
    white-space: normal;
    .xngrp, .xBLVI, .x5vC9, .xAtlm { display: inline; }
    .xAtlm { white-space: nowrap; }}

↓右詰め（デフォルト）が良い人はこちら

/* 幅が狭いカラムで絶対時間表記CSS適用時に適宜折り返す */
.xCPfz {
    flex-wrap: wrap;}


ノートの時間表記の存在感をいじる

目立たせたり、目立たなくしたり…（数値は好きにいじろう）

もっと見る
/* 時間表記の存在感を変更 */
time { font-size: 0.8rem;
        color: #a9a9a9; }





備考

カスタムCSS参考ページ

自分でオリジナルのカスタムCSSを作りたい場合

※いきなりカスタムCSSとしてげむすきに反映すると、何も表示されなくなる可能性があるため、
各ブラウザの開発者ツールや、以下のstylusプラグインを使用し、事前に確認することをおすすめします。




なんもわからなくてもこれで安心編集用コピペ

CSSタイトル

あるなら一言

もっと見る

あるなら一言

CSSはるところ
（/* CSSの内容メモ */はつけようね）



}}}}