マストドンで便利なCSS

過去に自分が書いたCSSのまとめです。

StylishやStylebotと呼ばれる拡張機能をブラウザに導入することでユーザースタイルシートを使用することができます。

DMはデフォルトで色が変わりますが、それ以外は色が変わらないためCSSを拡張して変更しています。

 

「friends.nico」を標準としておりますので、他インスタンスで使えない場合があります。その場合はご連絡ください。

 

非公開色分け

/*非公開色分け*/
.status-private {
    background: #005 !important ;
}
.status .fa-lock::before {
 color: #FD0 !important ;
}

未収載色分け

/*未収載色分け*/
.status-unlisted {
    background: #202 !important ;
}

もっとみる削除

もっとみるを押すことなく最初からトゥートを開いた状態にします

/*もっとみる削除*/
.status__content__spoiler-link {
    display: none !important ;
}
.status__content__text {
    border-top: 1px #555 solid !important ;
    display: block  !important ;
    margin-top: 5px !important ;
    padding-top: 5px !important ;
}

特定の人のアバターだけ非表示にする

/*特定の人のアイコンだけ消すCSS*/
a[href="https://mstdn.jp/@ID"] .status__avatar{
    display:none
}
/*インスタンスURLと相手IDは修正してください*/

同一インスタンス以外の人の色を変える

※インスタンスのURLは使用するインスタンスに合わせて変更してください

/*同一インスタンス以外の人の色を変える*/
.status a:not([href^="https://friends.nico/"]) .display-name{
    color:#F00 !important ;
    background:#000 !important ;
}
.status a:not([href^="https://friends.nico/"]) .display-name:before{
    content:'★' !important ;
}

特定のインスタンスの人の色を変える

上のやつは自分のところ”以外”をまとめて変えますが、こちらは個別にインスタンスを指定していく形です。

/*特定のインスタンスの人の色を変える*/
.status a[href^="https://mstdn.jp/"] .display-name {
    color:#F00 !important ;
    background: #000 !important ;
}

.status a[href^="https://mstdn.jp/"] .display-name:before {
    content: '【JP】' !important ;
}
/*必要に応じてコピー、URLや配色・文字を変更する*/

自分は結局こんな感じにしてます。

.status a:not([href^="https://friends.nico/"]) .display-name:before {
    content: '【連合】' !important ;
}
/*↑URLには自分のインスタンスを指定してください*/
/*↓自分のインスタンスは除外したほうが見やすいです*/
.status a[href^="https://mstdn.jp/"] .display-name:before {
    color: #A00 !important ;
    content: '【JP】' !important ;
}

.status a[href^="https://pawoo.net/"] .display-name:before {
    color: #0AF !important ;
    content: '【Pawoo】' !important ;
}

.status a[href^="https://friends.nico/"] .display-name:before {
    color: #0A0 !important ;
    content: '【ニコ】' !important ;
}

画像が投稿された際の画像リンクを非表示にする

これが

こうなります。

/*画像が投稿された際の画像リンクを非表示にする*/
div[aria-label*='/media/'] span.ellipsis{
    display:none !important ;
}

特定のキーワードが含まれている際に強調するCSS

ナツキに反応させてますコピペで自由に増やしてください

※アプデでできなくなりました

div[aria-label*='ナツキ'] {
    background:#5AA !important ;
}

スクロールバーの高さを調整

小さくて横に動かしづらいという方へ

/*スクロールバー高さ調整*/
::-webkit-scrollbar {
    height: 20px !important ;
}

&nbsp !important ;

&nbsp !important ;

メモ

/*ブーストアイコンの色変えCSS*/
.active i.fa-retweet:after {
    content: '\f079' !important ;
    color: #F00 !important ;
}

i.fa-retweet:after {
    content: '\f079' !important ;
    color: #00F !important ;
}
i.fa-retweet:before{
    display:none !important ;
}

i.fa-retweet {
    background: none  !important ;
}

メモ2

実際に自分で使ってるCSSメモ

div.nico-connect-account {
    display: none  !important ;
}

ul.announcements {
    display: none  !important ;
}


/*もっとみる削除*/

.status__content__spoiler-link {
    display: none !important ;
}

.status__content__text {
    border-top: 1px #555 solid !important ;
    display: block  !important ;
    margin-top: 5px !important ;
    padding-top: 5px !important ;
}

/*アノニマストドン*/

/*
.status__avatar {
    display: none !important ;
}

.display-name {
    display: none !important ;
}
*/

/*
.status__content p::before {
    content: '(*´ω｀*)「' !important ;
}
.status__content p::after {
    content: '」' !important ;
}
*/


/*非公開色分け*/

.status-private {
    background: #005 !important ;
}

.status .fa-lock::before {
    color: #FD0 !important ;
}

/*未収載色分け*/

.status-unlisted {
    background: #202 !important ;
}

div.column-icon.collapsable + div {
    overflow: scroll  !important ;
}



/*
.status a:not([href^="https://friends.nico/"]) .display-name {
    background: #000 !important ;
}
*/

.status a:not([href^="https://friends.nico/"]) .display-name:before {
    content: '【連合】' !important ;
}

.status a[href^="https://mstdn.jp/"] .display-name:before {
    color: #A00 !important ;
    content: '【JP】' !important ;
}

.status a[href^="https://pawoo.net/"] .display-name:before {
    color: #0AF !important ;
    content: '【Pawoo】' !important ;
}

/*
.status a[href^="https://friends.nico/"] .display-name:before {
    color: #0A0 !important ;
    content: '【ニコ】' !important ;
}
*/

/*
.active i.fa-retweet:after {
    content: '' !important ;
    color: #F00 !important ;
}

i.fa-retweet:after {
    content: '' !important ;
    color: #00F !important ;
}

i.fa-retweet:before {
    display: none !important ;
}

i.fa-retweet {
    background: none  !important ;
}
*/

div[aria-label*='/media/'] span.ellipsis {
    display: none !important ;
}

div[aria-label*='ナツキ'] {
    background: #5AA !important ;
}

/*スクロールバー*/

::-webkit-scrollbar {
    height: 20px !important ;
}

&nbsp !important ;

ニコフレ用－ニコ動プレーヤーサイズ＆位置変更

/*ニコ動プレーヤーサイズ変更＆位置変更*/
.nico-video-player {
    position: fixed !important ;
    bottom: 0 !important ;
    right: 0 !important ;
    z-index: 1 !important ;
}

.nico-video-player__item {
    max-width: 640px !important ;
}

.nico-video-player__item>p {
    display: none !important ;
}

.nico-video-player__item iframe {
    width: 640px !important ;
    height: 360px !important ;
    transform: scale(1) !important ;
    margin-bottom: 0 !important ;
}