Pages

▼

2026/02/16

GitHubでCSSを外部ファイル化してBloggerで読み込むガイド

 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 秒
on

0 件のコメント:

コメントを投稿