HugoでCSSを編集し、見出しのデザインを変える

本ブログで使用しているHugoのテーマをカスタマイズします。

サイトの見た目（デザイン）を変えるのは、 CSSを編集することで可能というのを最近知りました。

「CSS？何それ？」状態の私でしたが、本ブログの味気ない見出し（Heading）をポップに変えたいと思い、 CSSの編集方法について調べてみました。

元々、本ブログの作成にはHugoを使用しています。

【参考（外部サイト）】静的サイトジェネレータ「Hugo」と技術文書公開向けテーマ「Docsy」でOSSサイトを作る

今回、Hugoを使用して作成したサイトのデザインを変えるためにCSSを編集する方法を試してみました。

結果

BeforeとAfterです。

Beforeの見出しは、シンプルに黒の大文字、下線のみです。

Afterでは、下線をなくし、緑色の飾りでポップにしてみました。

Before

After

やったこと

head.htmlの編集

以下の外部サイトを参考にしました。

【参考（外部サイト）】Hugo でカスタム CSS を適用して画像の配置をイジる

具体的には、以下のコードをlayouts/partials/head.htmlの中に追記しました。

{{ range .Site.Params.customCSS }}
<link rel="stylesheet" href="{{ . | absURL}}">
{{ end }}

config.tomlの編集

その上で、config.tomlに、以下のparamsを追記しました。

[params]
    customCSS = ["/css/custom_heading.css"]

上記の例だと、static/css/custom_heading.cssというファイルの中に、好みのCSSを記述することになります。

CSSファイルの編集

今回、見出しのレイアウトを編集したかったので、以下のコードをcustom_heading.css の中に記述してみました。

h2 {
  padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
  color: #494949;/*文字色*/
  background: #f4f4f4;/*背景色*/
  border-left: solid 5px #7db4e6;/*左線*/
  border-bottom: solid 3px #d7d7d7;/*下線*/
}

上記CSSですが、以下の外部サイトの例をコピペさせていただきました。

【外部サイト】CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

上記サイト、おしゃれな例がたくさん載っていて、ありがたいです。

既存のCSSファイルを修正

これで一見落着…。

と思ったのですが、CSSのデザインによっては、デザインがくずれてしまうことに気づきました。

h2 {
  color: #364e96;/*文字色*/
  border: solid 3px #364e96;/*線色*/
  padding: 0.5em;/*文字周りの余白*/
  border-radius: 0.5em;/*角丸*/
}

例えば上記の例を試すと、以下のような見た目になります。

CSSの記述的には、見出しを青線で囲んで欲しいのですが、初期のスタイル（下線）と競合してしまっているような見た目になりました。

そこで、私が使用しているHugoテーマのソースコードの中から、見出しのスタイルを決める記述がされているファイルを探し、それを修正することにしました。

該当ファイルを探すにあたり、プレビューを見るために使っているGoogle Crome（ブラウザ）の機能を使います。

ブラウザを開いた状態でF12キーを押すと、ディベロッパーツールが起動します。

ショートカットキーを使わないなら、ブラウザの設定画面から、「その他のツール」→「ディベロッパーツール」で開けます。

DevToolsというウィンドウが開くので、そのウィンドウ内左上の矢印アイコンをクリック→ブラウザで該当するCSSを調べたい場所をクリックします。

見出しのデザインが崩れている原因は、github-markdown.cssの中にありそうなことが分かりました。

border-bottomのスタイルを無効にすることで、意図したデザインが表示されるようです。

テーマのディレクトリに、static/css/github-markdown.cssがあったので、それをリポジトリのルート配下のstatic/css/の下にコピーし、 border-bottomを無効化するため、以下のように上書きします。

.markdown-body h1,
.markdown-body h2 {
  /*border-bottom: 1px solid #eaecef;*/
  padding-bottom: .3em;
}

ひとまずコメントアウトで対処しました。

そして、config.tomlのparamsに追記したcustomCSSをさらに編集しました。

customCSSのリスト内に、static/css/github-markdown.cssを追記します。

  customCSS = ["/css/custom_heading.css", "/css/github-markdown.css"]

これで、デザインが崩れる不具合が解消しました。

まとめ

今回、ブログの見出しデザインを変えるために、CSSを編集してみました。

本ブログはHugoを用いて作成しているので、Hugo特有の編集の仕方になったかと思います。

CSSを編集した感想ですが、思っていたより簡単で驚きました。

元々、Hugoは色々なテーマが公開されているため、好みのテーマを選ぶことで、 HTMLやCSSの知識がなくとも簡単に好きなデザインのWebサイトを構築できるのが大きなメリットだと思っていました。

一方で、さらに好みのデザインにアレンジするためにテーマのCSSを編集するのも、手軽で面白く感じました。

今回は見出しの中でもh2（2番目の大きさ）のみ編集してみましたが、今後はcustomCSSパラメータの中身を増やし、カスタマイズの幅を広げてみたいです。