プログラミングスクール最大70%OFF! ←クリックして見に行く

【WordPress】プラグインなしでアコーディオンメニューを実装【コピペOK】

【WordPress】プラグインなしでアコーディオンメニューを実装【コピペOK】

どーも!りゅうです(「・ω・)「

プラグインは重くなるのでできるだけ入れたくない。

でもHTMLなどに詳しくない。。

という方向けに、以下のようなアコーディオンメニューをコピペだけで作る方法をご紹介します!

▼ タイトル
展開された文章が表示されます!
改行文章もOK。
影付きや角丸など自由に設定できます!
Attention

WordPressの設定や環境にもよりますので、コピペ後に適宜調整くださいませ

Point

HTML、CSS、JavaScriptを使用します

コピペで実装するアコーディオンメニュー

HTML

コード

要素の解説

.accordion:アコーディオンメニュー全体を囲むコンテナです。
.accordion-title:アコーディオンのタイトル部分を表します。クリックすることで、関連するコンテンツの表示/非表示を切り替えます。
.accordion-content:アコーディオンの内容部分を表します。初期状態では非表示になっています。
.accordion-content-inner:アコーディオンの内容の内側のラッパーです。パディングや不透明度の調整に使用します。

CSS

コード

要素の解説

.accordion:
border-radius: 5px;: アコーディオンメニューの角を5pxの半径で丸くします。これにより、メニューの外観が柔らかくなります。
overflow: hidden;: アコーディオンメニューの内容がメニューの境界を越えて表示される場合、それを隠すように設定します。これにより、メニューの外観が整います。
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);: アコーディオンメニューに影を適用します。影のオフセットは上下に0px、左右に2px、ぼかしは5px、色は黒(rgba(0, 0, 0, 0.2))で透明度20%に設定されています。これにより、メニューに立体感が加わります。

.accordion-title:
background-color: #676e78;: タイトル部分の背景色を#676e78(濃いグレー)に設定します。
padding: 5px 10px;: タイトル部分の上下に5px、左右に10pxのパディングを設定します。これにより、タイトルの内容とメニューの境界線の間に適度な余白が確保されます。
cursor: pointer;: マウスカーソルがタイトル部分の上に来たときに、ポインターの形状に変化するように設定します。これにより、ユーザーはタイトルがクリック可能であることを視覚的に認識できます。
color: white;: タイトルのテキストの色を白に設定します。背景色が濃いグレーであるため、白のテキストは読みやすくなります。
user-select: none;: ユーザーがタイトルの文字列を選択できないようにします。これにより、タイトルをクリックしたときに、文字列が選択されることを防ぎます。

.accordion-content:
background-color: #e8e8e8;: コンテンツ部分の背景色を#e8e8e8(明るいグレー)に設定します。
color: #314f5a;: コンテンツのテキストの色を#314f5a(濃い青みがかったグレー)に設定します。
overflow: hidden;: コンテンツがアコーディオンメニューの境界を越えて表示される場合、それを隠すように設定します。
max-height: 0;: アコーディオンが閉じている状態での高さを0に設定します。これにより、コンテンツが非表示になります。
transition: max-height 0.3s ease-out, padding 0.3s ease-out;: アコーディオンの開閉アニメーションを設定します。max-heightとpaddingのプロパティが0.3秒かけて変化し、ease-out(開始時は速く、終了時は緩やかな変化)のタイミング関数が適用されます。
padding: 0 10px;: コンテンツの左右に10pxのパディングを設定します。これにより、コンテンツとメニューの境界線の間に適度な余白が確保されます。

.accordion-content.open:
max-height: 1000px;: アコーディオンが開いている状態での高さの最大値を1000pxに設定します。これにより、コンテンツが表示されます。実際のコンテンツの高さが1000pxを超える場合、スクロールバーが表示されます。
padding: 10px;: アコーディオンが開いている状態での上下左右に10pxのパディングを設定します。
transition: max-height 0.5s ease-in, padding 0.5s ease-in;: アコーディオンの開閉アニメーションを設定します。max-heightとpaddingのプロパティが0.5秒かけて変化し、ease-in(開始時は緩やかで、終了時は速い変化)のタイミング関数が適用されます。

Javascript

コード

要素の解説

・getElementsByClassNameを使用して、すべての.accordion要素を取得します。
・各アコーディオン要素に対してクリックイベントリスナーを追加します。
・クリックされたアコーディオン要素に.activeクラスをトグルします。
・クリックされたアコーディオン要素内の.accordion-content要素を取得します。
・.accordion-content要素に.openクラスが存在するかどうかを確認します。
存在する場合は、.openクラスを削除して、アコーディオンを閉じます。
存在しない場合は、.openクラスを追加して、アコーディオンを開きます。

あとがき

アコーディオンメニューは実装できましたでしょうか?

プラグインのAddQuicktagに登録すると記事の執筆も楽になります!

AddQuicktagの紹介は別記事で紹介しようと思います。
ではまた別の記事でお会いしましょう!

Wordpressカテゴリの最新記事