ブログのデザインを変えた

このブログでは長らく Airmail というデザインテーマを使っていたのですが, レスポンシブデザインに対応していないなど, 現代の使い方 (アクセスのされ方) に照らしてみるとやや時代遅れという感が否めませんでした.

blog.hatena.ne.jp

そんなわけで体験を現代化するため, あとはついでにはてなブログが吐き出す HTML の構造も知っておきたかった (?) ので, デザインテーマを作ってそれに変えました.

作り方

まずははてなブログ公式のヘルプやボイラープレートを参考にします.

help.hatenablog.com

github.com

はい, ここまでで作れば作れるということがわかったので, 一旦全部忘れます.

ボイラープレートのリポジトリは Sass / SCSS を使ってデザインテーマをビルドするための一式が入っているのですが, ツールチェインがやや古びていたり, 変更を加えた時もページを自動リロードしてくれなかったりします.

とはいえやはり現代ともなれば自動リロードくらいしてほしいですし, 同時に付随するスクリプトのビルドもしてほしい. ということで Vite を使ってピャッと開発環境を用意しました. このあたりは元気が出たらボイラープレートの方にフィードバックします...

Vite には Backend Integration といって HTML を配信するサーバー (今回ははてなブログのサーバー) と CSS や JS を配信するサーバー (Vite) を分離できる機能があるので, これを使うことにします. まずは (index.html は置かないので) vite.config.js に以下のようにエントリポイントを設定して, 開発サーバーを起動しておきます.

export default {
  build: {
    rollupOptions: {
      input: ["src/style.scss", "src/script.ts"],
    },
  },
};

ブログのデザイン設定の CSS はこういう感じにレスポンシブ対応を示すおまじないだけを残して空にしておいて,

/* Responsive: yes */

ブログの詳細設定から <head> 内にこういうのを入れておきます.

<script type="module" src="http://localhost:5173/@vite/client"></script>
<link rel="stylesheet" type="text/css" href="http://localhost:5173/src/style.scss" />
<script type="module" src="http://localhost:5173/src/script.ts"></script>