https://www.awesome-360.com/tags/%E8%A6%8B%E5%87%BA%E3%81%97/ Recent content in 見出し on Awesome360 Hugo -- gohugo.io ja-jp Sat, 17 Jul 2021 00:00:00 +0000 https://www.awesome-360.com/post/2021/07/how_to_edit_css_for_heading/ Sat, 17 Jul 2021 00:00:00 +0000 https://www.awesome-360.com/post/2021/07/how_to_edit_css_for_heading/ 今回は「私のブログ見出しがものすごく見辛いな」と思っていたので、CSS等カスタマイズしたので、その方法を紹介します。 目次 CSSを新規作成 HTMLの編集 TOMLファイルの修正 CSSの編集 参考サイト 1. CSSを新規作成 まずはカスタムCSSファイルを作成します。 今回は見出しの編集をしたかったので、static>css>の直下にcustom_heading.cssを作成しました。 配置場所は以下のようなイメージです。 ご自身のブログ-|-aechetypes |-content |-data |-layouts |-public |-static-|-css-|-custom_heading.css 2. HTMLの編集 次にHTMLファイルを編集します。 今回は、single.htmlを編集していきます。 まずテーマの中にあるsingle.htmlをlayoutsにコピーします。 私は_defaultとpostの直下にあるsingle.htmlを編集したかったので、以下のような配置になりました。 ご自身のブログ-|-aechetypes |-content |-data |-layouts-|-_default-|-single.html |-post-|-single.html |-public |-static どちらのsingle.htmlもdiv要素のidがcontentがあったので、以下のように追加しました。 <div id="content"> {{ range .Site.Params.customCSS }} <link rel="stylesheet" href="{{ . | absURL}}"> {{ end }} </div> ここまでできたら、一旦tomlファイルを編集していきます。 3. TOMLファイルの編集 config.tomlを編集します。 [params]にcustomCSSを配置して、先ほど作成したCSSファイルを有効にします。 大体のテーマではcustomCSSは元々あると思います。 customCSSに"/css/custom_heading.css"を追加します。 私の場合は以下のようになりました。 [params] customCSS= ["default", "/css/custom_heading.css"] 4. CSSの編集 有効になったところで、新規に作成したcustom_heading.cssを編集していきます。 今回は初心者に優しいサイトである サルワカさん が提供してくれているコードを使用します。 とっても便利なので是非使って下さい。 ＜参考サイト＞ ・CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選( https://saruwakakun.