![見出し画像](https://assets.st-note.com/production/uploads/images/123361671/rectangle_large_type_2_98173b3ee76ff088f7dfd88d1efb8ca0.png?width=1200)
Notion のインラインリンクを Stylus で見やすくする
こんにちは。チャベスと言います。
この記事では、Notion の インラインリンクを Stylus で見やすくする方法を紹介します。
例えば、以下のようなテキストリンク(「チャベス」や「NotionSidebarHider」という文字)はデフォルトでは以下のように表示されます。
![](https://assets.st-note.com/img/1701514020095-2w5dkub84c.png?width=1200)
対して、 Stylus を使うと以下のようにインラインリンクを見やすくすることができます。
![](https://assets.st-note.com/img/1701514114041-ueamLb3xUt.png?width=1200)
この方法を使うと、以下のようにリンクを貼り付けただけでリンクの色が青色に変わり、リンクの最後に ↗︎ マークをつけることができます。
![](https://assets.st-note.com/production/uploads/images/123360986/picture_pc_cf56781529b73f47665a612764e0c00e.gif?width=1200)
Stylus とは
今回は、Chrome 拡張機能の「Stylus」を使用します。 Stylus について知らない方は以下の記事を参考にしてください。
Stylus の設定
Stylus で以下のようなコードを設定してください。
![](https://assets.st-note.com/img/1701514214192-Eezn8yiU2s.png?width=1200)
.notion-link-token {
color:#337EA9!important;
font-weight: bold;
}
.notion-link-token::after {
content: " ↗︎";
}
以上で、リンクにスタイルが適用されます。
おわりに
今回は、Stylus でインラインリンクを装飾する方法を紹介しました。Stylus を使えば今回の方法以外にもさまざまなカスタマイズができるので、ぜひ触ってみてください。
この記事が気に入ったらサポートをしてみませんか?