ヘッダーの見た目がフォントの大きさ違うだけでわかりづらいので、h1からh3まで
cssをカスタマイズして見出しの表示を変更した。こちらのリンクを参考にしました。
カスタマイズ箇所
layouts/partials/head.htmlに追加
以下を追記する
1
2
3
4
| <!--- Custom CSS -->
{{ range .Site.Params.customCSS }}
<link rel="stylesheet" href="{{ . | absURL}}">
{{ end }}
|
config,tomlに追加
[parm]に以下を追加する。
1
2
| # Custom CSS
customCSS = ["css/custom_head.css"]
|
static/css/custom_head.cssを新規作成
新規ファイルを作成しcssの内容を記載する。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| h1 {
padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
color: #494949;/*文字色*/
background: #f4f4f4;/*背景色*/
border-left: solid 6px #7db4e6;/*左線*/
border-bottom: solid 3px #d7d7d7;/*下線*/
}
h2 {
padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
color: #494949;/*文字色*/
background: #f4f4f4;/*背景色*/
border-left: solid 5px #7db4e6;/*左線*/
border-bottom: solid 3px #d7d7d7;/*下線*/
}
h3 {
padding: 0.2em 0.3em;/*文字の上下 左右の余白*/
color: #494949;/*文字色*/
background: #f4f4f4;/*背景色*/
border-left: solid 4px #7d00e6;/*左線*/
border-bottom: solid 3px #d7d7d7;/*下線*/
}
|
まとめ
hugoのヘッドラインをcss修正し、表示がわかりやすくなるように改善した。
参考リンク
