第5章：テーマ・デザイン設定
サイトの見た目をカスタマイズします。
管理画面の「デザイン設定」を開いてください。
5-1. テーマの選択
最初に、サイト全体のデザインテーマを選択します。
組み込みテーマ
5つの組み込みテーマから選択できます：
| テーマ名 | 特徴 |
|---|---|
| シンプル | 白基調・ミニマル・読みやすい |
| ビジネス | フォーマル・信頼感・青系 |
| かわいい | パステル・丸み・やさしい |
| クール | ダーク系・シャープ・モダン |
| ポップ | カラフル・元気・楽しい |
テーマを選ぶと、背景色・見出し・フォント・ボタン・角丸などが一括で変更されます。
カスタムテーマ（別売り）
組み込みテーマに加え、ZIPファイルでアップロードして使えるカスタムテーマが用意されています。カスタムテーマは独自のstyle.cssを持ち、より個性的なデザインを実現できます。
| テーマ名 | 特徴 |
|---|---|
| Sober | 角丸なし・シャドウなし・游ゴシック体 |
| Vent | ダークボディ・カードヘッダーグラデーション・メインカラー連動 |
| Paraffin | 固定背景画像＋半透明カードのナチュラルデザイン（専用設定モジュールあり） |
| Candy | 可愛い角丸デザイン |
| Gradient AURORA | グラデーションデザイン（オーロラ） ※販売予定 |
| Gradient VORTEX | グラデーションデザイン（ヴォルテックス・補色） ※販売予定 |
| Gradient ECLIPSE | グラデーションデザイン（エクリプス・類似色） ※販売予定 |
| Luxury | 高級感のあるラグジュアリーなデザイン ※販売予定 |
注意
カスタムテーマは独自のstyle.cssでデザインを制御しているため、見出しスタイル設定（H2/H3/H4）の変更が視覚的に反映されない場合があります。メインカラーの変更は各テーマに応じて反映されます。
5-2. カラー設定
テーマの色を上書きしたい場合は、カスタム色設定で変更できます。
メインカラー
サイト全体のメインカラーを設定します。この色がボタンやリンク、見出しなどに使用されます。
ヒント
メインカラーを変更すると、見出しの色やグラデーションの色も自動的に調整されます。
5-3. 見出しスタイル設定
H2（大見出し）、H3（中見出し）、H4（小見出し）のスタイルを個別に設定できます。
各見出しの設定項目
| 項目 | 説明 |
|---|---|
| スタイル | 見出しのデザイン（下記の選択肢から選択） |
| 背景/ボーダー色 | 見出しの装飾に使用される色 |
| 文字色 | 見出しの文字の色 |
H2（大見出し）のスタイル
| スタイル名 | 説明 |
|---|---|
| 左ボーダー | 左側に太いボーダーが付きます（デフォルト） |
| 下線 | 見出しの下に線が引かれます |
| 背景色 | 見出し全体に背景色が付きます |
| リボン風 | リボンのような背景色が付く装飾デザインです |
| シンプル | 装飾なしのプレーンな見出しです |
H3（中見出し）のスタイル
| スタイル名 | 説明 |
|---|---|
| シンプル | 装飾なしのプレーンな見出し（デフォルト） |
| 左ボーダー | 左側にボーダーが付きます |
| ドット付き | 見出しの先頭にドットが付きます |
| 薄い背景 | 薄い背景色が付きます |
H4（小見出し）のスタイル
| スタイル名 | 説明 |
|---|---|
| シンプル | 装飾なしのプレーンな見出し（デフォルト） |
| 左ボーダー | 左側にボーダーが付きます |
| 下線 | 見出しの下に線が引かれます |
右側のプレビューで実際の見え方を確認しながら調整できます。
ヒント
「背景色」や「リボン風」スタイルを選択した場合、文字色は背景色の明るさに応じて自動的に白または黒に調整されます。手動で文字色を変更することも可能です。
5-4. ヘッダーナビゲーション色設定
メニューレイアウトが「縦並び」または「ボタンデザイン」の場合に、PC表示時のナビゲーション背景色・文字色をカスタマイズできます。
適用条件
この設定はメニューレイアウトが「縦並び」または「ボタンデザイン」の場合のPC表示時のみ適用されます。横並びレイアウト・スマホ表示には影響しません。メニューレイアウ
トは「設定」→「一般」タブで変更できます。
背景タイプ
| タイプ | 説明 |
|---|---|
| 標準 | メインカラーの薄いグラデーション（デフォルト） |
| カスタム色（単色） | 指定した背景色で単色表示します |
| カスタム色（グラデーション） | 指定した背景色からやや濃い色へのグラデーションで表示します |
「カスタム色」を選択すると、背景色と文字色をカラーピッカーで指定できます。
5-5. ヘッダー設定
ヘッダーロゴ画像
ロゴ画像を設定すると、サイト名の代わりにロゴが表示されます。
- 「ロゴ画像を選択」ボタンをクリック
- 画像一覧から使用するロゴを選択（または新規アップロード）
- ロゴの高さを選択：
- 小（30px）
- 中（40px）- 推奨
- 大（50px）
ロゴ画像について
ロゴ画像のalt属性には、サイト名が自動的に設定されます。
ヘッダーを追従させる
ONにすると、スクロールしてもヘッダーが画面上部に固定表示されます。
5-6. トップページのメインビジュアル設定
メイン画像エリアの表示
ONにすると、トップページにメイン画像エリアが表示されます。OFFにすると、エリア全体が非表示になります。
メイン画像の選択
- 「画像を選択」ボタンをクリック
- 画像一覧から使用する画像を選択（または新規アップロード）
- 推奨サイズ：1920×600px（横長の画像）
グラデーション設定
メイン画像エリアの背景にグラデーションを設定できます：
- 開始色：グラデーションの左側の色
- 終了色：グラデーションの右側の色（中間はメインカラー）
サイト名・説明の表示設定
メイン画像エリアにサイト名と説明を表示するか選択できます：
- サイト名を表示：ON/OFF切り替え、文字色の設定
- サイト説明を表示：ON/OFF切り替え、文字色の設定
画像表示設定（画像を選択した場合のみ）
| 項目 | 説明 |
|---|---|
| 表示モード | コンテナ内（通常）/ フルスクリーン（画面全体） |
| 表示サイズ | 幅いっぱいに広げる / 元のサイズ（縮小のみ）/ 元のサイズ |
| 高さの扱い | 自動（元の比率維持）/ 固定高さ（トリミング） |
| 高さ（固定時のみ） | 100〜800pxで指定 |
| 画像の位置 | 中央 / 上 / 下 |
5-7. ファビコンの設定
ファビコン（サイトアイコン）の設定ができます。ファビコンは、ブラウザのタブやブックマークに表示される小さなアイコンです。
ファビコンとは
ファビコンは、サイトを識別するためのアイコンで、以下の場所に表示されます：
- ブラウザのタブ
- ブックマーク一覧
- スマートフォンのホーム画面（保存時）
- 検索結果（一部のブラウザ）
ファビコンのアップロード
- デザイン設定ページの「ファビコン設定」カードを開く
- 「ファビコンをアップロード」（または「新しいファビコンをアップロード」）をクリック
- PNG形式の画像を選択
- 推奨：512×512以上のPNG画像
- 最大サイズ：1MB
- 「アップロード」ボタンをクリック
自動生成される画像サイズ
アップロードした画像から、以下の4サイズが自動生成されます：
| サイズ | 用途 |
|---|---|
| 16×16 | ブラウザのタブ（標準） |
| 32×32 | ブラウザのタブ（高解像度） |
| 180×180 | iOSデバイスのホーム画面 |
| 192×192 | Androidデバイスのホーム画面 |
プレビュー機能
ファビコンをアップロードすると、設定カード内にプレビューが表示され、各サイズの見え方を確認できます。
ファビコンの削除
ファビコンを削除したい場合：
- 「削除」ボタンをクリック
- 確認ダイアログで「OK」をクリック
- 4サイズすべてが削除されます
ヒント
- シンプルなデザインのアイコンが推奨です（小さいサイズでも認識しやすい）
- 背景を透過させると、どのブラウザでもきれいに表示されます
- ロゴの一部やサイトのイニシャルなどが効果的です
5-8. カスタムテーマのアップロード
オリジナルのテーマをZIP形式でアップロードできます。
アップロード方法
- テーマ選択カード下部の「テーマをアップロード」ボタンをクリック
- ZIPファイルを選択
- 「アップロード」ボタンをクリック
カスタムテーマの管理
カスタムテーマをアップロードすると、以下の機能が利用できます：
| 機能 | 説明 |
|---|---|
| テーマ一覧に追加 | テーマ選択カードに自動的に追加され、クリックで選択可能 |
| カスタムテーマ管理 | アップロード済みのテーマを管理できる専用カードが表示される |
| テーマ情報表示 | テーマ名、バージョン、作者が表示される |
| 削除機能 | 不要なテーマを削除できる（使用中のテーマは削除不可） |
カスタムテーマ管理テーブル
カスタムテーマをアップロードすると、「カスタムテーマ管理」カードが表示されます：
- テーマ名：テーマのカラーサンプルと名前
- バージョン：テーマのバージョン番号
- 作者：テーマ作者名
- 操作：削除ボタン（または「使用中」バッジ）
注意
- 使用中のテーマは削除できません（別のテーマに切り替えてから削除してください）
- 組み込みテーマ（シンプル・ビジネス・かわいい・クール・ポップ）は上書き・削除できません
- テーマを削除すると、復元できません
- 削除前に、必要に応じてバックアップを取ってください
5-9. 設定の保存とプレビュー
設定を変更したら、「設定を保存」ボタンをクリックしてください。
右側の「テーマプレビュー」で、設定を変更するとリアルタイムで見え方が確認できます。
「実際のサイトを表示」ボタンをクリックすると、実際のサイトを新しいタブで開いて確認できます。
デザイン設定が完了したら、第6章：記事生成の準備 に進みましょう！