🧑‍🎨

Zenn のユーザースタイル書いてみた (CSS)

に公開

Zenn が個人的に硬い印象を受けたので、全体的に角丸な感じにしてみました。
使えそうでしたら以下からダウンロードして利用いただくか、コードを流用して気になる部分はご自身で調整してご利用してみてください。

https://userstyles.world/style/22405

もし気になるところや不具合など有りましたらば、時間のある時に検討・調整するやもですんで気軽にフィードバックくださいませ。

大まかな変更点

  • 角まる強め・柔らかいデザインに
  • 1行の文字数を40文字ベースで幅調整
    • コードブロックは半角80文字になるようにフォントサイズを調整 (最小 12px)
      該当箇所の CSS
      pre {
        container-type: inline-size;
        code { font-size: max(12px, 1.962cqw) } /* 1行に80文字 (半角) が見えるフォントサイズ */
      }
      

      半角数字を入れて目視で調整してますが、OS やブラウザによっては差異が出るやもです。

ユーザースタイルの導入方法

Google Chromeの拡張機能で、Stylish を追加すれば簡単にインストールしたり、自分でも編集できるようになります。

終わりに

昨今では Tailwind CSS とかユーティリティファーストな感じで組まれてるページが増えてきて、なかなかユーザースタイルを書きにくい世の中になってるなぁと感じます。
CSS 書くのが好きな人としてはちょっと残念な所ですが、全く書けないって事も無いので、引き続き気になるサービスなど有ればユーザースタイルを書いてこうかと思います。

Discussion