このサイトは、はてなブログをカスタマイズして構築しています。
このカテゴリではブログのカスタマイズの記録を記載していきます。
まずは初回なので全体的なセットアップからです。
テンプレート
GitHub - hatena/Hatena-Blog-Theme-Boilerplate
はてなブログはカスタマイズ用のテンプレートとして上記のリポジトリを公開してくれています。私もこれをベースに作成しています。
また、公式のヘルプもさっと一読しておくといいと思います。
CSS フレームワーク
今回は、テンプレートに加えて CSS フレームワークを導入しています。
Bulma: Free, open source, and modern CSS framework based on Flexbox
Bulma を選択したのには、はてなブログとの相性がとかの理由はありません。tailwind 等でも良かったのですが、直近の仕事で使っていたのでサクッと使えるだろうと考えただけです。なんでも良いと思います。
ただ、後述しますが、はてなブログは添付できる CSS のサイズが大きく無いので、その辺りで使えないフレームワークが出てくるかもしれません。
Bulma のテーマ
Bulma のデフォルトから少し変えたかったので、テーマを適用しています。
以下の Themefisher のリポジトリから Free で利用できるテンプレートを利用しています。
では、ここからは具体的な作業を見ていきます。
作業
はてなブログのテンプレートの環境をローカルに作る
GitHub - hatena/Hatena-Blog-Theme-Boilerplate
README に詳しい手順が書かれているので特筆すべき点はありません。（多くの方がここに関しては解説記事を書いていらっしゃるので、不明点があれば探してみるとよさそうです）
Bulma の導入
npm で Bulma をインストールします。
cd Hatena-Blog-Theme-Boilerplate/ npm install -D bulma
続いて、scss/boilerplate.scss の最後の行に以下を追記します。
@import 'bulma/css/bulma.min.css';
これで問題なく npm start できればここまでは OK です。
テーマを導入する
Themefisher の Bulma テーマのリポジトリは大体以下のようになっています。
└── source/ └── scss/ ├── style.scss └── templates/
そして style.scss に templates ディレクトリ内のファイルを含む依存関係が記述されています。
例えば以下のテーマを見てもらえると感じが掴めると思います。 kross-bulma/source/scss/style.scss at main · themefisher/kross-bulma · GitHub
よって、お好みのテーマリポジトリをダウンロードし、 scss ディレクトリを丸ごと、 Hatena-Blog-Theme-Boilerplate/scss に上書きします。
同じファイル名のものは無いはずなので、両方のファイルが共存することになるはずです。
そして、テーマの style.scss の内容を、テンプレートの scss/boilerplate.scss の最終行に全てコピーします。そこまでできれば、 style.scss は削除してします。
ここまでで scss/boilerplate.scss には、Bulma とテーマの import 文が末尾に並んでいるはずです。
ビルド後の CSS の軽量化
ここまでで、おそらく Bulma とテーマのスタイルを使った開発ができていると思います。
しかし、この状態で npm run build すると分かるのですが、相当大きなサイズの CSS ファイルがビルドされてしまいます。 (少なくとも 200kb は超えていると思います)
以下のヘルプにある通り、はてなブログのデザインCSS は 64kb が上限です。
デザインCSSを記述する - はてなブログ ヘルプ
よって、このままではいくらスタイルをカスタマイズしても実際に適用することができません。
PurgeCSS の導入
PurgeCSS - Remove unused CSS | PurgeCSS
今回は PurgeCSS を使って軽量化します。簡単には実際に使ったスタイルのみをビルド対象に含めるというものです。
まずは npm で導入します。
npm install -D vite-plugin-compression npm install -D @fullhuman/postcss-purgecss
続いて、使ったかどうかを判断するための HTML を配置します。
PurgeCSS はあくまで検査対象となる HTML 等を走査して、使われているスタイルを検出します。
はてなブログのスタイル開発においては、対象の HTML ははてなブログのデザインのページに直接記述しますが、ここではその HTML をローカルで管理することで PurgeCSS が検査できるようにします。（もっといい方法がありそうな気もしますが）
よって、以下のようにディレクトリとファイルを配置します。
. ├── blog/ │ ├── below_the_blog_title.html // Header の Below the blog title │ ├── entry_sample.html // ここに関してはブログエントリーの HTML を開発者ツールでコピー │ ├── footer.html // Footer │ ├── html_in_entry_footer.html // Entry の HTML in entry footer │ └── html_in_entry_header.html. // Entry の HTML in entry header ├── scss/ ...
entry_sample.html だけは異なりますが、他は全て管理者メニューのデザインページのカスタマイズタブで設定できる HTML です。
entry_sample.html はコメントにある通り、開発者ツールでコピーしてきた実際のエントリーの HTML です。このエントリーにははてなブログが最初に用意する確認用のエントリーを使いました。（「あのイーハトヴォのすきとおった風・・・」から始まるものです。）
また、これに関しては container class が追加 div のみを利用しています。 (エントリーの内容だけが必要なので、これで十分と判断しています）
最後に vite.config.js を以下のように変更します。
import autoprefixer from "autoprefixer";
import viteCompression from "vite-plugin-compression";
import purgecss from "@fullhuman/postcss-purgecss";
export default {
plugins: [viteCompression()],
build: {
rollupOptions: {
input: ["scss/boilerplate.scss"],
output: {
assetFileNames: ({ name }) => name,
},
},
outDir: "build",
cssMinify: true,
},
css: {
devSourcemap: false,
postcss: {
plugins: [autoprefixer(),
purgecss({
content: ["blog/*.html"],
safelist: [/^entry/, /^archive/, /^page/] // ここに関しては開発内容に合わせる
}),
]
}
},
};
ここまでで npm run build を実行し、ビルド後の CSS ファイルが十分に軽量化されていれば成功です。
参考
ビルドされた CSS の内容を貼り付ける
特に説明は不要かもしれませんが、カスタマイズの Advanced -> Stylesheet に貼り付けます。 ヘルプにもありますが、レスポンシブ対応の CSS を書くことを心がけます。
まとめ
はてなブログのカスタマイズは多くの人が実施していて方法も様々だと思います。
私も現状こうしていますが、引き続きやり方は模索していきたいと思います。
以下は、実際にこのブログに適用している私のスタイルを管理するリポジトリです。この記事の内容時点のハッシュは 118b325 となります。
