HugoでCSSを編集し、見出しのデザインを変える
@ Tanao · Wednesday, Apr 8, 2020 · 1 minute read · Update at Apr 8, 2020

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

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

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

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

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

結果

BeforeとAfterです。

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

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

Before

After

やったこと

head.htmlの編集

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

具体的には、以下のコードを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ファイルを修正

これで一見落着…。

After

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

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

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

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

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

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

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

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

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

DevToolsのウィンドウ

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

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

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.tomlparamsに追記した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パラメータの中身を増やし、カスタマイズの幅を広げてみたいです。

Tanao's blog
好きなものをゆるくつづる

gadget heroku hugo ifttt it netlify python raspberrypi rss service slack vim アウトドア ハンドメイド 写真 家具家電 日常 生活術 育児

© 2020 Blog by Tanao

Powered by Hugo with theme Dream.

プライバシーポリシー

Google Analytics

当ブログではアクセス解析ツールとしてGoogle Analyticsを使用しています。 Google AnalyticsではCookieを使用したデータ収集をしています。 情報の扱いやCookieの消去方法について、詳しくはこちらをご覧ください。

免責事項

当ブログにはなるべく正しい情報を掲載するように努めていますが、 意図せず古い情報や誤情報を掲載する可能性もあります。 当ブログに掲載した情報やリンク先によって生じた損失、損害等について 一切の責任を負いかねますので、ご了承ください。

About me

  • tanao
    • アラサー会社員(育休中)
    • 情報処理系のお仕事
    • 夫と娘(0歳)の3人暮らし

本ブログでは気の向くままに好きなことをつづります。

  • 技術・ガジェット
  • 育児
  • 生活術
  • アウトドア
  • 写真
  • ハンドメイド・工作
  • etc.

以下のブログランキングサイトに登録しています。

ブログランキング・にほんブログ村へ

Social Links