Hugoのブログタイトル部分の高さ調整したい(CSS)

Web開発
Page content

1.目的

本ブログの下記の高さを短くしたいです。できれば画像を小さくしたいです。

img

2.環境

  • Hugo
  • Mainroad
  • Google Chromeブラウザ

3.手順

a)対象となるCSSを探す

まずは画像に設定されているスタイルのクラス名を探します。

  1. 開発者ツールを起動

    Chromeの開発者ツールを起動します。F12キーで右側に表示されます。

    img

    この右側の部分で、Webページ内のJavaScriptやCSSの情報を確認することができます。

  2. 対象となるCSSクラス名

    開発者ツールの「<body class=“body”>」で始まる階層を開いていきます。<なんとか class=>と書いてある階層を順番に掘り下げつつクリックしていくと、

    <img class="logo__img" src="/img/placeholder.png">

    を選択した際に画像の部分がハイライトされました。logo__imgというcssのクラスが適用されていることがわかりました。このクラスの値をごにょごにょすれば、なんとかなりそうな気がしてきました。

    img

b)CSSを生成しているファイルを探す

Hugoのテーマ(Mainroad)の中でcssを定義しているファイルを探します。

  1. style.cssを探す

    Hugoのサイトディレクトリの中からCSSを定義しているstyle.cssを探します。

    % find ./ -name style.css
.//public/css/style.css
.//themes/mainroad/assets/css/style.css

    publicディレクトリの方はビルドされたhtmlファイル用のstyle.cssなので、今回修正するべきはthemes/mainroad/assets/css/style.cssの方になります。

  2. logo__imgを確認する

    このstyle.cssにlogo__imgが定義されているか、念のため確認します。

     % grep "logo__img" .//themes/mainroad/assets/css/style.css
.logo__img {
.logo--mixed .logo__img {

    定義されていますね、それでは設定値の調整をします。

c)CSSをカスタマイズする

  1. 該当するクラスをcustom.cssに移植する

    テーマに用意されたstyle.cssは直接編集せず、custom.cssを使ってクラスを上書きします。style.cssから該当するクラスの行をコピーし、custom.cssに追記します。今回は128pxから64pxにしました。

    % mkdir static/css
% vi static/css/custom.css
.logo__img {
max-height: 128px;
}

.logo--mixed .logo__img {
  max-width: 64px;
  max-height: 64px;
}

  2. hugo.tomlの確認

    hugo.tomlでcustom.cssが呼び出されていることを確認します。[Paranms]の設定でcustomCSSに"css/custom.css"が指定されていればOKです。

    [Params]
  customCSS = ["css/notosansjp.css", "css/custom.css"]

  3. 動作確認

    テストサーバを起動するなり、デプロイするなりして目視確認してみます。

    確かに画像が小さくなっていることを確認しました。この要領でいろんなスタイルをカスタムすることができそうです。

    img

4.補足

cssの上書き方法は、style.cssの内容を全部移植して、必要な分だけ修正という形でもよかったのですが、今回は可読性を重視して特定のクラスのみcustom.cssに移植する形にしました。