Blowfish Custom

Hugo プロジェクトの構造と基本原則

カスタマイズを始める前に、Hugoのファイル構造とテーマ変更のベストプラクティスを理解しましょう。

重要: テーマファイルを直接編集してはいけません！カスタマイズは常にプロジェクトのルートディレクトリ内で行い、テーマディレクトリ (themes/blowfish/) は変更しないようにしてください。

Hugoのファイル優先順位 (Lookup Order)

Hugoは、プロジェクト内のファイルがテーマ内の同名ファイルより優先される仕組みを持っています。これにより、テーマ自体を更新してもカスタム変更が保持されます。

プロジェクトのディレクトリ

layouts/_default/single.html
assets/css/custom.css
static/fonts/font.ttf

(ここに配置したファイル)

🥇

テーマのディレクトリ

themes/blowfish/layouts/_default/single.html
themes/blowfish/assets/css/main.css

(テーマ標準のファイル)

例えば、プロジェクトのルートに layouts/_default/single.html を作成すると、テーマ内の themes/blowfish/layouts/_default/single.html が上書き（オーバーライド）されます。これはレイアウト、パーシャル、ショートコード、アセットなど、全てのファイルタイプで有効です。

画像最適化設定の変更

Hugoの組み込み機能を利用して、画像のサイズ変更や最適化の設定を調整できます。

テーマ内のテンプレート（例: layouts/partials/article-link/card.html）では、Hugoの画像処理メソッド（.Resize, .Fill, .Fitなど）が使われています。

{{-- Example from card.html --}}
{{ with .Resize "600x" }}
  <div class="..." style="background-image:url({{ .RelPermalink }});"></div>
{{ end }}

この例では、幅600pxにリサイズしています。画像処理のデフォルト設定（アンカーポイントなど）は、サイト設定ファイル (hugo.toml) でも指定できます。

詳細はHugoの画像処理ドキュメントを参照してください。

カラースキームのカスタマイズ

Blowfishは複数の組み込みカラースキームを提供しており、簡単に切り替えたり、独自のスキームを作成したりできます。

組み込みスキームの使用

サイト設定ファイル (hugo.toml または config/_default/params.toml) で colorScheme パラメータを設定します。利用可能なスキームははじめにセクションで確認できます。

独自スキームの作成

プロジェクトの assets/css/schemes/ ディレクトリに <your-scheme-name>.css ファイルを作成します。
ファイル内で、neutral, primary, secondary の各色（10段階の色合い）をCSS変数として定義します。注意: 値はRGBの数値形式 (139, 92, 246) で指定する必要があります。
サイト設定で colorScheme = "<your-scheme-name>" を指定します。

/* Example in assets/css/schemes/my-scheme.css */
:root {
  --color-primary-50: 237, 233, 254;
  --color-primary-100: 221, 214, 254;
  --color-primary-200: 196, 181, 253;
  --color-primary-300: 167, 139, 250;
  --color-primary-400: 139, 92, 246; /* Main primary color */
  --color-primary-500: 124, 58, 237;
  --color-primary-600: 109, 40, 217;
  --color-primary-700: 91, 33, 182;
  --color-primary-800: 76, 29, 149;
  --color-primary-900: 67, 20, 124;
  /* ... define neutral and secondary colors similarly ... */
}

カラースキーム作成支援ツールとして Fugu (nodejs) が利用できます。

スタイルシートのオーバーライド (custom.css)

テーマのデフォルトスタイルを部分的に変更したり、独自のスタイルを追加するには、custom.css ファイルを使用します。

プロジェクトの assets/css/ ディレクトリに custom.css ファイルを作成するだけです。このファイルは自動的に読み込まれ、テーマのCSSよりも優先されます。

追加フォントの使用

カスタムフォントを使用する手順:

フォントファイル (例: myfont.ttf) をプロジェクトの static/fonts/ ディレクトリに配置します。
assets/css/custom.css ファイルを作成（または編集）し、@font-face ルールでフォントを定義し、適用したい要素に font-family を設定します。

. ├── assets │ └── css │ └── custom.css <-- ここに記述 ... └── static └── fonts └── myfont.ttf <-- フォントファイルを配置

/* In assets/css/custom.css */
@font-face {
  font-family: 'My Custom Font';
  src: url('/fonts/myfont.ttf');
}

html {
  /* Apply to the entire site */
  font-family: 'My Custom Font', sans-serif; /* Fallback font */
}

.my-specific-element {
  /* Apply only to specific elements */
   font-family: 'My Custom Font', sans-serif;
}

フォントサイズの調整

サイト全体の基本フォントサイズを変更するには、custom.css で html 要素の font-size を上書きします。Blowfishはスケーリングされたフォントサイズを使用するため、この一箇所を変更するだけでサイト全体の文字サイズが調整されます。（デフォルトは約 12pt）

/* In assets/css/custom.css */
html {
  /* デフォルトより少し大きくする場合 */
  font-size: 13pt;

  /* または、相対単位を使用する場合 */
  /* font-size: 110%; */
}

ソースからテーマ CSS をビルドする (Tailwind)

Tailwind CSSの設定変更や大幅なスタイル変更を行いたい上級者向けの方法です。テーマで使用されているCSSを再構築します。

注意: この方法は高度なカスタマイズであり、特定のプロジェクト構造と `npm` の知識が必要です。

Tailwind 設定 (`tailwind.config.js`)

TailwindのJITコンパイラは、themes/blowfish/tailwind.config.js ファイルの content 設定に基づいて、HTMLやMarkdownファイルで使用されているTailwindクラスをスキャンし、必要なCSSのみを生成します。

// themes/blowfish/tailwind.config.js
module.exports = {
  content: [
    "./layouts/**/*.html", // Project layouts
    "./content/**/*.{html,md}", // Project content
    "./themes/blowfish/layouts/**/*.html", // Theme layouts
    "./themes/blowfish/content/**/*.{html,md}", // Theme content
  ],
  // ... other settings
};

このデフォルト設定を利用するには、**Blowfishテーマがプロジェクト内の themes/blowfish/ に配置されている必要があります** (Git Submoduleまたは手動インストール推奨)。

推奨プロジェクト構造

Tailwind CSSを再ビルドする場合、以下のような構造が推奨されます。

. (Your Project Root) ├── assets │ └── css │ └── compiled │ └── main.css <-- 生成されるCSSファイル ├── config ├── content ├── layouts (Your custom layouts) └── themes └── blowfish <-- Theme (Git Submodule or Manual) └── package.json (Optional build scripts)

ビルド手順

以下のステップでCSSを再ビルドします。

1

依存関係インストール

テーマディレクトリに移動し、npmで必要なパッケージをインストールします。

cd themes/blowfish
npm install

2

Tailwind コンパイラ実行

プロジェクトルートに戻り、Tailwind CLIを実行してCSSを生成します。

cd ../..

./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit

(-w を付けるとウォッチモードで実行)

3

ビルドスクリプト作成 (任意)

プロジェクトルートに package.json を作成し、スクリプトを定義すると便利です。

// package.json (scripts part)
{
  "scripts": {
    "dev": "tailwindcss ... -o .../main.css --jit -w",
    "build": "tailwindcss ... -o .../main.css --jit"
  }
}

実行: npm run dev / npm run build

生成された assets/css/compiled/main.css は、Hugoのファイル優先順位により、テーマ標準のCSSを自動的にオーバーライドします。

ヘルプとサポート

さらに疑問点や不明な点があれば、コミュニティに質問してみましょう。

詳細な質問や議論は、Blowfish GitHub Discussions 🔗 で行うことができます。

Blowfishテーマ 高度なカスタマイズガイド