CSSの反映が簡単に出来た件

以前Hugoでブログはじめました～！って時に色の付け方がわからないとか言ってましたが、思ったより簡単に出来たので方法をまとめておきます。
以前の記事で触れてたフォントの変更方法もわかったけど、そもそも使いたいフォントを探していないので今回はスルーします。（）

自作CSSを適用するために必要なもの

  1. 自作CSS
    以上。

今回は以下な感じでどシンプルなCSSを書いてみました。

/*
Basic CSS for Text related things.

Color info
https://www.wanichan.com/web/resources/color.html
*/
span.b { font-weight: bold; }

span.red { color: orangered; }
span.gray { color: darkgray; }

span.large { font-size: 1.5em; }
span.small { font-size: 0.75em; }

span.ul { border-bottom: solid 3px;}
span.ul-red { border-bottom: solid 3px orangered;}
span.ul-gray { border-bottom: solid 3px darkgray;}
span.dul { border-bottom: dotted 3px;}
span.slash { text-decoration: line-through; }

自作CSSを適用する方法

  1. プロジェクト直下のstaticフォルダ配下にCSSファイルを配置する。
    • 画像ファイル等を置いているstaticフォルダを同じ場所です。
  2. themes以下でCSSを取り込んでいるhtmlファイルを検索する。
    • <link rel="stylesheet" href="で検索し、他のCSSを取り込んでいる場所を探しました。
    • そこに自作したCSSを取り込むコードを以下のように記述するだけで、一瞬で反映されます。

CSSを取り込むコードのサンプル

<!--CUSTOM STYLES-->
<link rel="stylesheet" href="/css/nc-text.css" />
<!--CUSTOM STYLES END-->

※さも今後複数のCSSを追加するかのようなコメントつけてますが、正直そこまでCSSを実装/調整することはないかなと思います…。

まとめ

ウェブ側のお約束だったりサーバー側の知識が皆無なので、CSSとか使った調整はあまり考えていなかったのですが、あまりにも簡単に調整できてびっくりです。

今後余裕があればちょこちょこカスタマイズしていきたいなーと思っています。

まだ触って一週間程度だけど、Hugoさん思ってた以上に便利でびっくり。