【Hugoカスタマイズ】記事下にX(Twitter)やFacebookの「SNSシェアボタン」を自作して設置する方法
+++ 「時間をかけて執筆した力作の記事、一人でも多くの人に読んでもらいたい！」 サイト運営者であれば誰しもがそう願うはずです。記事を拡散（バズ）させるためには …
Design
【Hugoカスタマイズ】ページごとにデザインを変える！動的Bodyクラスの活用技術
+++ 「トップページ（Home）だけは背景色を黒にしたい」 「特定のカテゴリー（newsなど）の記事だけ、フォントやレイアウトを特別に変えたい」 「ある1つの …
【Hugo設定】複数デバイス(PC/スマホ/PWA)向けファビコン(Favicon)の最適な設定方法
+++ Webサイトのシンボルマークとも言える「ファビコン (Favicon)」。 設定しておくことで、PCブラウザの枠内のタブやブックマーク一覧はもちろん、ユ …
【Hugo Pipes】長大な画像の自動リサイズ・WebP軽量化(Image Processing)
「スマートフォンで撮影した高解像度の写真をそのまま記事に載せたら、ページの表示速度が極端に遅くなってしまった…」 「記事一覧に並ぶサムネイル画像のアスペクト比（ …
【Hugoカスタマイズ】タグ・カテゴリーの一覧ページ(terms.html)をタグクラウド風にデザインする方法
+++ ブログ記事に「タグ」や「カテゴリー」を付けて分類していくと、「サイト内の全タグとそれぞれの件数が知りたい！」「どの分類にどれくらい記事があるのか全体像を …
【Hugo開発】Hugo Pipesを使ったSCSS(Sass)の導入とCSS自動コンパイル・軽量化
ここまで、サイトデザインの調整は static/css/style.css という生のCSSファイルを直接編集することによって行ってきました。 しかし、実際の …
【Hugo機能】CSS変数とJSでサイトをダークモードに対応させる実装方法
+++ 「夜に見ると画面の白い背景が眩しすぎる！」 そんな読者のストレスを軽減するために、今どきのWebサイトやアプリには ダークモード (Dark Mode) …
【Hugoレイアウト】トップページと記事ページでヘッダーデザイン(h1タグ)を切り替える条件分岐
自作テーマでレイアウトを組んでいると、「トップページ（Home）ではサイトの看板として名前をドーンと大きく表示したい！」けれど、「個別の記事ページでは主役である …
【Hugoカスタマイズ】Google FontsやMermaidなど外部ライブラリ・CSS/JSのスマートな読み込み方
「サイトの文字フォントをオシャレなWebフォントに変更したい！」 「リッチなスクロールアニメーションや図解描画のためのJavaScriptライブラリを導入したい …
【Hugoテーマ開発】Markdown記事を綺麗に見せるための必須CSSスタイリング集
Hugoでゼロからテーマを自作し始めたものの、「画像を挿入したら大きすぎてスマホ画面からはみ出した！」「表（テーブル）の枠線がなくて情報が読みづらい！」といった …