ふりがな切り替えWordPressプラグイン：ボタン装飾CSSガイド

OPEN

1. ボタン装飾CSSガイド(ぼたんそうしょくしーえすえすがいど)
1.1. ⓪ 共通ベース(きょうつうべーす)（必須(ひっす)）
1.2. ① テキストバッジ(てきすとばっじ)（⓪＋①）
1.3. ② アイコンバッジ(あいこんばっじ)（⓪＋②）

ボタン装飾CSSガイド(ぼたんそうしょくしーえすえすがいど)

ふりがな切きり替かえボタンぼたんの見みた目めを整ととのえるためのCSSしーえすえすガイドがいどです。まずは共通きょうつうベースべーす（⓪）で土台どだいを作つくり、用途ようとに応おうじてテキストてきすとバッジばっじ（①）またはアイコンあいこんバッジばっじ（②）を追加ついかします。基本きほんはシンプルしんぷるに、必要ひつようなら高解像度こうかいぞうど対応たいおう（image-set）などの拡張かくちょうも段階的だんかいてきに採用さいようできる構成こうせいにしています。

⓪ 共通ベース(きょうつうべーす)（必須(ひっす)）

ボタンぼたんの土台どだいとなるスタイルすたいる一式いっしきです。基本設定きほんせってい（背景はいけい・枠線わくせん・影かげ・フォーカスふぉーかす色いろ）だけで基本きほんの見みた目めを整ととのえ、必要ひつように応おうじて拡張設定かくちょうせってい（色いろ・角丸かどまる・影かげ・寸法すんぽうなど）で微調整びちょうせいできます。gap で子要素こようその間隔かんかくを統一とういつし、:focus-visible と prefers-reduced-motion でアクセシビリティあくせしびりてぃにも配慮はいりょ。ON/OFF時じの本体ほんたい色いろに加くわえて、バッジばっじ（::before）の地色じいろもここで共通きょうつう管理かんりするため、①（テキストてきすと）・②（アイコンあいこん）はそれぞれ「文字もじ/画像がぞうの切きり替かえ」に専念せんねんできます。ダークモードだーくもーど用の色いろも同梱どうこんし、テーマてーまに合あわせて変数へんすうを上書うわがきするだけで全体ぜんたいの雰囲気ふんいきを揃そろえられます。

/* Furigana Toggle — 0) Base */

:root{
  /* 基本設定（最小セット）─ この4つを変えるだけで見た目を調整できます */
  --ft-bg-color:     var(--ft-btn-bg, #f7f9fc);          /* ボタン背景色（OFF時の地色） */
  --ft-border-color: var(--ft-btn-border, #c9d7eb);      /* ボタン枠線色（OFF時） */
  --ft-focus-color:  var(--ft-focus-ring, #1a73e8);      /* フォーカスリングの色 */
  --ft-shadow:       var(--ft-shadow-compat, 0 2px 8px rgba(0,0,0,.08)); /* 通常の影 */

  /* 拡張設定（必要に応じて細かく調整） */
  --ft-btn-bg:#f7f9fc;            /* OFF時の背景色（最小APIの元にもなる） */
  --ft-btn-fg:#0b2a4a;            /* OFF時の文字色 */
  --ft-btn-border:#c9d7eb;        /* OFF時の枠線色 */
  --ft-btn-radius:100px;          /* 角丸。100pxでピル型に */

  --ft-btn-bg-hover:#eef3fb;      /* hover時の背景色 */
  --ft-btn-border-hover:#b8c9e6;  /* hover時の枠線色 */

  --ft-btn-bg-on:#2563eb;         /* ON時の背景色 */
  --ft-btn-fg-on:#ffffff;         /* ON時の文字色 */
  --ft-btn-border-on:#1e40af;     /* ON時の枠線色 */

  --ft-focus-ring:#1a73e8;        /* フォーカスリング色（最小APIの元にもなる） */
  --ft-shadow-compat:0 2px 8px rgba(0,0,0,.08); /* 影（最小APIの元） */
  --ft-shadow-hover:0 4px 14px rgba(0,0,0,.12); /* hover時の影 */

  /* 寸法などの基準値 */
  --ft-gap:.35em;                 /* 子要素間のすきま */
  --ft-pad-inline:14px;           /* 左右の内側余白 */
  --ft-pad-block:10px;            /* 上下の内側余白 */
  --ft-font-size:14px;            /* 文字サイズ */
  --ft-font-weight:600;           /* 文字の太さ */
  --ft-min-hit:44px;              /* 最小ヒット領域（目安） */

  /* 区切り記号の見え方（ラベル後のコロン風） */
  --ft-sep-width:.6em;            /* 区切りの箱の幅（全角一文字程度） */
  --ft-sep-margin:.1em;           /* 区切りの前後余白 */

  /* ▼共通：バッジ（::before）の地色を統一管理（①/② 共用） */
  --ft-badge-bg-off:   var(--ft-btn-fg, #0b2a4a); /* OFF時のバッジ地色（既定は濃色） */
  --ft-badge-bg-on:    #ffffff;                   /* ON時のバッジ地色 */
  --ft-badge-bg-ghost: var(--ft-btn-fg, #0b2a4a); /* ゴースト時のバッジ地色（視認性確保） */
  --ft-badge-fg-ghost: #ffffff;                   /* ゴースト時のバッジ文字色（①のみ効く／②には無害） */
}

/* ふりがなOFF時に rt を非表示（rtタグを隠す） */
.furigana-off rt{ display:none !important; }

/* 本体ボタン */
.furigana-toggle{
  display:inline-flex;              /* 横並びレイアウト */
  align-items:center;               /* 縦中央揃え */
  gap:var(--ft-gap);                /* 子要素間のすきま（①/②でもmarginは使わない方針） */
  padding-inline:var(--ft-pad-inline); /* 左右の内側余白 */
  padding-block:var(--ft-pad-block);   /* 上下の内側余白 */
  min-width:var(--ft-min-hit);      /* 最小幅（ヒット領域確保） */
  min-height:var(--ft-min-hit);     /* 最小高さ（ヒット領域確保） */
  font-size:var(--ft-font-size);    /* 文字サイズ適用 */
  font-weight:var(--ft-font-weight);/* 文字の太さ適用 */
  line-height:1;                    /* 行の高さを詰める */
  color:var(--ft-btn-fg);           /* 文字色（OFF基準） */
  background-color:var(--ft-bg-color); /* 背景色（最小API） */
  border:1px solid var(--ft-border-color); /* 枠線（最小API） */
  border-radius:var(--ft-btn-radius); /* 角丸 */
  box-shadow:var(--ft-shadow);      /* 影（最小API） */
  position:relative;                /* 擬似要素の基準にする */
  cursor:pointer;                   /* クリックカーソル */
  user-select:none;                 /* テキスト選択を防ぐ */
  -webkit-tap-highlight-color:transparent; /* モバイルのタップハイライト抑制 */
  transition:
    background .18s cubic-bezier(.2,.6,.2,1),
    color .18s cubic-bezier(.2,.6,.2,1),
    border-color .18s cubic-bezier(.2,.6,.2,1),
    box-shadow .18s cubic-bezier(.2,.6,.2,1),
    transform .18s cubic-bezier(.2,.6,.2,1);
}

.furigana-toggle:hover{
  background-color:var(--ft-btn-bg-hover); /* hover時の背景 */
  border-color:var(--ft-btn-border-hover); /* hover時の枠線 */
  box-shadow:var(--ft-shadow-hover);       /* hover時の影 */
}

.furigana-toggle:active{ transform: translateY(1px); } /* クリック感の沈み */

.furigana-toggle:focus{ outline:none; }                 /* 既定アウトライン無効 */
/* キーボード操作: Tab でボタンにリングが出ます */
.furigana-toggle:focus-visible{
  outline:2px solid var(--ft-focus-color); /* フォーカスリング色 */
  outline-offset:2px;                      /* 外側にずらす量 */
}

/* ON状態の本体色 */
.furigana-toggle[aria-pressed="true"]{
  background-color:var(--ft-btn-bg-on);
  color:var(--ft-btn-fg-on);
  border-color:var(--ft-btn-border-on);
}

/* ▼共通：バッジ（::before）の地色制御を一括（①/②に適用） */
.furigana-toggle::before{
  background-color: var(--ft-badge-bg-off); /* OFF時のバッジ地色 */
}
.furigana-toggle[aria-pressed="true"]::before{
  background-color: var(--ft-badge-bg-on);  /* ON時のバッジ地色 */
}
.furigana-toggle.is-ghost::before{
  background-color: var(--ft-badge-bg-ghost); /* ゴーストでも視認性を維持 */
  color: var(--ft-badge-fg-ghost);            /* テキストバッジ（①）のみ有効／②には無害 */
}

/* ラベル／状態テキスト */
.furigana-toggle .ft-label,
.furigana-toggle .ft-state{ margin:0; font-weight:inherit; }
.furigana-toggle .ft-state{ margin-inline-start:0; }

.furigana-toggle .ft-label::after{
  content:"：";                           /* 区切り記号（全角コロン風） */
  display:inline-block;                   /* 幅を持たせるためのブロック化 */
  width:var(--ft-sep-width);              /* 区切りの箱幅 */
  text-align:center;                      /* 記号を中央に配置 */
  margin-inline:var(--ft-sep-margin);     /* 区切りの前後余白 */
}

/* サイズバリエーション */
.furigana-toggle.is-sm{
  --ft-font-size:13px;
  --ft-pad-inline:12px;
  --ft-pad-block:8px;
}
.furigana-toggle.is-lg{
  --ft-font-size:16px;
  --ft-pad-inline:18px;
  --ft-pad-block:12px;
}

/* ダークモード */
@media (prefers-color-scheme: dark){
  :root{
    --ft-bg-color:     var(--ft-btn-bg, #172234);
    --ft-border-color: var(--ft-btn-border, #2a3a53);
    --ft-btn-fg:#e9f1ff;
    --ft-btn-bg-hover:#20314a;
    --ft-btn-border-hover:#35507a;
    --ft-btn-bg-on:#3b76ff;
    --ft-btn-fg-on:#ffffff;
    --ft-btn-border-on:#2f5fe0;
    --ft-shadow:0 2px 8px rgba(0,0,0,.40);
    --ft-shadow-hover:0 4px 16px rgba(0,0,0,.50);

    /* バッジ地色（ダーク時の推奨デフォルト。必要に応じて上書き） */
    --ft-badge-bg-off:   var(--ft-btn-fg, #e9f1ff);
    --ft-badge-bg-on:    #0b1730;  /* 白だと浮く場合の代替。白に戻しても可 */
    --ft-badge-bg-ghost: var(--ft-btn-fg, #e9f1ff);
    --ft-badge-fg-ghost: #0b1730;
  }
}

/* 動きを抑える設定に追従 */
@media (prefers-reduced-motion: reduce){
  .furigana-toggle{ transition:none; }
}

/* 印刷でボタンを隠したい場合（必要なら有効化）
@media print{ .furigana-toggle{ display:none !important; } }
*/

① テキストバッジ(てきすとばっじ)（⓪＋①）

テキストてきすと（例れい：「あ」「文ぶん」）を ::before の content で表示ひょうじする丸まるバッジばっじです。ONおん/OFFおふでバッジばっじ内の文字もじと文字色もじいろだけを切きり替かえ、バッジばっじの地色じいろやフォーカスふぉーかす、間隔かんかく（gap）は⓪共通きょうつうベースべーすで管理かんりします。サイズさいずは --ft-icon-size と --ft-badge-delta の2変数へんすうで調整ちょうせいでき、ボタンぼたんの文字サイズもじさいずに追従ついじゅうします。まずはデフォルトでふぉるとのまま使つかい、必要ひつように応おうじて表示ひょうじ文字もじ（--ft-badge-text-off / --ft-badge-text-on）や文字色もじいろだけを差さし替かえればOKです。※①と②は併用へいようしません。

/* Furigana Toggle — 1) Text Badge（テキストで丸バッジを表示）
   注意：①（Text Badge）と②（Icon Badge）は併用しないでください。
   方針：ON/OFF のバッジ地色は ⓪ 共通ベースで制御。
         ①は「バッジの文字と文字色」の切替に専念します。 */

/* ①テキスト用の設定（表示文字） */
:root{
  --ft-badge-text-off: "文";  /* OFF時に表示する文字 */
  --ft-badge-text-on:  "あ";  /* ON時に表示する文字 */

  /* バッジ直径のベース（em指定＝ボタン文字サイズに追従） */
  --ft-icon-size: 1.1em;   /* 直径の基準 */
  --ft-badge-delta: .35em; /* 少し大きく見せたい場合の上乗せ分 */
}

/* 丸バッジ本体（::before） */
.furigana-toggle::before{
  content: var(--ft-badge-text-off);       /* バッジ内の文字（OFF時） */
  font-weight: 700;                         /* 視認性UPのため太字 */
  width:  calc(var(--ft-icon-size) + var(--ft-badge-delta));  /* 真円の幅 */
  height: calc(var(--ft-icon-size) + var(--ft-badge-delta));  /* 真円の高さ */
  min-width: 1.6em;                         /* つぶれ防止の下限（任意） */
  min-height: 1.6em;
  display: inline-flex;
  align-items: center;
  justify-content: center;                  /* 中央揃え */
  border-radius: 999px;                     /* 丸バッジ（真円） */
  /* 間隔は ⓪ の gap で一元管理（ここでは margin を使わない） */
  line-height: 1;
  vertical-align: middle;                   /* 行内のズレを抑える */
  color: #ffffff;                           /* OFF時のバッジ文字色（地色は⓪が担当） */

  /* （任意）フォントサイズを固定したい場合は有効化
     font-size: 0.9em;
  */
}

/* ON時のテキストと色切替（地色は⓪が担当） */
.furigana-toggle[aria-pressed="true"]::before{
  content: var(--ft-badge-text-on);
  color: var(--ft-btn-bg-on, #2563eb);      /* ON時のバッジ文字色（ブランド色など） */
}

② アイコンバッジ(あいこんばっじ)（⓪＋②）

::before にアイコンあいこん画像がぞうを重かさねて丸まるバッジばっじとして表示ひょうじします。バッジばっじの地色じいろ・フォーカスふぉーかす・間隔かんかく（gap）は⓪共通きょうつうベースべーすで管理かんりし、②ではアイコンあいこん画像がぞうの指定していと切きり替かのみを行おこないます。通常つうじょうは 40×40px の画像がぞう1枚いちまい を指定していすれば十じゅう分ぶんです（小容量しょうようりょうの WebPうぇっぴー / PNGぴんぐを推奨すいしょう）。細こまかな見みた目めは background-size（目安めやす 40〜70%）で調整ちょうせいできます。高解像度こうかいぞうど表示ひょうじをより厳密げんみつにしたい場合ばあいは、image-set を使つかって 1x=20×20px / 2x=40×40px を併記へいきしてください。※①と②は併用へいようしません。

/* Furigana Toggle — 2) Icon Badge（アイコンで丸バッジを表示）
   注意：①（Text Badge）と②（Icon Badge）は併用しないでください。
   方針：ON/OFF のバッジ地色・フォーカス・ゴースト対応は ⓪ 共通ベースで制御。
         ②は「アイコン画像の指定と切替」に専念します。 */

/* ②アイコン用の設定（サイズ・画像） */
:root{
  --ft-icon-d: 1.4em;  /* バッジ直径（ボタン文字サイズとのバランスで調整） */

  /* ▼最小構成：40×40px の画像1枚（まずはこれでOK） */
  /* 以下URLは適宜置換（PNG / WebP 推奨） */
  --ft-icon-url-off: url('https://example.com/path/icon-off-40.webp');
  --ft-icon-url-on:  url('https://example.com/path/icon-on-40.webp');

  /* ▼高解像度対応（任意）：image-set で 1x/2x を併記
  --ft-icon-url-off: image-set(
      url('https://example.com/path/icon-off-20.webp') 1x,
      url('https://example.com/path/icon-off-40.webp') 2x
  );
  --ft-icon-url-on: image-set(
      url('https://example.com/path/icon-on-20.webp') 1x,
      url('https://example.com/path/icon-on-40.webp') 2x
  );
  */
}

/* 丸バッジ本体（::before でアイコンを重ねる）
   ※ 間隔は ⓪ の gap で一元管理（ここでは margin を使わない） */
.furigana-toggle::before{
  content: "";
  width:  var(--ft-icon-d);
  height: var(--ft-icon-d);
  display: inline-block;
  border-radius: 999px;                     /* 丸バッジ（真円） */
  background-image: var(--ft-icon-url-off); /* OFF時のアイコン */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60% auto;                /* アイコン比率（40〜70%で調整） */
  vertical-align: middle;
  line-height: 1;
}

/* ON時はアイコン画像のみを切替（地色は ⓪ が担当） */
.furigana-toggle[aria-pressed="true"]::before{
  background-image: var(--ft-icon-url-on);
}