kamosika's site
Posts Diary About Me Tags Categories
kamosika's site

Hugoで使っているブログの見た目(背景色)を変えたい！(使用テーマLoveIt)

 
       
/posts/2025/02/hugo%E3%81%A7%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E3%83%96%E3%83%AD%E3%82%B0%E3%81%AE%E8%A6%8B%E3%81%9F%E7%9B%AE%E8%83%8C%E6%99%AF%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%81%9F%E3%81%84%E4%BD%BF%E7%94%A8%E3%83%86%E3%83%BC%E3%83%9Eloveit/Pasted_image_20250228211110.png

最近ブログ熱がちょっと出てきていて、見た目を変えたくなったので色々やってみた！

使用しているテーマのドキュメントを確認する

https://hugoloveit.com/theme-documentation-basics/

LoveIt theme has been built to be as configurable as possible by defining custom .scss style files.

The directory including the custom .scss style files is assets/css relative to your project root directory.

In assets/css/_override.scss, you can override the variables in themes/LoveIt/assets/css/_variables.scss to customize the style.

LoveItは色々カスタマイズできるように作られていて、

assets/css/_override.scssというものを作って、そこに色々書いていけば良いらしい！

ファイルを作って、とりあえずサンプルに書かれていた通りにやってみる。

/posts/2025/02/hugo%E3%81%A7%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E3%83%96%E3%83%AD%E3%82%B0%E3%81%AE%E8%A6%8B%E3%81%9F%E7%9B%AE%E8%83%8C%E6%99%AF%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%81%9F%E3%81%84%E4%BD%BF%E7%94%A8%E3%83%86%E3%83%BC%E3%83%9Eloveit/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2025-02-24_13.01.51.png

すると、ちゃんとフォントが変わっているっぽい！問題なくカスタマイズできそうね！

↓追加前

/posts/2025/02/hugo%E3%81%A7%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E3%83%96%E3%83%AD%E3%82%B0%E3%81%AE%E8%A6%8B%E3%81%9F%E7%9B%AE%E8%83%8C%E6%99%AF%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%81%9F%E3%81%84%E4%BD%BF%E7%94%A8%E3%83%86%E3%83%BC%E3%83%9Eloveit/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2025-02-24_13.02.22.png

↓追加後

/posts/2025/02/hugo%E3%81%A7%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E3%83%96%E3%83%AD%E3%82%B0%E3%81%AE%E8%A6%8B%E3%81%9F%E7%9B%AE%E8%83%8C%E6%99%AF%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%81%9F%E3%81%84%E4%BD%BF%E7%94%A8%E3%83%86%E3%83%BC%E3%83%9Eloveit/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2025-02-24_13.02.46.png

「g」の書かれ方とかが変わっているのがわかりやすい。

デザインを変えていきたい

これが今の見た目

/posts/2025/02/hugo%E3%81%A7%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E3%83%96%E3%83%AD%E3%82%B0%E3%81%AE%E8%A6%8B%E3%81%9F%E7%9B%AE%E8%83%8C%E6%99%AF%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%81%9F%E3%81%84%E4%BD%BF%E7%94%A8%E3%83%86%E3%83%BC%E3%83%9Eloveit/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2025-02-24_15.00.39.png

/posts/2025/02/hugo%E3%81%A7%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E3%83%96%E3%83%AD%E3%82%B0%E3%81%AE%E8%A6%8B%E3%81%9F%E7%9B%AE%E8%83%8C%E6%99%AF%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%81%9F%E3%81%84%E4%BD%BF%E7%94%A8%E3%83%86%E3%83%BC%E3%83%9Eloveit/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2025-02-24_13.03.57.png

考え

ドメイン名が、自分が好きな原神の甘雨というキャラと関連があるワードを含んだもの「forrexlapis.win」なので、どこかしら甘雨ぽい色合いを入れたものにしたいなぁという考えがある！！

↓甘雨

/posts/2025/02/hugo%E3%81%A7%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E3%83%96%E3%83%AD%E3%82%B0%E3%81%AE%E8%A6%8B%E3%81%9F%E7%9B%AE%E8%83%8C%E6%99%AF%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%81%9F%E3%81%84%E4%BD%BF%E7%94%A8%E3%83%86%E3%83%BC%E3%83%9Eloveit/20250202020629.png

青、白、赤・・・だよね・・・？多分、あとは金っぽい色。そうじゃん！！別コスチュームもあるからそっちの色がダークカラーっぽくていいかも！

やっていこう！

LoveIt/assets/css/_variables.scssで使われている定義を上書きすることができるらしく、それで背景色を変えられそう！

なぜ背景色は上書きしてくれない？？

あれ・・・全然上書きしてくれない・・・なんだこれは・・・

$code-font-family:は上書きできるけど他が上書きできない・・・なんだこれ？

ぶっちゃけここでトラブルなんて思ってなかったぞ・・・

サンプルコードだと上書きできるんだけど、背景色は上書きができない…と、数時間悩んでいて…

多分解決？？(!defaultって何！？！？)

よくよくみてみると、サンプルコードの方には!defaultっていうのがついていなくて、自分の方についていることに気づいた;;(なぜもっと早く気づかなかった…)

!defaultを消したら反映されるようになった。

/posts/2025/02/hugo%E3%81%A7%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E3%83%96%E3%83%AD%E3%82%B0%E3%81%AE%E8%A6%8B%E3%81%9F%E7%9B%AE%E8%83%8C%E6%99%AF%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%81%9F%E3%81%84%E4%BD%BF%E7%94%A8%E3%83%86%E3%83%BC%E3%83%9Eloveit/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2025-02-24_14.26.32.png

こいつなんなんだ？？

!defaultっていうのは、変数の値が定義されていなかった時に使われる値？を指定できるらしい。「上書きするんならして！！・・・しないなら「!default」の値を使うが・・・」みたいな感じでしょうか？

もう少し見てみる

https://chaika.hatenablog.com/entry/2019/10/25/083000

!default フラグしかない場合は最初に登場した値がセットされる

完全にこれでした・・・ありがとうございます・・・

上書きしたい時は!defaultはつけない！！！覚えた！！

ちょっとだけ色を変えてみたよ！

(多分キャッシュの問題で反映までに時間がかかる・・・？)

/posts/2025/02/hugo%E3%81%A7%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E3%83%96%E3%83%AD%E3%82%B0%E3%81%AE%E8%A6%8B%E3%81%9F%E7%9B%AE%E8%83%8C%E6%99%AF%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%81%9F%E3%81%84%E4%BD%BF%E7%94%A8%E3%83%86%E3%83%BC%E3%83%9Eloveit/Pasted_image_20250228211110.png

/posts/2025/02/hugo%E3%81%A7%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E3%83%96%E3%83%AD%E3%82%B0%E3%81%AE%E8%A6%8B%E3%81%9F%E7%9B%AE%E8%83%8C%E6%99%AF%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%81%9F%E3%81%84%E4%BD%BF%E7%94%A8%E3%83%86%E3%83%BC%E3%83%9Eloveit/Pasted_image_20250228211131.png

やったー！！

ただ単に背景色とかをちょこっと変えただけですが、かなり雰囲気が変わりますね！！

より、「自分のブログ感」を感じられて、あと、甘雨っぽい色にできて満足🩵

 Hugo
 |