Minima テーマカスタマイズ

このページでは、非情報系研究者でも実施可能な範囲でのMinima テーマカスタマイズ方法を説明します。

⚠️ 注意事項
このページの内容は応用的な内容です。基本的な運用には必要ありませんが、見た目を調整したい場合に参考にしてください。変更前には必ずバックアップを取ることをお勧めします。

前提条件

カスタマイズを行う前に、既に assets/css/custom.css ファイルが存在し、基本的なスタイルが設定されていることを確認してください。このマニュアルサイトでは、既に見やすさを重視したスタイルが適用されています。

簡単にできるカスタマイズ

1. サイトの色合いを変更する

既存の custom.css ファイルの色コードを変更することで、サイト全体の印象を変えることができます。

主要な色の変更箇所

/* 見出しの色（青系） */
h1 { border-bottom: 3px solid #3182ce; }  /* #3182ce を別の色に */
h2 { border-left: 5px solid #3182ce; }    /* #3182ce を別の色に */

/* テーブルヘッダーの色 */
th { background-color: #2d3748; }          /* #2d3748 を別の色に */

推奨カラーパレット

グリーン系: #38a169（環境・自然系の講座におすすめ）
レッド系: #e53e3e（医学・緊急系の講座におすすめ）
パープル系: #805ad5（学術的な印象を強めたい場合）

2. フォントサイズの調整

読みやすさを向上させるために、フォントサイズを調整できます：

/* 本文のフォントサイズ */
.post-content, .page-content {
  font-size: 1.1em; /* 1.05em から 1.1em に変更で少し大きく */
}

/* 見出しのサイズ調整 */
h1 { font-size: 2.4em; } /* 2.2em から少し大きく */

3. ロゴ画像の追加

講座や機関のロゴを表示したい場合：

ロゴ画像の準備
- assets/images/ フォルダにロゴファイル（例：logo.png）をアップロード
- 推奨サイズ：横300px × 縦100px以下

ページ上部への表示

トップページ（index.md）の先頭に以下を追加：

<div style="text-align: center; margin: 20px 0;">
<img src="assets/images/logo.png" alt="講座ロゴ" style="max-width: 300px;">
</div>

控えめなレイアウト調整

ページ幅の調整

内容が多い場合、ページ幅を少し広げることができます：

/* custom.css に追加 */
.wrapper {
  max-width: 900px; /* デフォルトより少し広く */
}

行間の調整

読みやすさを向上させるための行間調整：

/* 本文の行間をさらに広く */
.post-content, .page-content {
  line-height: 1.8; /* 1.7 から 1.8 に */
}

やってはいけないこと

⚠️ 避けるべき変更
以下の変更は、サイトの安定性や互換性に影響する可能性があるため、避けることをお勧めします：

複雑なJavaScriptの追加
レイアウトファイル（_layouts フォルダ）の変更
プラグインの追加や変更
Sass/SCSS ファイルの直接編集

変更時の確認手順

変更前のバックアップ
- ファイルの変更前に、現在の内容をコピーして保存
段階的な変更
- 一度に多くを変更せず、一つずつ確認
表示確認
- 変更後、5-10分待ってサイトの表示を確認
- PC・スマートフォン両方で確認
元に戻す方法
- 問題がある場合は、GitHub の履歴から前のバージョンに戻す

カスタマイズの例

学術会議向けのスタイル

/* 落ち着いた学術的な色合い */
h1 { color: #2c3e50; border-bottom: 3px solid #34495e; }
h2 { border-left: 5px solid #34495e; }
th { background-color: #34495e; }

活動的な印象のスタイル

/* 明るく活動的な色合い */
h1 { color: #e67e22; border-bottom: 3px solid #f39c12; }
h2 { border-left: 5px solid #f39c12; }
th { background-color: #e67e22; }

重要: これらのカスタマイズは、ローカルでの編集環境を構築できてから検討することをお勧めします。まずは更新作業のローカル編集の手順を参考に環境構築を行ってください。