![見出し画像](https://assets.st-note.com/production/uploads/images/103179365/rectangle_large_type_2_aded52f71ea03fd3f54baaac7ebec705.png?width=1200)
MisskeyをカラフルヘッダーにするCSS設定
こんな感じにヘッダーを設定したので備忘のため記載します。
![](https://assets.st-note.com/img/1681644474701-gTTY2sqoLY.png?width=1200)
MisskeyのCSSの設定について
MisskeyのCSSの設定は、設定 - クライアント設定 - 全般 - カスタムCSS から設定できます。
![](https://assets.st-note.com/img/1681645073106-WvhiL1GCpx.png)
![](https://assets.st-note.com/img/1681645077926-fDBua7tF3r.png)
![](https://assets.st-note.com/img/1681645083954-ch3Ztel20N.png)
![](https://assets.st-note.com/img/1681645089331-0w3Kb9WfCn.png)
CSS設定内容
以下の内容をCSS設定欄にコピーしてください。
/* カラフルヘッダー */
header.xCPfz {
background: linear-gradient(to right, #9400d3, #4b0082, #0000aa, #008000, #aaaa00, #aaa500, #aa0000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
設定欄を変種すると保存ボタンが表示されるのでクリックしてください。
![](https://assets.st-note.com/img/1681645741979-M3uJWexR4X.png)
![](https://assets.st-note.com/img/1681645814127-Dgepx8Qy8O.png)
これで最初に示した画像のように、ヘッダーがカラフルになります。
(ChatGPTに聞きました)
ChatGPTに出力してもらったCSSから、見やすいようにカラーコードをちょっと調整して使いました。わー!
![](https://assets.st-note.com/img/1681646253406-1pW5Rv2oNt.png)
この記事が気に入ったらサポートをしてみませんか?