MENU
ラインからもお問い合わせできます！
LINE公式アカウント
WordPress

WordPressカスタムHTMLで作るおしゃれなアコーディオン10選｜HTML＋CSSコード付き

weluca

WordPressのカスタムHTMLブロックを使えば、プラグインなしでもおしゃれなアコーディオンを作れます。

アコーディオンとは、見出しをクリックすると中身が開閉するデザインです。FAQ、料金の補足、注意事項、サービス内容の詳細、よくある質問などをすっきり見せたい時に便利です。

この記事では、WordPressのカスタムHTMLブロックにHTMLとCSSを分けて入力する方法と、そのまま使えるアコーディオンデザイン10パターンを紹介します。

ウェルカ<br data-src=編集長"/>
ウェルカ
編集長

カスタムHTMLで作る場合は、HTMLだけでなくCSSも必要です。HTMLは中身、CSSは見た目を整える役割だと考えると分かりやすいです。

この記事で分かること
  • WordPressでアコーディオンを作る基本
  • カスタムHTMLでHTMLとCSSを分ける考え方
  • CSSを入れる場所とHTMLを入れる場所
  • そのまま使えるアコーディオンデザイン10パターン
  • FAQやサービスページで使う時の注意点
  • デザインが崩れた時の確認ポイント

カスタムHTMLでアコーディオンを作る仕組み

カスタムHTMLでアコーディオンを作る時は、HTMLとCSSを組み合わせます。

HTMLは、質問文や回答文などの中身を作る役割です。CSSは、余白、色、枠線、角丸、影、アイコンなどの見た目を整える役割です。

ウェルカ<br data-src=編集長"/>
ウェルカ
編集長

まずは「HTMLが文章や構造」「CSSがデザイン」と覚えれば大丈夫です。難しく考えず、HTML欄とCSS欄にそれぞれ貼り付けるイメージで進めましょう。

この記事で紹介するコードは、WordPressのカスタムHTMLブロックで使うことを想定しています。同じページ内で複数のデザインを使っても干渉しにくいように、各パターンごとにクラス名を分けています。

1つのデザインをサイト全体で使う場合は、CSSだけを「追加CSS」やテーマ側のCSS欄にまとめる方法もあります。ただし、この記事では初心者でも試しやすいように、カスタムHTMLブロック内で完結する形を中心に紹介します。

カスタムHTMLではHTMLとCSSを分けて入力する

HTML欄にはアコーディオン本体、CSS欄にはデザイン用のコードを入力します。

カスタムHTMLブロックにHTML、CSS、JavaScriptのタブがある場合は、HTMLタブに本文側のコード、CSSタブに見た目を整えるコードを入れます。JavaScriptは、今回のようなdetailsタグを使うシンプルなアコーディオンでは基本的に不要です。

ウェルカ<br data-src=編集長"/>
ウェルカ
編集長

CSSタブに貼るコードには、<style>タグを入れません。CSS欄に<style>まで入れると、WordPress側でstyleタグが二重になり、ブロックエラーの原因になります。

入力する場所の目安
  • HTMLタブ：details、summary、本文などを入れる
  • CSSタブ：色、余白、枠線、影、アイコンなどを入れる
  • CSSタブには<style>タグを入れない
  • JavaScriptタブ：今回の基本パターンでは使わない
  • 同じデザインを何度も使う場合：CSSは追加CSSにまとめてもよい
  • 1ページだけで使う場合：カスタムHTMLブロック内で完結してもよい

パターン1：やわらかいシンプルカード型アコーディオン

最初に使いやすいのは、白背景に淡いグリーンを合わせたシンプルなカード型です。

FAQ、サービス説明、注意事項など、どんなページにもなじみやすいデザインです。角丸と薄い影を入れることで、標準のdetailsタグよりも柔らかい印象になります。

ウェルカ<br data-src=編集長"/>
ウェルカ
編集長

迷ったらこのパターンで大丈夫です。主張しすぎないので、事業サイトやブログ記事のFAQにも使いやすいです。

WordPressでアコーディオンはプラグインなしで作れますか？

はい、作れます。HTMLのdetailsタグとsummaryタグを使えば、カスタムHTMLブロックだけでクリック開閉できるアコーディオンを作成できます。

どんな内容に向いていますか？

FAQ、料金の補足、注意事項、サービスの詳しい説明などに向いています。

HTMLタブに貼るコード

<div class="weluca-accordion-01">
  <details>
    <summary>WordPressでアコーディオンはプラグインなしで作れますか？</summary>
    <div class="accordion-body">
      <p>はい、作れます。HTMLのdetailsタグとsummaryタグを使えば、カスタムHTMLブロックだけでクリック開閉できるアコーディオンを作成できます。</p>
    </div>
  </details>

  <details>
    <summary>どんな内容に向いていますか？</summary>
    <div class="accordion-body">
      <p>FAQ、料金の補足、注意事項、サービスの詳しい説明などに向いています。</p>
    </div>
  </details>
</div>

CSSタブに貼るコード

.weluca-accordion-01 {
  max-width: 760px;
  margin: 24px 0;
  font-family: inherit;
}

.weluca-accordion-01 details {
  border: 1px solid #dfe7dc;
  border-radius: 14px;
  background: #ffffff;
  margin-bottom: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
  overflow: hidden;
}

.weluca-accordion-01 summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 18px 52px 18px 20px;
  font-weight: 700;
  line-height: 1.6;
  color: #2f3a2f;
  background: linear-gradient(90deg,#f7fbf4 0%,#ffffff 100%);
}

.weluca-accordion-01 summary::-webkit-details-marker {
  display: none;
}

.weluca-accordion-01 summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #c7ddad;
  color: #2f3a2f;
  font-size: 20px;
  line-height: 26px;
  text-align: center;
  font-weight: 700;
}

.weluca-accordion-01 details[open] summary::after {
  content: "−";
}

.weluca-accordion-01 .accordion-body {
  padding: 0 20px 20px;
  color: #444;
  line-height: 1.9;
  font-size: 15.5px;
}

.weluca-accordion-01 .accordion-body p {
  margin: 12px 0 0;
}

@media (max-width: 600px) {
  .weluca-accordion-01 summary {
    padding: 16px 48px 16px 16px;
    font-size: 15px;
  }

  .weluca-accordion-01 .accordion-body {
    padding: 0 16px 18px;
    font-size: 15px;
  }
}

パターン2：左ラインで見せるミニマル型アコーディオン

シンプルで大人っぽく見せたい場合は、左にアクセントラインを入れるデザインが使いやすいです。

装飾を控えめにしながら、見出しの位置が分かりやすくなります。士業、整体、教室、制作サービスなど、落ち着いた印象にしたいページにも向いています。

ウェルカ<br data-src=編集長"/>
ウェルカ
編集長

「おしゃれだけど派手すぎない」デザインにしたい時は、この左ライン型が便利です。本文の邪魔をせず、FAQをきれいに整理できます。

料金の目安はどこに書けばいいですか？

料金はアコーディオン内だけでなく、本文にも一度出しておくと読者が判断しやすくなります。

注意事項をまとめる用途にも使えますか？

はい、使えます。長くなりやすい注意事項や補足説明を整理する時に向いています。

HTMLタブに貼るコード

<div class="weluca-accordion-02">
  <details>
    <summary>料金の目安はどこに書けばいいですか？</summary>
    <div class="accordion-body">
      <p>料金はアコーディオン内だけでなく、本文にも一度出しておくと読者が判断しやすくなります。</p>
    </div>
  </details>

  <details>
    <summary>注意事項をまとめる用途にも使えますか？</summary>
    <div class="accordion-body">
      <p>はい、使えます。長くなりやすい注意事項や補足説明を整理する時に向いています。</p>
    </div>
  </details>
</div>

CSSタブに貼るコード

.weluca-accordion-02 {
  max-width: 760px;
  margin: 24px 0;
  font-family: inherit;
}

.weluca-accordion-02 details {
  border-left: 5px solid #8faf7c;
  border-radius: 10px;
  background: #fafcf8;
  margin-bottom: 12px;
  padding: 0;
}

.weluca-accordion-02 summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 18px 48px 18px 18px;
  font-weight: 700;
  color: #273327;
}

.weluca-accordion-02 summary::-webkit-details-marker {
  display: none;
}

.weluca-accordion-02 summary::after {
  content: "⌄";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #8faf7c;
}

.weluca-accordion-02 details[open] summary::after {
  content: "⌃";
}

.weluca-accordion-02 .accordion-body {
  padding: 0 18px 18px;
  color: #444;
  line-height: 1.9;
}

パターン3：グラデーション見出し型アコーディオン

見出し部分を目立たせたい場合は、グラデーションを使ったアコーディオンが便利です。

サービス紹介ページやLP風のページで、FAQを少し華やかに見せたい時に使えます。背景に色を入れるため、通常本文との区切りも分かりやすくなります。

ウェルカ<br data-src=編集長"/>
ウェルカ
編集長

強めの色を使うと目立ちますが、多用するとページ全体が重く見えます。1ページ内のFAQ全体をまとめる時に使うくらいがちょうどいいです。

サービスページのFAQにも使えますか？

はい、使えます。申し込み前の不安を解消するFAQに向いています。

見出しを目立たせたい時に向いていますか？

向いています。グラデーション背景にすることで、FAQの見出しが分かりやすくなります。

HTMLタブに貼るコード

<div class="weluca-accordion-03">
  <details>
    <summary>サービスページのFAQにも使えますか？</summary>
    <div class="accordion-body">
      <p>はい、使えます。申し込み前の不安を解消するFAQに向いています。</p>
    </div>
  </details>

  <details>
    <summary>見出しを目立たせたい時に向いていますか？</summary>
    <div class="accordion-body">
      <p>向いています。グラデーション背景にすることで、FAQの見出しが分かりやすくなります。</p>
    </div>
  </details>
</div>

CSSタブに貼るコード

.weluca-accordion-03 {
  max-width: 760px;
  margin: 24px 0;
  font-family: inherit;
}

.weluca-accordion-03 details {
  border-radius: 16px;
  background: #fff;
  margin-bottom: 14px;
  box-shadow: 0 8px 24px rgba(40,60,40,.08);
  overflow: hidden;
}

.weluca-accordion-03 summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 18px 54px 18px 22px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg,#86a96f,#c7ddad);
}

.weluca-accordion-03 summary::-webkit-details-marker {
  display: none;
}

.weluca-accordion-03 summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: #fff;
}

.weluca-accordion-03 details[open] summary::after {
  content: "−";
}

.weluca-accordion-03 .accordion-body {
  padding: 18px 22px 22px;
  color: #444;
  line-height: 1.9;
}

パターン4：番号付きFAQ型アコーディオン

質問数が多いFAQでは、番号付きのアコーディオンにすると整理されて見えます。

「Q1」「Q2」のような番号を付けることで、読者が順番に確認しやすくなります。記事内のよくある質問、手順説明、比較ポイントの整理にも使えます。

ウェルカ<br data-src=編集長"/>
ウェルカ
編集長

FAQが5個以上ある時は、番号があるだけでかなり読みやすくなります。特にサービスページの下部FAQにおすすめです。

申し込み前に相談できますか？

はい、相談できます。事前に不安な点を確認してから申し込むと安心です。

納期はどれくらいですか？

内容によって変わります。小さな修正なら短期間、ページ制作を含む場合は余裕を持ったスケジュールが必要です。

HTMLタブに貼るコード

<div class="weluca-accordion-04">
  <details>
    <summary>申し込み前に相談できますか？</summary>
    <div class="accordion-body">
      <p>はい、相談できます。事前に不安な点を確認してから申し込むと安心です。</p>
    </div>
  </details>

  <details>
    <summary>納期はどれくらいですか？</summary>
    <div class="accordion-body">
      <p>内容によって変わります。小さな修正なら短期間、ページ制作を含む場合は余裕を持ったスケジュールが必要です。</p>
    </div>
  </details>
</div>

CSSタブに貼るコード

.weluca-accordion-04 {
  max-width: 760px;
  margin: 24px 0;
  font-family: inherit;
  counter-reset: faq;
}

.weluca-accordion-04 details {
  counter-increment: faq;
  border: 1px solid #e8e2d8;
  border-radius: 12px;
  background: #fffdf9;
  margin-bottom: 12px;
  overflow: hidden;
}

.weluca-accordion-04 summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 18px 50px 18px 68px;
  font-weight: 700;
  color: #3c3328;
}

.weluca-accordion-04 summary::-webkit-details-marker {
  display: none;
}

.weluca-accordion-04 summary::before {
  content: "Q" counter(faq);
  position: absolute;
  left: 18px;
  top: 16px;
  background: #d9b98f;
  color: #fff;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 13px;
}

.weluca-accordion-04 summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #b08a5c;
  font-size: 22px;
}

.weluca-accordion-04 details[open] summary::after {
  content: "−";
}

.weluca-accordion-04 .accordion-body {
  padding: 0 20px 20px 68px;
  color: #444;
  line-height: 1.9;
}

パターン5：枠線なしのフラット型アコーディオン

ブログ記事内に自然になじませたい時は、枠線を控えたフラット型が向いています。

カード感を弱め、本文の延長として読ませたい場合に使いやすいデザインです。補足説明や短いQ&Aに向いています。

ウェルカ<br data-src=編集長"/>
ウェルカ
編集長

記事中の補足に使うなら、このくらい控えめなデザインの方が読みやすいです。FAQ専用というより、本文整理向けです。

補足説明にも使えますか？

はい、本文の流れを邪魔せずに補足を入れたい時に使いやすいです。

枠線なしでもクリックできると分かりますか？

右側にプラス記号を置いているため、開閉できる要素だと伝わりやすくなります。

HTMLタブに貼るコード

<div class="weluca-accordion-05">
  <details>
    <summary>補足説明にも使えますか？</summary>
    <div class="accordion-body">
      <p>はい、本文の流れを邪魔せずに補足を入れたい時に使いやすいです。</p>
    </div>
  </details>

  <details>
    <summary>枠線なしでもクリックできると分かりますか？</summary>
    <div class="accordion-body">
      <p>右側にプラス記号を置いているため、開閉できる要素だと伝わりやすくなります。</p>
    </div>
  </details>
</div>

CSSタブに貼るコード

.weluca-accordion-05 {
  max-width: 760px;
  margin: 24px 0;
  font-family: inherit;
}

.weluca-accordion-05 details {
  border-bottom: 1px solid #e4e4e4;
  background: transparent;
}

.weluca-accordion-05 summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 18px 42px 18px 0;
  font-weight: 700;
  color: #333;
}

.weluca-accordion-05 summary::-webkit-details-marker {
  display: none;
}

.weluca-accordion-05 summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: #8faf7c;
  font-size: 24px;
}

.weluca-accordion-05 details[open] summary::after {
  content: "−";
}

.weluca-accordion-05 .accordion-body {
  padding: 0 0 18px;
  color: #555;
  line-height: 1.9;
}

パターン6：影を効かせた立体カード型アコーディオン

ページ内でしっかり目立たせたい時は、影を効かせた立体カード型が向いています。

サービスの料金FAQや、問い合わせ前に必ず読んでほしい注意事項など、読者の目に止めたい要素に使いやすいデザインです。

ウェルカ<br data-src=編集長"/>
ウェルカ
編集長

影が強いデザインは目立ちますが、ページ内に置きすぎると重く見えます。ここぞというFAQブロックに使うのがおすすめです。

重要なFAQを目立たせたい時に使えますか？

はい、影をつけたカード型なので、ページ内で目に入りやすくなります。

どんなページに向いていますか？

サービスページ、料金ページ、LP風のページなど、FAQをしっかり見せたいページに向いています。

HTMLタブに貼るコード

<div class="weluca-accordion-06">
  <details>
    <summary>重要なFAQを目立たせたい時に使えますか？</summary>
    <div class="accordion-body">
      <p>はい、影をつけたカード型なので、ページ内で目に入りやすくなります。</p>
    </div>
  </details>

  <details>
    <summary>どんなページに向いていますか？</summary>
    <div class="accordion-body">
      <p>サービスページ、料金ページ、LP風のページなど、FAQをしっかり見せたいページに向いています。</p>
    </div>
  </details>
</div>

CSSタブに貼るコード

.weluca-accordion-06 {
  max-width: 760px;
  margin: 24px 0;
  font-family: inherit;
}

.weluca-accordion-06 details {
  border-radius: 18px;
  background: #ffffff;
  margin-bottom: 16px;
  box-shadow: 0 14px 32px rgba(35,45,35,.12);
  overflow: hidden;
}

.weluca-accordion-06 summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 20px 58px 20px 22px;
  font-weight: 700;
  color: #2f3a2f;
}

.weluca-accordion-06 summary::-webkit-details-marker {
  display: none;
}

.weluca-accordion-06 summary::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-right: 3px solid #8faf7c;
  border-bottom: 3px solid #8faf7c;
  transform: translateY(-65%) rotate(45deg);
}

.weluca-accordion-06 details[open] summary::after {
  transform: translateY(-35%) rotate(-135deg);
}

.weluca-accordion-06 .accordion-body {
  padding: 0 22px 22px;
  color: #444;
  line-height: 1.9;
}

パターン7：淡いブルーの信頼感アコーディオン

信頼感や清潔感を出したい場合は、淡いブルーを使ったアコーディオンが向いています。

士業、教育、BtoBサービス、サポートページなどでは、落ち着いた印象を作りやすい配色です。白背景のサイトにもなじみやすく、読みやすさも保ちやすいです。

ウェルカ<br data-src=編集長"/>
ウェルカ
編集長

青系は安心感を出しやすい色です。問い合わせ前の不安を整理するFAQにも使いやすい配色です。

サポートページにも使えますか？

はい、淡いブルーは落ち着いた印象があり、サポートページや案内ページに使いやすいです。

清潔感を出したい時に向いていますか？

向いています。白背景のサイトにもなじみやすく、やわらかい印象になります。

HTMLタブに貼るコード

<div class="weluca-accordion-07">
  <details>
    <summary>サポートページにも使えますか？</summary>
    <div class="accordion-body">
      <p>はい、淡いブルーは落ち着いた印象があり、サポートページや案内ページに使いやすいです。</p>
    </div>
  </details>

  <details>
    <summary>清潔感を出したい時に向いていますか？</summary>
    <div class="accordion-body">
      <p>向いています。白背景のサイトにもなじみやすく、やわらかい印象になります。</p>
    </div>
  </details>
</div>

CSSタブに貼るコード

.weluca-accordion-07 {
  max-width: 760px;
  margin: 24px 0;
  font-family: inherit;
}

.weluca-accordion-07 details {
  border: 1px solid #d8e8f4;
  border-radius: 14px;
  background: #f7fbff;
  margin-bottom: 12px;
  overflow: hidden;
}

.weluca-accordion-07 summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 18px 52px 18px 20px;
  font-weight: 700;
  color: #263c4a;
}

.weluca-accordion-07 summary::-webkit-details-marker {
  display: none;
}

.weluca-accordion-07 summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #d8e8f4;
  color: #263c4a;
  text-align: center;
  line-height: 28px;
  font-size: 20px;
}

.weluca-accordion-07 details[open] summary::after {
  content: "−";
}

.weluca-accordion-07 .accordion-body {
  padding: 0 20px 20px;
  color: #3f4f5a;
  line-height: 1.9;
}

パターン8：黒文字が映えるモノトーン型アコーディオン

スタイリッシュに見せたい時は、白・黒・グレーでまとめたモノトーン型が使いやすいです。

ポートフォリオ、デザイン系サイト、シンプルな企業サイトなどに合わせやすいデザインです。色を抑えることで、本文や写真を邪魔しにくくなります。

ウェルカ<br data-src=編集長"/>
ウェルカ
編集長

モノトーン型は、サイト全体のデザインを崩しにくいのが強みです。色を増やしたくないページに向いています。

シンプルな企業サイトにも使えますか？

はい、色を抑えたデザインなので、シンプルな企業サイトやポートフォリオにも合わせやすいです。

写真が多いページにも向いていますか？

向いています。色を控えているため、写真や実績紹介の邪魔をしにくいです。

HTMLタブに貼るコード

<div class="weluca-accordion-08">
  <details>
    <summary>シンプルな企業サイトにも使えますか？</summary>
    <div class="accordion-body">
      <p>はい、色を抑えたデザインなので、シンプルな企業サイトやポートフォリオにも合わせやすいです。</p>
    </div>
  </details>

  <details>
    <summary>写真が多いページにも向いていますか？</summary>
    <div class="accordion-body">
      <p>向いています。色を控えているため、写真や実績紹介の邪魔をしにくいです。</p>
    </div>
  </details>
</div>

CSSタブに貼るコード

.weluca-accordion-08 {
  max-width: 760px;
  margin: 24px 0;
  font-family: inherit;
}

.weluca-accordion-08 details {
  border: 1px solid #222;
  border-radius: 0;
  background: #fff;
  margin-bottom: 10px;
}

.weluca-accordion-08 summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 18px 52px 18px 18px;
  font-weight: 700;
  color: #111;
  letter-spacing: .02em;
}

.weluca-accordion-08 summary::-webkit-details-marker {
  display: none;
}

.weluca-accordion-08 summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: #111;
}

.weluca-accordion-08 details[open] summary {
  background: #111;
  color: #fff;
}

.weluca-accordion-08 details[open] summary::after {
  content: "−";
  color: #fff;
}

.weluca-accordion-08 .accordion-body {
  padding: 18px;
  color: #333;
  line-height: 1.9;
}

パターン9：角丸ピル型アコーディオン

やわらかく親しみやすい印象にしたい場合は、角丸を大きくしたピル型が使いやすいです。

個人事業主、教室、美容、子育て、ライフスタイル系のサイトなど、やさしい雰囲気を出したいページに向いています。

ウェルカ<br data-src=編集長"/>
ウェルカ
編集長

角丸を大きくすると、やわらかい印象になります。堅いサービス説明より、親しみやすく見せたいFAQに向いています。

やさしい雰囲気のサイトに合いますか？

はい、角丸が大きく、淡い背景色なので、やさしい印象のサイトに合わせやすいです。

教室や美容系のFAQにも使えますか？

使えます。親しみやすい見た目なので、硬すぎないFAQデザインに向いています。

HTMLタブに貼るコード

<div class="weluca-accordion-09">
  <details>
    <summary>やさしい雰囲気のサイトに合いますか？</summary>
    <div class="accordion-body">
      <p>はい、角丸が大きく、淡い背景色なので、やさしい印象のサイトに合わせやすいです。</p>
    </div>
  </details>

  <details>
    <summary>教室や美容系のFAQにも使えますか？</summary>
    <div class="accordion-body">
      <p>使えます。親しみやすい見た目なので、硬すぎないFAQデザインに向いています。</p>
    </div>
  </details>
</div>

CSSタブに貼るコード

.weluca-accordion-09 {
  max-width: 760px;
  margin: 24px 0;
  font-family: inherit;
}

.weluca-accordion-09 details {
  border-radius: 999px;
  background: #f8f3ee;
  margin-bottom: 14px;
  overflow: hidden;
  transition: border-radius .2s ease;
}

.weluca-accordion-09 details[open] {
  border-radius: 28px;
}

.weluca-accordion-09 summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 18px 58px 18px 24px;
  font-weight: 700;
  color: #4a3728;
}

.weluca-accordion-09 summary::-webkit-details-marker {
  display: none;
}

.weluca-accordion-09 summary::after {
  content: "+";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: #b98b65;
  font-size: 22px;
}

.weluca-accordion-09 details[open] summary::after {
  content: "−";
}

.weluca-accordion-09 .accordion-body {
  padding: 0 24px 22px;
  color: #4f443b;
  line-height: 1.9;
}

パターン10：注意事項向けの警告カラー型アコーディオン

キャンセル規定や注意事項には、淡いイエロー系のアコーディオンが向いています。

強く警告しすぎず、でも読者に確認してほしい内容として目立たせられます。予約ページ、申し込み前の注意、返金条件などに使いやすいデザインです。

ウェルカ<br data-src=編集長"/>
ウェルカ
編集長

注意事項は、アコーディオンの中だけに隠しすぎないことも大切です。特にキャンセル料や返金条件は、本文にも一度出しておくとトラブルを減らせます。

キャンセル料はどこに書くべきですか？

キャンセル料や返金条件は、アコーディオン内だけでなく本文にも一度書いておくとトラブル防止につながります。

注意事項を目立たせたい時に使えますか？

使えます。淡いイエロー系にすることで、強すぎない注意喚起として見せられます。

HTMLタブに貼るコード

<div class="weluca-accordion-10">
  <details>
    <summary>キャンセル料はどこに書くべきですか？</summary>
    <div class="accordion-body">
      <p>キャンセル料や返金条件は、アコーディオン内だけでなく本文にも一度書いておくとトラブル防止につながります。</p>
    </div>
  </details>

  <details>
    <summary>注意事項を目立たせたい時に使えますか？</summary>
    <div class="accordion-body">
      <p>使えます。淡いイエロー系にすることで、強すぎない注意喚起として見せられます。</p>
    </div>
  </details>
</div>

CSSタブに貼るコード

.weluca-accordion-10 {
  max-width: 760px;
  margin: 24px 0;
  font-family: inherit;
}

.weluca-accordion-10 details {
  border: 1px solid #f0d48a;
  border-radius: 12px;
  background: #fffaf0;
  margin-bottom: 12px;
  overflow: hidden;
}

.weluca-accordion-10 summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 18px 52px 18px 46px;
  font-weight: 700;
  color: #4a3b16;
}

.weluca-accordion-10 summary::-webkit-details-marker {
  display: none;
}

.weluca-accordion-10 summary::before {
  content: "!";
  position: absolute;
  left: 18px;
  top: 18px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f0c75e;
  color: #fff;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
  font-weight: 700;
}

.weluca-accordion-10 summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #b68a20;
  font-size: 22px;
}

.weluca-accordion-10 details[open] summary::after {
  content: "−";
}

.weluca-accordion-10 .accordion-body {
  padding: 0 20px 20px 46px;
  color: #4f4630;
  line-height: 1.9;
}

アコーディオンコードを使う時の注意点

カスタムHTMLでアコーディオンを使う時は、CSSの重複とクラス名の衝突に注意します。

同じページに複数のアコーディオンを置く場合、同じクラス名を使うとデザインが混ざることがあります。この記事では、weluca-accordion-01、weluca-accordion-02のように、パターンごとにクラス名を分けています。

ウェルカ<br data-src=編集長"/>
ウェルカ
編集長

1つのページで10パターンをすべて表示する場合は、クラス名を分けるのが大事です。同じクラス名のまま色だけ変えると、意図しないデザイン崩れが起きます。

使う前の確認ポイント
  • HTMLとCSSのクラス名が一致しているか
  • 同じページでクラス名が重複していないか
  • CSS欄に<style>タグを入れていないか
  • スマホ表示で余白が崩れていないか
  • クリックして開閉できるか
  • 重要情報をアコーディオンの中だけに隠していないか
  • 他のCSSと干渉していないか

よくある質問

ウェルカ<br data-src=編集長"/>
ウェルカ
編集長

ここでは、WordPressのカスタムHTMLでアコーディオンを作る時によくある疑問をまとめます。動かない時は、まずHTMLとCSSのクラス名を確認しましょう。

Q
カスタムHTMLだけでアコーディオンは作れますか？

はい、detailsタグとsummaryタグを使えば作れます。ただし、そのままだと見た目がシンプルなので、CSSを追加してデザインを整えるのがおすすめです。

Q
HTMLとCSSは分けた方がいいですか？

分けた方が管理しやすいです。HTMLは中身、CSSはデザインとして分けておくと、後から色や余白だけ変えたい時に修正しやすくなります。

Q
CSSタブにstyleタグは必要ですか？

CSSタブにstyleタグは不要です。CSSタブには、.weluca-accordion-01 のようなCSSだけを貼り付けます。<style>タグまで入れると、ブロックエラーや表示崩れの原因になります。

Q
同じページに複数のアコーディオンを置けますか？

置けます。ただし、デザインを変える場合はクラス名を分けましょう。同じクラス名を使うと、CSSが混ざって意図しない見た目になることがあります。

Q
JavaScriptは必要ですか？

基本的な開閉だけなら不要です。detailsタグとsummaryタグを使えば、JavaScriptなしでクリック開閉できます。複雑な動きやアニメーションを付けたい場合はJavaScriptを検討します。

Q
アコーディオンが開かない時はどこを確認しますか？

まずHTMLのタグ閉じ忘れとCSSのクラス名を確認します。そのうえで、キャッシュ、テーマ側のCSS、最適化プラグインの影響も確認しましょう。

まとめ：カスタムHTMLでもおしゃれなアコーディオンは作れる

WordPressのカスタムHTMLブロックを使えば、プラグインなしでも見た目の整ったアコーディオンを作れます。

基本は、HTMLタブにdetailsタグとsummaryタグを使った本体コードを入れ、CSSタブにデザイン用のコードを入れる流れです。

ウェルカ<br data-src=編集長"/>
ウェルカ
編集長

最初は1パターンだけ試して、スマホ表示まで確認しましょう。慣れてから色や角丸、影を調整すると失敗しにくいです。

FAQ、料金補足、注意事項、サービス説明など、アコーディオンはさまざまな場所で使えます。ただし、重要な情報を隠しすぎず、読者が必要な内容へ迷わず進めるように使うことが大切です。

この記事の10パターンをベースに、サイトの雰囲気に合う色や余白へ調整して使ってみてください。

記事を書いた人

Warning: Undefined array key 0 in /home/amazonzon/weluca.jp/public_html/wp-content/themes/jinr/include/shortcode.php on line 306
WELUCA
WELUCA
ウェルカ
大阪府でホームページ制作をしています。WordPress・SEO・Webマーケティングのコンテンツを発信中！
ホームページのこと、ひとりで悩まなくて大丈夫です。

WELUCA-ウェルカ-

ホームページのこと、そろそろ整えませんか？

更新できていないページ、古い情報、問い合わせが来ない原因。
放置しているつもりはなくても、ホームページは少しずつ機会損失につながります。

WELUCAでは、ホームページ制作・更新・保守・集客サポートまで、
小さな事業者さんが無理なく続けられる形でお手伝いしています。

まずは、今のホームページの状態や困っていることをお聞かせください。
必要な改善点を一緒に整理します。

まずは無料で相談する
Recommend
関連記事
記事URLをコピーしました