# Sphinxデザインのカスタム

## 概要

sphinxデザインの手動調整の方法を記載。

sphinxデザインは、基本的に公式から提供されているテーマで事足りるとは思うが、  
本document独自のカスタムとして、見出しカラーを見出しサイズごとに変えている。  
（いちからCSS覚えるのもだるかったのでChatGPTに任せたりもした。生成AI便利だねぇ。）

## カスタム内容

### 追加・修正するファイル

- （追加）source/_static/custom.css
- （修正）source/conf.py
  - 以下を追記（上記のCSSファイルを適用するための設定）

  ```
    html_css_files = ['custom.css']
  ```

- custom.cssの中身

```
/* static/custom.css */

/* 全ての見出し (h1 ～ h6) に共通の設定 */

/* h1 見出し */
section h1 {
    background-color: rgb(103, 174, 219); /* 控えめな水色系 */
    padding: 3px 10px; /* 上下のパディングを小さく、左右は少し広め */
    border-radius: 5px;
    color: #003366; /* 文字色（濃い青系） */
}

/* h2 見出し */
section h2 {
    background: linear-gradient(to right, rgba(103, 219, 111, 0.6), rgba(103, 219, 111, 0.6) 80%, transparent 100%);
    padding: 3px 10px;
    border-radius: 5px;
    color: #003366;
}

/* h3 見出し */
section h3 {
    background: linear-gradient(to right, rgba(195, 218, 102, 0.4), rgba(195, 218, 102, 0.4) 60%, transparent 100%);
    padding: 3px 10px;
    border-radius: 5px;
    color: #003366;
}

/* h4 見出し */
section h4 {
    background: linear-gradient(to right, rgba(195, 218, 102, 0.3), rgba(195, 218, 102, 0.3) 50%, transparent 100%);
    padding: 3px 10px;
    border-radius: 5px;
    color: #003366;
}

/* h5 見出し */
section h5 {
    background: linear-gradient(to right, rgba(195, 218, 102, 0.2), rgba(195, 218, 102, 0.2) 40%, transparent 100%);
    padding: 3px 10px;
    border-radius: 5px;
    color: #003366;
}

/* h6 見出し */
section h6 {
    background: linear-gradient(to right, rgba(195, 218, 102, 0.1), rgba(195, 218, 102, 0.1) 30%, transparent 100%);
    padding: 3px 10px;
    border-radius: 5px;
    color: #003366;
}

```