放置してたサイトを直した
こんにちは、もろみそです。気づいたら2026年になってしまいました😇 2025年のはじめに作ったこのサイトですが、作ったっきり満足してずっと放置していました(!?)。2026年になったのと長文を書けるしっかりした場所が欲しいなと思ったので、今更直したり追加したりしたことをまとめておきます。 追加したこと プロフィールのリンクを追加 プロフィールのリンクにSignalとメールアドレスを追加しました。何かあれば連絡してください。 フォントをKoruriとUDEV Gothicに変更 フォントをKoruriとUDEV Gothicに変更しました。KoruriもUDEV Gothicも自分のお気に入りのフォントです。 Papermodでのフォントの変更方法はこれを参考にしました。 直したこと プライバシーポリシーの追加 ダークモード時のページ遷移の点滅を修正 テーマの修正 それぞれ見ていきましょう。 プライバシーポリシーの追加 Google Analyticsを使っているのに、プライバシーポリシーがないのは非常によくない状態だったと反省しています。 サイトやアプリで Google アナリティクスを使用する際は、Google アナリティクスを使用していることに加え、Google アナリティクスでデータが収集、処理される仕組みについて開示する必要があります。 — Google アナリティクスの利用に関するポリシー 内容はここから確認できます。 ダークモード時のページ遷移の点滅を修正 ダークモードにしているときにページ遷移すると、一瞬白背景が見えてしまう問題を修正しました。CSS側で背景色を設定して修正しています。 追記: ローカル環境では直ったのに、デプロイしたサイトだとなぜか点滅が直っていなくて泣いています 😭 追記2: 直りました。Cloudflareが挿入したスクリプトが原因だったらしい(Claude Opus 4.5に聞いた) テーマの修正 元々のテーマではオレンジ調で個性があったのですが、目が痛くなりそうなほどの彩度と不十分なコントラスト比がとても気になったので、個性を殺して青基調の落ち着いた色に変更しました。 プルキンエ現象という、人間の目が暗いところで青色に強く反応する現象があるらしいので、ダークモードでは青基調のテーマは特に見やすいのかもしれません。 ちなみにオレンジのイメージが強いClaudeは少し黄色みのあるグレーを使っていました。 テーマジェネレーターを使おう 1からテーマを作るのは大変だし、ましてや一つ一つの色を手動で選ぶような方法は絶対にしたくなかったのでcielab-curved-paletteというツールを使ってカラーパレットを生成しました。 知覚的により均一なoklab色空間で生成できるツールもあるようですが、このサイトの使い勝手がよかったので採用しました。 パレットを作る キーカラーとCIELAB空間におけるカーブパラメータを設定すると、グラデーションが生成されます。 色立体をぐりぐり動かせる😆 テーマを作るつもりがない人も面白いので遊んでみてください。 テーマを作る 生成されたパレットをもとに、使用するグラデーションの範囲と分割数を設定すると、全景用と背景用のカラーパレットが生成されます。 しかも、生成されたカラーパレットがどんな風に見えるかプレビューできるので、実際に使うイメージがしやすいです。 CSS変数をエクスポートする 生成されたカラーパレットをCSS変数としてエクスポートできます。あとは自分のサイトに組み込むだけでOKです。 他にも気になるところがあれば直していきたいと思います。 本年もよろしくお願いいたします。 それでは、また。