Hugoなら簡単!CSSファイルの内容をHTML内に埋め込む方法!

  Hugo   ,




こんにちは! ブログのAMP対応に頭を悩ませているAkiです!

今回は、AMP対応の副産物として外部CSSファイルをHTMLファイルの<style>タグ内に埋め込む方法がわかったのでまとめてみました。

(AMP化は急ぎではない(と思いたい)ので、少しずつ調べていきたいと思います。)

外部ファイルとして読み込む方法

比較用として、まずは一般的な外部CSSファイルの記述方法を見てみます。

このブログではSCSSを採用しているので、記述方法は以下のとおりです。

記述内容

{{ $style := resources.Get "scss/style.scss" | toCSS | minify }}
<link href="{{ $style.Permalink }}" rel="stylesheet">

出力結果

<link href="http://example.com/scss/style.min.css" rel="stylesheet">

SCSSファイルがCSSファイルへと変換されて出力されています。

SCSSについてはこちらをどうぞ↓

簡単!便利!HugoでSass/Scssを使う方法! | わからないから調べるブログ

HugoでSass/Scssを使う方法をまとめてみました。便利でしかも簡単と来たら使わない手はないですね

Styleタグ内に埋め込む方法

SCSSファイルの内容をStyleタグ内に埋め込みます。

記述内容

{{ $style := resources.Get "scss/style.scss" | toCSS | minify }}
<style type="text/css">{{ $style.Content | safeCSS }}</style>

出力結果

CSSの内容をHTML内に埋め込んだ結果のソースです。ソーズ全文を載せてしまうと無駄に長くなるので画像にして貼り付けています。

長いので画像にしています。

.Contentを使ってファイルの中身をそのまま出力しています。

これだけでHTML内への埋め込みができてしまいました!

複数のCSSファイルを埋め込む方法

使用しているCSSファイルが複数個ある場合です。

記述内容

{{ $common := resources.Get "scss/common.scss" | toCSS }}
{{ $style := resources.Get "scss/style.scss" | toCSS }}
{{ $bundle := slice $common $style | resources.Concat "bundle.css" | minify }}
<style type="text/css">{{ $bundle.Content | safeCSS }}</style>

それぞれのファイルを読み込んだ後、resources.Concatでまとめてから出力しています。

出力結果

単一ファイルのときと同じなので省略……。

CSSファイルを分割していても、実装はとても簡単ですね!

あとがき

途中試行錯誤しましたが、思ったよりも簡単にできました。

内部スタイルシートはメンテがしづらいなんてことも聞きますが、この方法ならCSSファイル自体は別ファイルなのでメンテもしやすいのではないでしょうか?

CSSはHTML内に直接書いたほうがサイトの表示速度も上がるので、簡単にできるなら結構いいかもなぁと思ったりしてます。 (外部ファイルでもキャッシュさせれば速いと言う話は置いといて……)

というわけで、CSSファイルの内容をHTML内に埋め込む方法でした!では!

参考にさせていただいたサイト様


関連ページ