lisz-works

技術と興味の集合体

意外と簡単!はてなブログのCSS外部化をGitHub Pagesでしてみた!

【スポンサーリンク】

lisz-works

はてなブログのCSSの外部化を、GitHub Pagesを使って試してみました!

正直はてなブログのデザイン設定の、小さい編集ウィンドウは編集し辛いですよね……

ローカルでCSSが編集・更新ができるようになるので、楽ちん化を図るために試してみました!

リポジトリを新規作成

まずはGitHubにログインしましょう。

右上の+マークから「New repository」を選択。

リポジトリの追加

リポジトリの作成画面が開かれます。

Repository nameを、[自分のユーザ名].github.ioにする。

リポジトリの名称設定

他は特に設定しなくてもOKです。

「Create repositoryボタン」を押します。

リポジトリにファイルを追加

Create repository後に表示される、リポジトリのURLをコピーします。

リポジトリのURLを取得

このURLからCloneして、ファイルをCommit→Pushしたりします。

ちなみに今回Pushしたのは

  1. index.html
    index.htmlは、「だーみーぺーじ」という文字を表示するだけのHTML。
  2. contents-tester/contents-tester.css
    contents-tester.cssは、はてなブログで適用するCSSファイルです。
    複数何かを置く想定で、適用ページ用のフォルダ分けをしています。

さて、これで必要なファイルを追加することができました。

作ったページにアクセスします。

僕の場合、「https://liszwork.github.io/」。

GitHub Pagesの動作確認

ちゃんと出ましたね。

はてなブログでCSS読込設定

はてなブログの「ダッシュボード」を開きます。

設定→詳細設定と進み……

はてなブログの設定

「headに要素を追加」に、先程GitHubにアップしたCSSを設定します。

ヘッダーにCSS読込を追加

追加する要素はコチラ。

<link type="text/css" rel="stylesheet" href="アップしたCSSのパス">

hrefに入るパスは、ぼくの場合は

https://liszwork.github.io/contents-tester/contents-tester.css

[GitHub PagesのURL]/[CSSのを入れているフォルダ名]/[CSSのファイル名]

です。

1番下にいって「変更するボタン」を押して更新が終われば完了!

変更するボタン押下

操作確認

ブログを確認しましょう!

CSS適用を確認

CSSがちゃんと適用されました。

Page Speed Insightsのスコア

Page Speed Insightsを見る感じ、速度とか点数とかは全然変わらなそう(めっちゃ悪いのはさておき)。

モバイルのスコア

モバイルのスコアを設定前後で比較したところ、大差はありませんでした。

項目 設定前 設定後
スコア 44 48
コンテンツの初回イベント 1.7s 1.7s
速度インデックス 6.8s 5.8s
インタラクティブになるまでの時間 15.9s 15.7s
意味のあるコンテンツの初回イベント 1.9s 1.7s
CPUの初回アイドル 6.4s 6.8s
最大推定FID 490ms 510ms

PCのスコア

モバイルのスコアを設定前後で比較したところ、コチラも大差はありませんでした。

項目 設定前 設定後
スコア 83 84
コンテンツの初回イベント 0.5s 0.5s
速度インデックス 1.3s 1.4s
インタラクティブになるまでの時間 3.6s 3.5s
意味のあるコンテンツの初回イベント 0.5s 0.5s
CPUの初回アイドル 3.3s 3.2s
最大推定FID 280ms 200ms

参考

コチラを参考にしました。ありがとうございました!

techacademy.jp

www.halu7.com

shirokai.hatenablog.com

あとがき

はてなブログのCSS外部化をGitHub Pagesでしてみた!でした!

思ったより簡単でした!

というかGitHub Pagesめっちゃ便利じゃね?と、いまさらながら思いました(笑)