# ThemeBlogger — ブログ特化「柔らかフラット」テーマ

白ベース＋パステル1色（既定: ミントグリーン）＋濃グレー文字の、ブログ体験に全振りした完全オリジナルテーマです。
管理画面 [テーマ] から「Blogger（ブログ特化・柔らかフラット）」を選ぶと適用されます。

## アクセントカラーの変更

`webroot/css/theme.css` 冒頭の CSS 変数を書き換えるだけで全体の色が変わります。

```css
:root{
  --tb-accent:#4fc4b0;        /* 面・チップ・線に使うパステル色 */
  --tb-accent-strong:#128d7a; /* 文字・ボタン用の濃い色（白地でコントラストAAを保つ濃さに） */
  --tb-accent-pale:#e7f6f3;   /* 淡い背景 */
  --tb-accent-line:#c9ebe4;   /* 淡い枠線 */
}
```

例）ピンクにしたい: `#f2a1b8 / #c2325f / #fdeef3 / #f7d2dd` のように「本体色／濃い色／淡背景／淡枠線」の4つをセットで。

## 自動機能

- **目次**: 記事詳細で本文の h2 / h3 を自動スキャンし、カード型の目次を先頭見出しの前に生成（見出し2つ以上のとき）。スムーススクロール・現在地ハイライト付き。Vanilla JS・依存なし。
- **シェア**: 記事下に X / LINE / はてなブックマーク / URLコピー（外部SDK不使用・share URLのみ）。
- **サイドバー**: 右サイドバーにブロックを置いていない場合、プロフィールカードと新着記事リストを自動表示（ブロックを置くと置き換わる）。

## 記事内で使える装飾クラス（SunEditorのHTML編集で記述）

### 吹き出し（左右）

```html
<div class="tb-say">
  <span class="tb-say-icon">😊<span class="tb-say-name">はなこ</span></span>
  <div class="tb-say-body">左側の吹き出しです。アイコンは絵文字でも <img> でもOK。</div>
</div>

<div class="tb-say tb-say-r">
  <span class="tb-say-icon"><img src="/files/xxxx.jpg" alt=""></span>
  <div class="tb-say-body">右側の吹き出しは tb-say-r を足すだけ。</div>
</div>
```

### 注意 / ポイント / メモ ボックス

```html
<div class="tb-box-warn">注意してほしい内容。</div>
<div class="tb-box-point">おすすめ・ポイントの内容。</div>
<div class="tb-box-memo">補足メモの内容。</div>
```

### マーカー線（蛍光ペン風）

```html
ここが<span class="tb-marker">大事なところ</span>です。
黄色は<span class="tb-marker-y">tb-marker-y</span>。
```

### ボタン

```html
<a class="tb-btn" href="/contact">お問い合わせはこちら</a>
<a class="tb-btn tb-btn-ghost" href="/blog">記事一覧へ</a>
<a class="tb-btn tb-btn-wide" href="/lp">横幅いっぱいのボタン</a>
```

## ページ別レイアウト

管理画面 [テーマ > ページ別レイアウト] の設定（コンテナ幅 / 左右サイドバー / デバイス別表示 / スマホ並び順）に対応しています。デフォルトは「メイン＋右サイドバー」。

## アクセシビリティ / パフォーマンス

- 外部CDN不使用（Google Fonts のみ）。JSはテーマ内の Vanilla 1ファイル。
- タップ領域44px以上・横スクロールなしのモバイル専用設計。
- 文字色はWCAG AAコントラストを満たす配色。`prefers-reduced-motion` 対応。
- 本文へスキップリンク・フォーカスリング・aria属性つき。
