
ショートコードなしで使えるアコーディオンメニューが欲しい。
テーマを変えても大丈夫で、コピペでカンタンに自分のブログに使えたら良いな。
こういった要望に応える記事を用意しました!
本記事の内容
- コピペで実装できる「アコーディオンメニュー」のHTML/CSSのコード
- そのコードのカスタマイズ方法の解説
「ネタバレ内容」や長くなりがちな文章をあえて隠したり、「よくある質問(FAQ)」などで頻繁に使われるアコーディオンメニュー。
有料テーマならショートコードが用意されてたりしますが、テーマを変えたら最後、すべての記事を書き換えなければなりません。
この記事を書いている僕は、いくつものWordPressサイト制作を経験していて、実際に当ブログにも取り入れています。
本記事ではコピペで実装できる、テーマやプラグインに依存しない「アコーディオンメニュー」のコードを解説します。
色をいっぱい使うとダサいので、シンプルなグラデーションにしました(クリックしてみて下さい↑)。
ポイント
- 文字色や背景色を変更できる
- アイコンやその位置を変更できる
- 1記事に何個も使用できる
- テキストが長くなってもオッケイ
「文字色・背景色」や「アイコン」を変更したい人のために、後半に13通りのカスタマイズ方法も記載しておきました。
このまんま使いたい人は、そのまんまコピペするだけでOKです。
もくじ
- 【コピペOK】CSSだけで作るアコーディオンメニュー【プラグインなし】
- 【カスタマイズ①】ラベルの文字色を変更したい
- 【カスタマイズ②】ラベルの背景色を変更したい
- 【カスタマイズ③】ラベルに枠線を付けたい
- 【カスタマイズ④】ラベルの角を丸くしたい
- 【カスタマイズ⑤】アイコンを左にしたい
- 【カスタマイズ⑥】アイコンを変更したい
- 【カスタマイズ⑦】開閉スピードを変更したい
- 【カスタマイズ⑧】ラベルにマウスを乗せた時に背景色を変えたい
- 【カスタマイズ⑨】アイコン(ラベル)をクリックした後の背景色を変えたい
- 【カスタマイズ⑩】中身の文字色を変更したい
- 【カスタマイズ⑪】中身の背景色を変更したい
- 【カスタマイズ⑫】アコーディオンメニューを1記事に2つ以上使いたい
- 【カスタマイズ⑬】ラベル内のテキストが長すぎてスマホで崩れてしまう
- まとめ
【コピペ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">【ネタバレ注意!】ジャンプの内容1です</label>
<div class="ac-menu-inside">
山田涼介です。
</div>
</div>
<div class="ac-menu">
<input id="ac-2" type="checkbox" />
<label for="ac-2">【ネタバレ注意!】ジャンプの内容2です</label>
<div class="ac-menu-inside">
知念侑李です。
</div>
</div>
<div class="ac-menu">
<input id="ac-3" type="checkbox" />
<label for="ac-3">【ネタバレ注意!】ジャンプの内容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に変更すると、左から20pxの位置にアイコンが表示されます。
【カスタマイズ⑥】アイコンを変更したい
.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を変更すると、中身の背景色が変わります。
【カスタマイズ⑫】アコーディオンメニューを1記事に2つ以上使いたい
「テキストエディタ」にペーストするHTML
<!-- 1つ目のアコーディオンメニュー -->
<div class="ac-menu">
<input id="ac-1" type="checkbox" />
<label for="ac-1">1つ目のラベル</label>
<div class="ac-menu-inside">
1つ目の中身
</div>
</div>
<!-- 2つ目のアコーディオンメニュー -->
<div class="ac-menu">
<input id="ac-2" type="checkbox" />
<label for="ac-2">2つ目のラベル</label>
<div class="ac-menu-inside">
2つ目の中身
</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">ジャンプの内容4です</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制作」でも重宝すること間違いないですよ!