【コピペだけ!】アコーディオンボタンをCSSとHTMLだけで実装する方法!

【コピペだけ!】CSSとHTMLだけでアコーディオン(開閉式)ボタンを実装する方法!

ここあです。

 

ず〜っと前から作りたかったものがやっと出来ました。

 

その名も…

アコーディオンボタン〜!
※ドラえもんのBGM欲しい(笑)

 

いきなり「アコーディオンボタン」とか言われても

「は〜?」ってなりますよね…

ちゃんと説明します^^;

 

アコーディオンボタン」というのは

百聞は一見に如かず!

先に実物をお見せしますね。

 

あなたもおそらくどこかで見たことがあるであろう、こんなボタン。

今回はこの便利な「アコーディオンボタン」の作り方を説明します!^^

 

そう、これが「アコーディオンボタン」です。

 

見たい時にボタンをクリックすると、

隠れているテキストが「ニョキっ!」と現れるとても便利なボタン。

 

アコーディオンボタン」は元々

スマホ用のメニュー表示を分かりやすくするために

開発されたものなんですが、使い途っていろいろあるんですね。

 

例えば、私の場合は

何でずっと前からこの「アコーディオンボタン」を

作りたかったのかと言うと…

 

カスタマイズ系の記事をいろいろと書いていると

HTML」や「CSS」コードを紹介する必要が出てきます。

 

短くてシンプルなコードであれば全然問題ないんですが

紹介するコードによってはかなりダラダラと

長くなってしまうことがあるんですね。

 

それがすごく嫌だったんです^^:

 

というのも…

興味がある人は気にならないかもしれないけど

それでも、コードだけ無駄に長いと

 

途中で読む気を無くしそうって

私が思ってしまうので

おそらくそういう人も何割かいるのでは?と不安でした。
そうでないことを祈りたいのですが…^^;

 

だから、コードを記述するためのプラグインも

使ってはみましたが、使い勝手が非常に悪く断念しました。

 

なので、わざわざ使いにくい「プラグイン」を入れておいても

SEO的にもよろしくないし、とりあえず削除して

いつかはちゃんと違うカタチで用意したいと思っていたんです。

 

で、気付けばいつの間にか時間が経っていた…

ということなんですね^^;

 

やっぱり思い立ったが吉日

もっと早く作っておけばわざわざ

ブログの記事を再編集する手間もなくなるのに…

 

そう思いつつも、他の記事を優先してしまい。

気付けば…

「はぁ〜」って感じでございます(笑)

 

それでも私はちゃんとこだわりたいので

残らず全部再編集しますけど…^^

どれだけ時間がかかるか考えると少しゾっとしますが…w

 

記事もカスタマイズも計画的に(教訓)

 

こだわりも大事にしていきましょう。

ほんと、優先順位を間違えると後が大変(笑)

 

ということで

私のどうでもいい話はこれぐらいにして…

 

アコーディオンボタン」の

実装方法」と「使い方」をご紹介致します。

 

便利そうだし、使ってみたい!」と思った方は

ぜひ最後まで読んでくださいね^^

 

アコーディオン(開閉式)ボタンを実装する方法

あなたがアコーディオンボタンを実装する方法は

非常に簡単です。

 

「コピペ」するだけ^^

なので、初心者のあなたでも簡単に実装できます。

 

今回は、2種類のアコーディオンボタンをご紹介しますので

あなたが「使いやすそう!」と思った方を

選んでくださいね。

 

カスタマイズ方法も紹介するので

チャンレジしたい方はぜひがんばってください^^

 

アコーディオンボタンCSSの記述先

これから、アコーディオンボタンを実装するための

HTML」と「CSS」コードをご紹介しますが

CSS」コードは以下の場所に記述してください。

 

ダッシュボードメニューから「外観」→「カスタマイズ

ダッシュボードメニュー

 

追加CSSの部分にコピペしましょう。

dropshadow

 

アコーディオンボタンのHTMLとCSS

それでは順番にサンプルをご紹介します。

 

アコーディオンボタン(独立型)

ここにテキストを流す

 

まずは、単独で使える

独立したアコーディオンボタン

です。

 

私はこの「アコーディオンボタン」を2色用意し

HTML表示用CSS表示用に分けて使いたかったんです。

 

↓ こんな感じですね^^

<div class="ac-box">
<input id="ac-1" name="accordion-1" type="checkbox" />
<label for="ac-1"> HTMLコード </label>
<div class="ac-small">
<p>ここにテキスト流す</p>
</div>
</div>

/* アコーディオンA */
.ac-box{
width: auto;
margin: 30px auto 5px;
}

/*ラベル*/
.ac-box label{
max-width: 385px;
font-size: 16px;

font-weight: bold;
text-align: center;
background: #f05689;
margin: auto;
line-height: 50px;
position: relative;
display: block;
height: 50px;
border-radius: 8px;
cursor: pointer;
color: #fff;
transition: all 0.5s;
}

/*ラベルホバー時*/
.ac-box label:hover{
background: rgba( 240, 86, 137, 0.55 );
-webkit-transition: all .3s;
transition: all .3s;
}

/*チェックを隠す*/
.ac-box input{
display: none;
}

/*チェックのアイコン(↓)*/
.ac-box label:after{
color: #fff;
font-family:"FontAwesome";
content:" \f078";
}

/*チェックのアイコン(↑)*/
.ac-box input:checked ~ label::after {
color: #fff;
font-family:"FontAwesome";
content:" \f077";
}

/*中身を非表示にしておく*/
.ac-box div{
height: 0px;
padding: 0px;
overflow: hidden;
opacity: 0;
transition: 0.5s;
}

/*クリックで中身を表示*/
.ac-box input:checked ~ div{

height: auto;
padding: 5px;
background: #eaeaea;
opacity: 1;
}

/*表示内容の調整*/
.ac-box div p{

color: #777;
line-height: 23px;
font-size: 14px;
padding: 20px;
text-align: justify;
}

.ac-small p{
margin-bottom: 0px;
}

実際に、上記2つの「HTML」と「CSS」コードをコピーすれば

あなたもすぐにこの「独立型」のアコーディオンボタンを

使うことができます。

 

ご覧の通り、「CSS」コードの記述はとても多いですが

アコーディオンボタン」を使うことで

記事をスッキリ見せることができます^^

 

私の狙いはまさにそこ。

訪問者の方も、記事が読みやすくなりますよね。

 

調整方法や、カスタマイズ方法については後述します。

 

アコーディオンボタン(セット型)

ここにテキストを流す

ここにテキストを流す

 

次にセット型のアコーディオンボタンです。

 

セット型」のアコーディオンボタンは

独立型」のように色分けして使うことはできませんが

 

セットになっているので、リストっぽく、

用途もいろいろと考えられると思います。

 

私のサンプルは2段ですが、コードを変えれば

段数も増やせますので、お好みで調整も可能。

コピーする「コード」は以下の通りです。

 

<div class="cp_actab"><input id="tab-1" name="tabs" type="checkbox" /><label for="tab-1">タイトル</label>
<div class="cp_actab-content">
<p>テキスト</p>
</div>
</div>
<div class="cp_actab"><input id="tab-2" name="tabs" type="checkbox" /> <label for="tab-2">タイトル</label>
<div class="cp_actab-content">
<p>テキスト</p>
</div>
</div>

/* アコーディオンB */
.cp_actab {
position: relative;
overflow: hidden;
width: 100%;
margin: 0 auto;
color: #fff;
}

.cp_actab input {
position: absolute;
z-index: -1;
opacity: 0;
}

.cp_actab label {
font-weight: bold;
line-height: 3;
position: relative;
display: block;
padding: 0 0 0 1em;
cursor: pointer;
margin: 0 0 1px 0;
background: #f05689;
}

.cp_actab .cp_actab-content {
overflow: hidden;
max-height: 0;
-webkit-transition: max-height 0.5s;
transition: max-height 0.5s;
color: #333333;
background: #eaeaea;
}

.cp_actab .cp_actab-content p {
margin: 1em;
font-size: 14px;
}

.cp_actab p{
margin-bottom:0px;
}

/* :checked */
.cp_actab input:checked ~ .cp_actab-content {
max-height: 20em;
}

/*チェックのアイコン(↓)*/
.cp_actab label:after{
color: #fff;
font-family:"FontAwesome";
content:" \f078";
position: absolute;
top: 0;
right: 0;
width: 2em;
height: 3em;
}

/*チェックのアイコン(↑)*/
.cp_actab input:checked ~ label::after {
color: #fff;
font-family:"FontAwesome";
content:" \f077";
}

 

独立型」も「セット型」もこのように

コード表示にも使えますし、

もちろん、普通にテキストを流すこともできます。

 

わっ!見つかっちゃった!(笑)」 ※画像も挿入できます!

 

それでは、引き続き、使い方を説明していきますね。

 

アコーディオンボタンの使い方とカスタマイズ方法

独立型」も「セット型」も

ちょっとだけ使い方に工夫が必要です。

 

アコーディオンボタン(独立型)の使い方

まずは「独立型」のアコーディオンボタンの使い方です。

 

アコーディオンボタンを複数記事に使う場合

記事の中に1つだけ使う場合は特に問題ありません。

 

しかし、2つ以上使いたい場合は

HTMLコードを少しだけ触る必要があります。

<div class="ac-box">
<input id="ac-1" name="accordion-1" type="checkbox" />
<label for="ac-1"> HTMLコード </label>
<div class="ac-small">
<p>ここにテキスト流す</p>
</div>
</div>

 

独立型のアコーディオンボタンを複数使う場合は

上記「HTML」コードのピンク色の数字の部分

毎回、打ち変えるようにしてください。

 

例えば、上記コードだと数字は1になっていますが

もう1つ加えたい時は、この数字を3箇所全て2に打え変えましょう。

 

数字を打ち変える時は「ビジュアル編集モード」ではなく

必ずテキスト編集モードで行ってください。

というより、「テキスト編集モード」でしか変更できません^^;

 

なんで、わざわざ数字を打ち変える必要があるのか?

それは「コード」の種類の問題。

 

HTML」コードに書かれているものに対して

CSS」コードでアクションを起こさせるのですが

HTML」も「CSS」コードもそれぞれ1種類ずつしかありません。

 

なので、コードが全て同じのものを使うと

2つ目以降の「アコーディオンボタン」が

1つ目のコードに反応して正常に機能しなくなります。

 

だから、それぞれのコードをコンピュータに

独立した違うものとして認識させる必要があるのです。

 

ちょっとだけ面倒かもしれませんが

コードを増やすたびに数字を打ち変えるだけなので

あなたにも簡単にできると思います。

 

もしもクリックして、アコーディオンボタンが

あれ?ちゃんと動かない」と思った時は

コードの打ち変えを忘れていないか確認してみてくださいね。

 

アコーディオンボタンの色を変えたい

アコーディオンボタンの色を変えたい場合は

CSS」コードの方で調整します。

 

以下のコードの部分で変更ができます。

↓ コードは割愛しているので、同じ場所を探してくださいね^^;

/*ラベル*/
.ac-box label{
background: #f05689;←ラベルの色はここで変更「今はピンク」
color: #fff;←ラベルの文字の色はここで変更「今は白」
}

/*ラベルホバー時*/
.ac-box label:hover{
background: rgba( 240, 86, 137, 0.55 );←ラベルにマウスを乗せた時の色はここで変更
}

/*クリックで中身を表示*/
.ac-box input:checked ~ div{

background: #eaeaea;←背景の「グレー」はここで変更
}

/*表示内容の調整*/
.ac-box div p{

color: #777;←クリックで表示される文字の色はここで変更
}

 

rgba( 240, 86, 137 )の部分は「RGBのカラー数値」になります。

あなたが選んだ「#000000」のカラーコードを

こちらのサイトで変換できます。

 

RGBと16進数カラーコードの相互変換ツール

 

アコーディオンボタンのサイズを調整したい

アコーディオンボタンのサイズも調整可能です。

 

/*ラベル*/
.ac-box label{
max-width: 385px;←ボタンの幅はここで変更
height: 50px;←ボタンの高さはここで変更
border-radius: 8px;←ボタンの角の丸みはここで変更
}

 

アコーディオンボタンの高さを調整した場合は

タイトル」がボタンの中心にくるように

以下のコード部分のline-height: 50px;も同じ数値にしてください。

/*ラベル*/
.ac-box label{
line-height: 50px;

 

アコーディオンボタンのフォントサイズを変更したい

アコーディオンボタンのフォントサイズは

以下の部分で調整してください。

 

/*ラベル*/
.ac-box label{
font-size: 16px;←文字の大きさはここで変更
font-weight: bold;←文字の太さはここで変更
}

ただし、フォントサイズを大きくする場合

コードの都合により、2行に渡るタイトル表示にすると

レイアウトが崩れる可能性があるので

 

1行で収まるぐらいのタイトルの長さ

フォントサイズで調整してください^^;

 

アコーディオンボタンをクリックして

表示されるフォントを調整する場合は

以下のコードを変更してください。

 

/*表示内容の調整*/
.ac-box div p{

line-height: 23px;←行間はここで変更
font-size: 14px;←文字の大きさはここで変更
}

 

アコーディオンボタンのアイコンを変えたい

アコーディオンボタンのタイトル右にある

下向き矢印はWebアイコンフォントをしています。

 

これもあなたのお好みで変更可能です。

私の場合であれば…

↓ これを使用しています。

fontawesome

 

使用するコードはここに記述されているUnicode

fontawesome

 

このコードをCSSの

/*チェックのアイコン(↓)*/
.ac-box label:after{
color: #fff;←アイコンの色はここで変更(今は白)
font-family:"FontAwesome";
content:" \f078";←Font AwesomeのUnicode
}

/*チェックのアイコン(↑)*/
.ac-box input:checked ~ label::after {
color: #fff;←アイコンの色はここで変更(今は白)
font-family:"FontAwesome";
content:" \f077";←Font AwesomeのUnicode
}

「ピンク色」の文字部分にコピペします。

間違って「\(バックスラッシュ)」を消さないように

気をつけてくださいね。アイコンが表示されなくなります^^;

 

FontAwesomeのアイコンページはこちらです

※アイコンをクリックすると、各アイコンのコードが表示されます。

 

以上、独立型のアコーディオンボタンの

変更箇所は全てお伝えしました。

カスタマイズしたい方は…レッツ TRY !^^

 

アコーディオンボタン(セット型)の使い方

続いてセット型のアコーディオンボタンの使い方です。

カスタマイズ方法はほとんど

独立型」と似ているので、ポイントだけ簡単にお伝えしますね^^

 

アコーディオンボタンの段数を増やしたい場合

今回、あなたにご紹介するコピペだけで使える

セット型」のアコーディオンボタンは

2段組の仕様にしてありますが、段数を増やすこともできます。

 

アコーディオンボタンの段数を増やす時は

HTML」コードの以下の部分を

まるまるコピーすれば追加できます。

 

<div class="cp_actab"><input id="tab-1" name="tabs" type="checkbox" /><label for="tab-1">タイトル</label>
<div class="cp_actab-content">
<p>テキスト</p>
</div>
</div>

 

ただし、「独立型」のアコーディオンボタン同様

各段のコードが全て同じだとアコーディオンボタンとして

うまく機能しないので、一部コードの打ち変えが必要です。

 

コードを打変える場所は以下の2カ所

上記コードのピンク色の数字部分です。

 

例えば、3段にしたい場合…

<div class="cp_actab"><input id="tab-1" name="tabs" type="checkbox" /><label for="tab-1">タイトル</label>
<div class="cp_actab-content">
<p>テキスト</p>
</div>
</div>
<div class="cp_actab"><input id="tab-2" name="tabs" type="checkbox" /><label for="tab-2">タイトル</label>
<div class="cp_actab-content">
<p>テキスト</p>
</div>
</div>
<div class="cp_actab"><input id="tab-3" name="tabs" type="checkbox" /><label for="tab-3">タイトル</label>
<div class="cp_actab-content">
<p>テキスト</p>
</div>
</div>

このように、コードを3つ並べて、上から順番に1、2、3

数字を打ち変えていきます。

 

CSS」コードは共通なので、段数を増やしても特に触る必要はありません。

 

アコーディオンボタンをいろいろカスタマイズ

セット型」のアコーディオンボタンも調整可能な部分を全て

お伝えしておきますね。

 

カスタマイズできる部分だけ抜粋して記述しますので

触りたい部分があれば、各コードから探してみてください^^

カスタマイズはもちろん「CSS」コードの方を触ります。

 

/* アコーディオンB */
.cp_actab {
width: 100%;
←アコーディオンボタンの幅はここで変更
color: #fff;←文字の色はここで変更
}

.cp_actab label {
font-weight: bold;←文字の太さはここで変更
background: #f05689;←アコーディオンボタンの色はここで変更(今はピンク)
}

.cp_actab .cp_actab-content {
color: #333333;←クリックした時の文字の色はここで変更(今は白)
background: #eaeaea;←クリックした時の背景色はここで変更(今はグレー)
}

.cp_actab .cp_actab-content p {
font-size: 14px;←クリックで表示される文字の大きさはここで変更

/*チェックのアイコン(↓)*/
.cp_actab label:after{
color: #fff;←アイコンの色はここで変更(今は白)
font-family:"FontAwesome";
content:" \f078";←Font AwesomeのUnicode
}

/*チェックのアイコン(↑)*/
.cp_actab input:checked ~ label::after {
color: #fff;←アイコンの色はここで変更(今は白)
font-family:"FontAwesome";
content:" \f077";←Font AwesomeのUnicode
}

 

セット型」のアコーディオンボタンは

コンテンツ幅ぴったり収まるようにwidth: 100%;としています。

 

サイズを変えたい場合は…

width: 80%;などして短くするか

max-width: 325px;などと幅のサイズ自体を固定してしまう方法があります。

 

ただし、普通にwidth: 500px;などとした場合

スマホで見た時に、サイズオーバーして画面から切れてしまう場合があるので

ある程度、柔軟にサイズが対応できるようmax-widthというコードを使用しています。

 

コードに関して詳しく知りたい方はGoogle先生に聞きましょう(笑)

ちゃんと説明すると長くなるので、手抜きですいません^^;

 

アコーディオンボタンを手軽に使う方法

アコーディオンボタンのCSSコードを「追加CSS」にコピペできたら

HTML」コードをAddQuicktagのプラグインに登録しておくと

非常に便利です。わたしは登録しています。

 

例えば、セット型のアコーディオンボタンであれば

以下画像の❶の部分をAddQuicktagの上(開始タグ)に

❷の部分をAddQuicktagの下(終了タグ)にコピペして登録しておきます。

 

AddQuicktag

 

 

↓ こんな感じです。

AddQuicktag

 

そうすれば、記事を書いてる時にいつでも読み出せて

HTMLコードの一部分を書き換えるだけで使えるので

非常に便利です。

 

AddQuicktagの使い方に関しては、こちらの記事にも詳しく書いてあります。

ぜひ参考にしてみてください^^

AddQuicktagの使い方

 

まとめ:アコーディオン(開閉式)ボタンはとっても便利!

以上、アコーディオンボタンの実装方法から使い方

カスタマイズ方法まで解説してきましたが

いかがでしたでしょうか?

 

一見ややこしそうで、プロしか使えないイメージを持たれそうな

アコーディオンボタン」ですが

タネを明かしてしまえば、誰でも実装できる非常に便利なボタンです。

 

まだ、記事を書き始めで使い途が分からないという人も

いるかもしれませんが

 

少なくともこういうボタンがある

ということだけ知っておけば

いずれは使い途も見つかると思います。

 

ぜひあなたのブログにも実装して

訪問者の「ユーザビリティ」や「記事の読みやすさ」を

アップしてくださいね。

 

もしも設定でよく分からないことがあれば

いつでも気軽にご相談ください!

「ここあ」に問い合わせをする

 

最後までお読みいただきありがとうございました!

 

合わせて読みたい!

 

【コピペだけ!】CSSとHTMLだけでアコーディオン(開閉式)ボタンを実装する方法!

ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年アフィリエイトを始めて独立。デザイナーのスキルも生かし、アフィリエイトでストレスフリーな生活を楽しみながら、ネットビジネスの素晴らしさを一人でも多くの方に伝えたくこのブログを立ち上げました。