[Misskey]サーバー情報をアイコンで投稿の左上に表示するカスタムCSS

プレビュー

推奨設定

• [環境設定 > タイムラインとノート > ノートのサーバー情報]を常に表示に変更
• [環境設定 > パフォーマンス > アイコンをスクロールに追従させる]を無効に変更

カスタムCSS

/* Server info icon  |--- */
/* サーバーアイコン下処理 */
.xaVIe {
    height: 0 !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

/* サーバーアイコンスタイル */
.xuevx {
    position: absolute !important;
    background-color: var(--panel);
    width: clamp(16px, 5%, 32px) !important;
    height: auto !important;
    margin: 4px 0 0 4px !important;
    border-radius: 8px !important;
    aspect-ratio: 1/1 !important;
    object-fit: contain !important;
    -webkit-user-drag: none;
    user-select: none;
    opacity: 1; /* 半透明設定 0.0~1.0 */
}

/* サーバーアイコン位置(タイムラインノート,リノート) */
.x5yeR .xuevx {
    top: 0;
    left: 0;
}

/* サーバーアイコン位置(単体ノート)@pc */
@media (min-width: 588px) {
    .xexC6 .xuevx {
        z-index: 100;
        top: clamp(-32px, 10vw, -64px);
        left: clamp(-32px, 10vw, -64px);
    }
}

/* サーバーアイコン位置(単体ノート)@mob */
@media (max-width: 588px) {
    .xexC6 .xuevx {
        z-index: 100;
        top: -16px;
        left: -16px;
    }
}

/* サーバー名非表示 */
.xiWQB {
    display: none !important;
}
/* ---| END */

動作確認バージョン

• 2025.4.n