プラグイン不要！WordPressで四角いトグルを作る方法【色・枠線・入れ子・パターン対応】

プラグイン不要！WordPressで四角いトグルを作る方法【色・枠線・入れ子・パターン対応】

プラグイン不要！WordPressで四角いトグルを作る方法【色・枠線・入れ子・パターン対応】

WordPressの標準「詳細」ブロックと、ブロック専用CSSを使えば、プラグインを追加せずに開閉式のトグル（アコーディオン）を作れます。

タイトルと本文を普通のブロックとして編集でき、青い四角い枠、背景色、文字色、枠線の太さなども調整できます。

テーマの「追加CSS」には登録しません。デザインのCSSを対象ブロックに保存するため、同じブロックを別の記事や対応するWordPressサイトへ移して使うこともできます。

対象：WordPress 7.0以降のブロックエディター。ブロック専用の「追加CSS」欄を使える権限（edit_css）が必要です。テーマや編集権限により、表示されるデザイン設定は異なることがあります。

1．完成イメージ（クリックで開閉できます）

ここをクリックすると説明が開きます

この部分に文章、引用、画像、表、別のトグルなどを配置できます。

引用ブロックのようなデザインも、本文の中に配置できます。

この見本もWordPressの標準「詳細」ブロックです。公開画面ではタイトルを押して開閉できます。記事編集画面では、タイトルや本文を通常のブロックとして編集できます。

2．最初に「詳細」ブロックを挿入する

WordPressの投稿または固定ページの編集画面を開きます。
「＋」ボタンをクリックして、検索欄に「詳細」と入力します。
「詳細」ブロックを選びます。「カスタムHTML」ブロックではありません。
見出し欄にトグルのタイトルを入力します。本文欄は次の手順で整えます。

3．本文の中に「グループ」ブロックを作る

タイトルと本文の背景色を別々に変更できるように、本文をグループという「箱」に入れます。

「詳細」ブロックを開き、タイトルの下にある本文入力部分をクリックします。
本文内の「＋」から「グループ」を挿入します。表示されたレイアウト候補では、通常の「グループ」を選びます。
グループの中に「段落」を挿入して文章を入力します。引用、画像、表なども追加できます。
左上の「リストビュー」を開き、詳細 → グループ → 段落 の順に入っていることを確認します。

すでに本文がある場合は、リストビューで本文中の対象ブロックだけを複数選択し、「︙」→「グループ化」でもまとめられます。親の「詳細」ブロック自体を選択しないようにしてください。

4．「詳細」ブロックにCSSを一度だけ貼る

左上の「リストビュー」で、親の「詳細」ブロックをクリックします。
右側のブロック設定を開き、「高度な設定」を展開します。
「追加CSS」という入力欄へ、次のCSSをすべて貼り付けます。
「追加CSSクラス」とは別の欄です。HTMLの<style>タグも不要です。

/* =====================================
   カスタマイズ対応トグル
   WordPress 7.0以降・ブロック専用CSS

   外枠・背景・文字色・文字サイズは
   WordPress標準のスタイル設定で変更

   子トグルやパターンには干渉しない
   ===================================== */

/* ★ CSS側で調整する項目 */
--mm-title-vspace: 16px;
--mm-title-hspace: 18px;
--mm-icon-size: 22px;

/* トグル全体 */
box-sizing: border-box;
border-radius: 0;
padding: 0;

/* 外枠はWordPressの設定を使用 */
/* ここではborderを固定しない */

/* タイトル部分 */
& > summary {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  margin: 0;
  padding:
    var(--mm-title-vspace)
    var(--mm-title-hspace);

  /* WordPress側で設定した色を反映 */
  background-color: inherit;
  color: inherit;
  font-size: inherit;

  font-weight: 700;
  cursor: pointer;
  list-style: none;
  border-radius: 0;
}

/* 標準の三角マークを非表示 */
& > summary::marker {
  content: "";
}

& > summary::-webkit-details-marker {
  display: none;
}

& > summary::before {
  display: none;
}

/* 閉じた状態のマーク */
& > summary::after {
  content: "＋";
  font-size: var(--mm-icon-size);
  line-height: 1;
  flex-shrink: 0;
}

/* 開いた状態のマーク */
&[open] > summary::after {
  content: "−";
}

/* タイトルと本文の境界線 */
/* 外枠の下辺と同じ色・太さ・種類を使用 */
&[open] > summary {
  border-bottom: inherit;
}

/* キーボード操作時 */
& > summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -4px;
}

/* =====================================
   本文のデザインはグループで設定

   内部の引用・画像・パターン・子トグル
   の背景色や枠線は変更しない
   ===================================== */

このCSSは、親トグルのタイトル部分だけを装飾するようにしています。本文中のパターンや子トグルの色・余白などは一括変更しません。

5．右側の「スタイル」設定でデザインを変更する

タイトルの色を変える：リストビューから親の「詳細」ブロックを選び、右側の「スタイル」→「色」から背景色・文字色を設定します。タイトルはその色を引き継ぎます。

外枠を変える：同じ「詳細」ブロックの「スタイル」→「枠線」で、色・太さ・線種を設定します。まずは「青 #3977c7／実線／2px」をおすすめします。角はCSS側で0（直角）に固定しています。

本文の色を変える：内側の「グループ」ブロックを選び、背景色・文字色を設定します。例：背景色を白 #ffffff、文字色を #222222 にします。グループの「寸法」または「余白」で内側の余白を上下左右16～18px程度にすると読みやすくなります。

タイトルの上下余白・左右余白・「＋／－」の文字サイズは、CSS冒頭の --mm-title-vspace、--mm-title-hspace、--mm-icon-size の数値で調整します。これらは標準の色選択とは異なり、CSSの編集が必要です。また、タイトルの文字の太さはCSSの font-weight: 700;（太字）で固定しています。変更する場合はCSSを編集します。

重要：タイトルには親「詳細」の色を引き継がせています。親と本文グループを別々に選択するのがポイントです。テーマによって、スタイル項目の名前・表示位置が少し異なる場合があります。

6．保存して、公開ページで動作を確認する

記事を「保存」または「更新」します。
プレビューまたは公開ページを開き、タイトルをクリックして開閉します。
外枠が四角く表示され、タイトルと本文の境目が分かり、背景色・文字色が反映されることを確認します。
一度編集画面を再読み込みし、設定が保持されていることも確認します。

7．引用・パターン・別のトグルを中に入れる

グループの中へ、通常の段落・見出し・引用・画像・表・ボタンなどを追加できます。別の「詳細」ブロックを追加すれば、トグルの入れ子も作れます。

子トグルは子自身の「詳細」ブロックを選択して、必要に応じてCSSや色を設定してください。今回のCSSは親のタイトルだけに適用されるため、子トグルの装飾をまとめて上書きしません。

パターンを使う場合、通常の非同期パターンは挿入後に個別編集できます。同期パターンは元のパターンとの参照を維持します。特定プラグイン専用ブロックなどは元の機能が必要です。また、ブロックの挿入制限が設定されていると追加できない種類があります。

Name属性は空欄に：親子トグルを独立して開閉したい場合、双方の「高度な設定」にある「Name属性」は空欄にします。同じ名前を設定すると、一方を開くともう一方が閉じる「アコーディオン」の動作になる場合があります。

8．毎回使うなら「非同期パターン」に登録する

完成した親の「詳細」ブロック全体をリストビューで選びます。
「︙」メニューから「パターンを作成」を選びます。
分かりやすい名前を付け、「同期」をオフにして作成します。
次の記事では「＋」→「パターン」から登録したトグルを挿入し、タイトルと本文だけ書き換えます。

ブロック全体をコピーして別の記事へ貼り付ける方法も使えます。別サイトへ移す場合は、両サイトが対応するWordPressバージョン・権限であることを確認してください。非同期パターンをJSONとしてエクスポート・インポートする方法もあります。同期パターンを他サイトで利用する場合は参照先の移行も必要です。

9．色を変えられない・表示が変わらないときは

色の丸に斜線が表示される場合、「色が未指定」を示していることがあります。必ずしも操作禁止ではありません。
まずリストビューで選択中のブロックを確認します。タイトルは「詳細」、本文は「グループ」です。
色を選べるのに変わらない場合、内側のブロック独自の色指定、テーマのCSS、保存前後の表示差を確認します。
「追加CSS」欄自体がない場合は、WordPressのバージョンと利用者の権限を確認します。「追加CSSクラス」の欄へCSSを貼っても動きません。
問題が起きても、すぐにCSSを書き換えず、まず標準の「詳細」ブロックでも同じ操作ができるか確認すると原因を切り分けやすくなります。

10．まとめ

WordPress 7.0以降では、標準の「詳細」ブロックとブロック専用CSSを組み合わせることで、プラグインを追加せずに、見やすい四角いトグルを作れます。デザインを整えて非同期パターンに登録しておけば、次からは文章を編集するだけで使い回せます。

なお、CSSやブロック情報を含む移行であっても、移行先のWordPressバージョン・権限・テーマ・使用プラグインによって表示や機能に差が出る場合があります。移行後は実際の公開ページでご確認ください。

参考：WordPress公式ドキュメント

コメント【情報提供などもこちらから！】

コメントをどうぞコメントをキャンセル

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

★情報提供大歓迎です！★ 参考にさせていただいております。

【注意事項】
書き込んでいただいたコメントは、私が認証するまでは書き込んだ本人以外には非表示になります。私が認証すると書き込んだコメントがみんなに表示されます。
(※場合により、認証する場合としない場合がありますのでご了承くださいませ。)

今のところ、お返事はコメントに返信、あるいはメールに直接させていただいています。
携帯キャリアのメールには、携帯キャリア以外からのメール(私からのお返事が)が届かない可能性がありますのでご了承くださいm(_ _)m

＜設定上、メルアド入力が必須になっていますが…＞
メールアドレスを私に知らせたくない場合は、でたらめのアドレスをいれてもコメント出来ます。（○○○○@gmail.com）このように○○にでたらめの文字を入れてもいいのですが、場合によってはスパム扱いになってコメントが無効になることがあります。

（※書き込み後にコメント欄にコメントが表示されていなければ、無効になっているのでもう一度別のアドレスを入力して、コメントしなおしてみてくださいm(_ _)m）

コメント ※

名前 ※

メール ※

サイト

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。