Bloggerで本格的にカスタマイズを進めていくと、必ずぶつかる問題があります。
- XMLテンプレートが肥大化する
- CSSの管理が煩雑になる
- 修正履歴が追えない
- コードの可読性が落ちる
その解決策として有効なのが、CSSを外部ファイル化し、GitHubで管理する方法です。
本記事では、
- なぜ外部化すべきなのか
- 速度は遅くならないのか
- GitHubアカウント作成手順
- CSS設置方法
- Bloggerへの読み込み方法
まで、体系的に解説します。
なぜBloggerはCSSを外部化した方がよいのか？
例えば WordPress では、
- style.css
- functions.php
- header.php
- JavaScriptファイル
のように、ファイルが分離されています。しかしBloggerは違います。Bloggerは XMLテンプレート形式 を採用しており、
- レイアウト
- ウィジェット
- CSS
- JavaScript
をすべて1つのXML内で管理します。
その結果起きること
カスタマイズを重ねると、
- 数千〜数万行のテンプレート
- CSSの検索が困難
- 不要コードの蓄積
- バックアップが煩雑
という状態になります。
特にデザインを頻繁に変更する方にとって、これは大きなストレスです。
GitHubで外部管理するメリット
そこで活用したいのが GitHub です。
CSSを外部ファイルとして管理することで、
- XMLをスリム化できる
- ローカルエディタで快適編集
- 変更履歴が自動保存
- 過去バージョンへ即復元可能
- 複数ブログで共通CSS運用可能
という大きなメリットがあります。
外部CSSは遅くならないのか？
ここが最大の懸念点でしょう。
「XML内に直接書いたほうが速いのでは？」
結論から言いますと通常、体感差はほぼ感じません。
理由①：Webの標準構造は外部CSS
ほとんどのWebサイトは、
<link rel="stylesheet" href="style.css">
という形式で外部読み込みしています。
これはWebの基本構造です。
理由②：CDNを使えばむしろ高速
jsDelivr を利用すると、
- 世界中の分散サーバー
- 最寄り拠点から配信
- 強力なキャッシュ
そのため、BloggerのXML内記述よりも安定する場合もあります。
理由③：ブラウザキャッシュが効く
外部CSSは一度読み込まれるとキャッシュされます。2回目以降の表示はほぼ即時です。
実際に速度へ影響するのは？
ページ速度に強く影響するのは：
- 画像サイズ
- Webフォント
- JavaScriptの量
- DOMの複雑さ
CSS外部化の影響は全体の中では小さい要素です。
むしろ、
- 不要CSSを削減しやすい
- 構造整理が進む
という意味で、長期的には高速化につながる可能性の方が高いです。
GitHubアカウントを作成する
- https://github.co.jp/ にアクセス
- 「Sign up」
- ユーザー名・メール・パスワード入力
- メール認証
ユーザー名はURLに含まれるため慎重に決めましょう。
リポジトリを作成する
右上の「＋」→「New repository」
ユーザー名.github.io
Publicを選択して作成。
CSSファイルを設置
「Add file」→「Create new file」
スタイルシートの中身を作成
保存（Commit）します。
公開URLの取得方法
GitHubの PagesSettings → Pages → mainブランチ指定 → Save
数分後、以下形式で公開されます。
https://ユーザー名.github.io/style.css
Bloggerで読み込む方法
Blogger管理画面 → テーマ → HTMLを編集
<head> 内に追加します。
<link rel="stylesheet" href="あなたのCSSファイルURL">
保存して確認。
まとめ
BloggerはXML一元管理という特性上、構造が肥大化しやすいCMSです。
GitHubでCSSを外部化することで、
- 可読性向上
- 保守性向上
- 安全なバージョン管理
- スマートな運用
が可能になります。一度構築すれば、その後のカスタマイズが劇的に楽になります。
参考リンク
lisz-works｜意外と簡単！はてなブログのCSS外部化をGitHub Pagesでしてみた！
hatebcustom｜GitHub PagesでブログにCSS・JSファイルを外部共有化する方法【初心者向け】
参考データ
| 指標 | XML | 外部CSS |
|---|---|---|
| FCP | 1.1 秒 | 1.1 秒 |
| LCP | 1.5 秒 | 2.0 秒 |
| TBT | 240 ms | 260 ms |
| CLS | 0.125 | 0.234 |
| Speed Index | 2.1 秒 | 2.2 秒 |
コメントを投稿