【コピペOK】CSSだけで作るアコーディオンメニュー【プラグインなし】

ショートコードなしで使えるアコーディオンメニューが欲しい。

テーマを変えても大丈夫で、コピペでカンタンに自分のブログに使えたら良いな。

こういった要望に応える記事を用意しました！

本記事の内容

「ネタバレ内容」や長くなりがちな文章をあえて隠したり、「よくある質問（FAQ）」などで頻繁に使われるアコーディオンメニュー。

有料テーマならショートコードが用意されてたりしますが、テーマを変えたら最後、すべての記事を書き換えなければなりません。

この記事を書いている僕は、いくつものWordPressサイト制作を経験していて、実際に当ブログにも取り入れています。

本記事ではコピペで実装できる、テーマやプラグインに依存しない「アコーディオンメニュー」のコードを解説します。

色をいっぱい使うとダサいので、シンプルなグラデーションにしました（クリックしてみて下さい↑）。

ポイント

「文字色・背景色」や「アイコン」を変更したい人のために、後半に１３通りのカスタマイズ方法も記載しておきました。

このまんま使いたい人は、そのまんまコピペするだけでOKです。

【コピペOK】CSSだけで作るアコーディオンメニュー【プラグインなし】

「追加CSS」にペーストするCSS

/* アコーディオンメニュー */
.ac-menu:last-child {
  margin-bottom: 60px; /* 最後の要素の下にだけ余白 */
}
.ac-menu input {
  display: none;
}
.ac-menu label {
  color: #fff; /* 文字色 */
  font-size: 17px; /* 文字サイズ */
  line-height: 2; /* 行間 */
  font-weight: bold; /* 文字を太く */
  text-align: center; /* 文字を中央に */
  background: linear-gradient(-90deg, #C84260, #465D90); /* グラデーションの背景色 */
  padding: 20px; /* 内側の余白 */
  cursor: pointer;
  position: relative;
  display: block;
}
.ac-menu label:after {
  position: absolute;
  right: 20px; /* 左からの距離 */
  top: 50%; /* 上下中央配置 */
  -webkit-transform : translateY(-50%);
  transform : translateY(-50%);
  content: "＋"; /* アイコン */
}
.ac-menu input:checked ~ label::after {
  content: "−"; /* クリック後のアイコン */
}
.ac-menu div {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.3s; /* 開閉スピード */
}
.ac-menu input:checked ~ div {
  height: auto;
  opacity: 1;
  padding: 20px; /* 中身の枠内の余白 */
  background: #FAFAFA; /* 中身の背景色 */
}
.ac-menu-inside {
  color: #333; /* 中身の文字色 */
  font-size: 17px; /* 中身の文字サイズ */
  line-height: 2; /* 行間 */
}

まずは上記を「追加CSS」にコピペしてください。「追加CSS」の場所は下記です。

あとは以下を、記事（テキストエディタ）の「アコーディオンメニュー」を設置したい箇所に毎回コピペするだけです。

「テキストエディタ」にペーストするHTML

<div class="ac-menu">
    <input id="ac-1" type="checkbox" />
    <label for="ac-1">【ネタバレ注意！】ジャンプの内容１です</label>
    <div class="ac-menu-inside">
        山田涼介です。
    </div>
</div>
<div class="ac-menu">
    <input id="ac-2" type="checkbox" />
    <label for="ac-2">【ネタバレ注意！】ジャンプの内容２です</label>
    <div class="ac-menu-inside">
        知念侑李です。
    </div>
</div>
<div class="ac-menu">
    <input id="ac-3" type="checkbox" />
    <label for="ac-3">【ネタバレ注意！】ジャンプの内容３です</label>
    <div class="ac-menu-inside">
        伊野尾慧です。
    </div>
</div>

では、カスタマイズ方法を解説していきます。あらかじめ表示されている部分全体を「ラベル」、クリックすると開く部分を「中身」としています。

【カスタマイズ①】ラベルの文字色を変更したい

.ac-menu label {
  color: #fff; /* 文字色 */
}

上記のcolorを変更すると、ラベルの文字色が変わります。

【カスタマイズ②】ラベルの背景色を変更したい

.ac-menu label {
  background: linear-gradient(-90deg, #C84260, #465D90); /* グラデーションの背景色 */
  background: #FAFAFA; /* 単色の背景色 */
}

上記のbackgroundを変更すると、ラベルの背景色が変わります。上が「グラデーション」、下が「単色」の背景色の書き方になります。

【カスタマイズ③】ラベルに枠線を付けたい

.ac-menu label {
  border: 1px solid #eee; /* 線の太さ 線のタイプ 線の色 */
}

上記のborderを追記すると、ラベルに枠線を付けられます。

【カスタマイズ④】ラベルの角を丸くしたい

.ac-menu label {
  border-radius: 4px; /* 角を丸く */
}

上記のborder-radiusを追記し、数値を上げていくと、角が丸くなります。

【カスタマイズ⑤】アイコンを左にしたい

.ac-menu label:after {
 right: 20px; /* 左からの距離 */
}

上記をright → leftに変更すると、左から２０pxの位置にアイコンが表示されます。

【カスタマイズ⑥】アイコンを変更したい

.ac-menu label:after {
  content: "▼"; /* アイコン */
}
.ac-menu input:checked ~ label::after {
  content: "▲"; /* クリック後のアイコン */
}

上記のcontent: "ココ";を変更すると、表示されるアイコンを変更できます。「開」「閉」など文字でもオッケイです。

【カスタマイズ⑦】開閉スピードを変更したい

.ac-menu div {
  transition: 0.3s; /* 開閉スピード */
}

上記のtransitionの数値を変更すると、開閉スピードが変わります。

【カスタマイズ⑧】ラベルにマウスを乗せた時に背景色を変えたい

.ac-menu label:hover {
  background: #FAFAFA; /* マウスを乗せた時の背景色 */
  opacity: 0.5; /* マウスを乗せた時に背景色が薄くなる */
}

上記を追記し、backgroundを変更する事で、ラベルにマウスを乗せた時に背景色が変わります。

opacityだけ追記すると、色はそのままに背景色が薄くなります。ユーザーの視認性が上がりますね。

【カスタマイズ⑨】アイコン（ラベル）をクリックした後の背景色を変えたい

.ac-menu input:checked ~ label {
  background: #FAFAFA; /* クリック後のラベルの背景色 */
}

上記を追記し、backgroundを変更する事で、アイコンをクリックした後のラベルの背景色が変わります。ちなみに、ラベルのどこをクリックしても開閉しますよ。

【カスタマイズ⑩】中身の文字色を変更したい

.ac-menu-inside {
  color: #333; /* 中身の文字色 */
}

上記のcolorを変更すると、中身の文字色が変わります。

【カスタマイズ⑪】中身の背景色を変更したい

.ac-menu input:checked ~ div {
  background: #FAFAFA; /* 中身の背景色 */
}

上記のbackgroundを変更すると、中身の背景色が変わります。

【カスタマイズ⑫】アコーディオンメニューを１記事に２つ以上使いたい

「テキストエディタ」にペーストするHTML

<!-- 1つ目のアコーディオンメニュー -->
<div class="ac-menu">
    <input id="ac-1" type="checkbox" />
    <label for="ac-1">１つ目のラベル</label>
    <div class="ac-menu-inside">
        １つ目の中身
    </div>
</div>
<!-- 2つ目のアコーディオンメニュー -->
<div class="ac-menu">
    <input id="ac-2" type="checkbox" />
    <label for="ac-2">２つ目のラベル</label>
    <div class="ac-menu-inside">
        ２つ目の中身
    </div>
</div>

上記のとおり、id="ac-1"とfor="ac-1"の数字を変更し、それぞれ一致させればオッケイです。

【カスタマイズ⑬】ラベル内のテキストが長すぎてスマホで崩れてしまう

文字数によってはラベル内のテキストが長すぎて、スマホではデザインが崩れてしまう・・・なんて事があるでしょう。

文字サイズを小さくする方法もありますが、スマホでのみ改行する方法がオススメです。

「テキストエディタ」にペーストするHTML

<div class="ac-menu">
    <input id="ac-4" type="checkbox" />
    <label for="ac-4">【ネタバレ注意！】<br class="br-sp">ジャンプの内容４です</label>
    <div class="ac-menu-inside">
        八乙女光です。
    </div>
</div>

改行したい位置に<br class="br-sp">を挿入します。

「追加CSS」にペーストするCSS

/* アコーディオンメニュー */
.br-sp {
  display: none; /* 改行させない */
}

/* 480px以下 */
@media (max-width: 480px) {
  .br-sp {
    display: block; /* 480px以下で改行する */
  }
}

上記を追記する事で、PCでは改行させず、480px以下になると改行されるようになります。数値は自由に変更して下さいね。

まとめ

CSSだけで作るシリーズ

プラグインなし・CSSだけで作る「コピペOK」な装飾は上記のとおりです。「ブログ」はもちろん「WEB制作」でも重宝すること間違いないですよ！

人気記事【３０代後半＋未経験】プログラミングで月１００万稼ぐロードマップ