ここあです。
ず〜っと前から作りたかったものがやっと出来ました。
その名も…
「アコーディオンボタン〜！」
※ドラえもんのBGM欲しい（笑）
いきなりアコーディオンボタンとか言われても
「は〜？」ってなりますよね…＾＾；
ちゃんと説明します。
アコーディオンボタンというのは…
「百聞は一見に如かず！」
先に実物をお見せしますね。
あなたもおそらくどこかで見たことがあるであろう、こんなボタン。
今回はこの便利なアコーディオンボタンの作り方を説明します！＾＾
そう、これがアコーディオンボタンです。
見たい時にボタンをクリックすると、
隠れているテキストが「ニョキっ！」と現れるとても便利なボタン。
アコーディオンボタンは元々
スマホ用のメニュー表示を分かりやすくするために
開発されたものなんですが、使い途っていろいろあるんですね。
例えば、私の場合は
何でずっと前からこのアコーディオンボタンを
作りたかったのかと言うと…
カスタマイズ系の記事をいろいろと書いていると
HTMLやCSSコードを紹介する必要が出てきます。
短くてシンプルなコードであれば全然問題ありませんが
紹介するコードによってはかなりダラダラと
長くなってしまうことがあるんですね。
それがすごく嫌だったんです＾＾：
というのも…
興味がある人は気にならないかもしれないけど
それでも、コードだけ無駄に長いと
途中で読む気を無くしそうって私が思ってしまうので
おそらくそういう人も何割かいるのでは？と不安でした。
そうでないことを祈りたいのですが…＾＾；
だから、コードを記述するためのプラグインも
使ってはみましたが、使い勝手が非常に悪く断念しました。
なので、わざわざ使いにくいプラグインを入れておいても
SEO的にもよろしくないし、とりあえず削除して
いつかはちゃんと違うカタチで用意したいと思っていたんです。
で、気付けばいつの間にか時間が経っていた…
ということなんですね＾＾；
やっぱり、思い立ったが吉日。
もっと早く作っておけばわざわざ
ブログの記事を再編集する手間もなくなるのに…
そう思いつつも、他の記事を優先してしまい。
気付けば…
「はぁ〜」って感じでございます（笑）
それでも私はちゃんとこだわりたいので
残らず記事は全部再編集しますけど…＾＾
どれだけ時間がかかるか考えると少しゾっとしますが…w
記事もカスタマイズも計画的に！（教訓）
こだわりも大事にしていきましょう。
ほんと、優先順位を間違えると後が大変…＾＾；
ということで
私のどうでもいい話はこれぐらいにして…
アコーディオンボタンの
実装方法と使い方を詳しく解説していきます。
もしも「便利そうだし、使ってみたい！」と思った方は
ぜひ最後まで読んでくださいね＾＾
アコーディオン（開閉式）ボタンを実装する方法
あなたがアコーディオンボタンを実装する方法は
非常に簡単です。
コピペするだけ！＾＾
なので、初心者のあなたでも簡単に実装できます。
今回は、2種類のアコーディオンボタンをご紹介しますので
あなたが「使いやすそう！」と思った方を選んでくださいね。
カスタマイズ方法も紹介するので
チャンレジしたい方はぜひがんばってください＾＾
アコーディオンボタンCSSの記述先
これから、アコーディオンボタンを実装するための
HTMLとCSSコードをご紹介しますが
CSSコードは以下の場所に記述してください。
ダッシュボードメニューから
外観 → カスタマイズをクリック
以下、追加CSSの部分にコピペしましょう。
アコーディオンボタンの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>.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コードの記述はとても多いですが
このアコーディオンボタンを使うことで
記事をスッキリ見せることができます＾＾
私の狙いはまさにそこ。
訪問者の方も、記事が読みやすくなりますよね。
調整方法や、カスタマイズ方法については後述します。
独立型のアコーディオンボタンはこのように
コード表示にも使えますし、
もちろん、普通にテキストを流すこともできます。
「わっ！見つかっちゃった！（笑）」 ※画像も挿入できます！
アコーディオンボタン（並列型）
え？横並びって需要ある？
2019年6月3日追記しました。
このアコーディオンボタンの解説記事をアップしてから
しばらく放置していたのですが、意外や意外
「アコーディオン 横並び」というキーワードを目にすることが
増えてきたので需要がある無いは別にして、とりあえず
横並びのアコーディオンボタンも新たに追記致しました。
基本的な構造は、先のセット型が横並びになるように
手を加えただけなので、難しいことは特に何もしていません。
とは言え、まだまだ完璧なコードとは
言い難い代物なので、どうしても使いたい
という方のみご利用ください＾＾；
本当に需要があるかも分からないので
暫定的なコードです。
<div class="cp_linetab"><input id="tab-1" name="tabs" type="checkbox" /><label for="tab-1">タイトル</label><div class="cp_linetab-content"><p>テキスト</p></div></div><div class="cp_linetab"><input id="tab-2" name="tabs" type="checkbox" /> <label for="tab-2">タイトル</label><div class="cp_linetab-content"><p>テキスト</p></div></div>.cp_linetab {position: relative;overflow: hidden;width: 49%;margin: 0 3px;color: #fff;float:left;}.cp_linetab input {position: absolute;z-index: -1;opacity: 0;}.cp_linetab label {font-weight: bold;line-height: 3;position: relative;display: block;padding: 0 0 0 1em;cursor: pointer;margin: 0 0 1px 0;background: #53d1bd;border-radius:5px;}.cp_linetab .cp_linetab-content {overflow: hidden;max-height: 0;-webkit-transition: max-height 0.5s;transition: max-height 0.5s;color: #333333;background: #eaeaea;}.cp_linetab .cp_linetab-content p {margin: 1em;font-size: 14px;}.cp_linetab p{margin-bottom:0px;}.cp_linetab input:checked ~ .cp_linetab-content {max-height: 20em;}.cp_linetab label:after{color: #fff;font-family:"FontAwesome";content:" \f078";position: absolute;top: 0;right: 0;width: 2em;height: 3em;}.cp_linetab input:checked ~ label::after {color: #fff;font-family:"FontAwesome";content:" \f077";}
カスタマイズ方法に関しては、
独立型やセット型とそれほど大きく変わりませんので
もしもカスタマイズしたい場合は続いて
アコーディオンボタンの使い方とカスタマイズ方法をご確認ください。
ということで、順番に解説していきますね。
アコーディオンボタンの使い方とカスタマイズ方法
ご紹介したアコーディオンボタンは独立型も並列型も
ちょっとだけ使い方に工夫が必要です。
アコーディオンボタン（独立型）の使い方
まずは独立型のアコーディオンボタンの使い方です。
アコーディオンボタンを複数記事に使う場合
記事の中に1つだけ使う場合は特に問題ありません。
しかし、2つ以上使いたい場合は
HTMLコードを少しだけ触る必要があります。
<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コードの方で調整します。
以下のコードの部分で変更ができます。
↓ コードは割愛しているので、同じ場所を探してくださいね＾＾；
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カラーを使わなくても
rgba( 240, 86, 137 )の部分をあなたが好きな
#000000のカラーコードに置き換えても問題はありません。
アコーディオンボタンのサイズを調整したい
アコーディオンボタンのサイズも調整可能です。
max-width: 385px;←ボタンの幅はここで変更
height: 50px;←ボタンの高さはここで変更
border-radius: 8px;←ボタンの角の丸みはここで変更
}
アコーディオンボタンの高さを調整した場合は
タイトルがボタンの中心にくるように
以下のコード部分のline-height: 50px;も同じ数値にしてください。
line-height: 50px;
アコーディオンボタンのフォントサイズを変更したい
アコーディオンボタンのフォントサイズは
以下の部分で調整してください。
font-size: 16px;←文字の大きさはここで変更
font-weight: bold;←文字の太さはここで変更
}
ただし、フォントサイズを大きくする場合
コードの都合により、2行に渡るタイトル表示にすると
レイアウトが崩れる可能性があるので
1行で収まるぐらいのタイトルの長さ
フォントサイズで調整してください＾＾；
アコーディオンボタンをクリックして
表示されるフォントを調整する場合は
以下のコードを変更してください。
line-height: 23px;←行間はここで変更
font-size: 14px;←文字の大きさはここで変更
}
アコーディオンボタンのアイコンを変えたい
アコーディオンボタンのタイトル右にある
下向き矢印は、Webアイコンフォントである
Font Awesomeをしています。
これもあなたのお好みで変更可能です。
私の場合であれば…
↓ これを使用しています。
使用するコードはここに記述されているUnicode
このコードを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
}
ピンク色の文字部分にコピペします。
間違って「\（バックスラッシュ）」を消さないように
気をつけてくださいね。アイコンが表示されなくなります＾＾；
※アイコンをクリックすると、各アイコンのコードが表示されます。
以上、独立型のアコーディオンボタンの
変更箇所は全てお伝えしました。
カスタマイズしたい方は…「レッツ TRY !」＾＾
アコーディオンボタンをいろいろカスタマイズ
セット型のアコーディオンボタンも調整可能な部分を全て
お伝えしておきますね。
カスタマイズできる部分だけ抜粋して記述しますので
触りたい部分があれば、各コードから探してみてください＾＾
カスタマイズはもちろん、CSSコードの方を触ります。
.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先生に聞きましょう（笑）
ちゃんと説明すると長くなるので、手抜きですいません＾＾；
アコーディオンボタンの応用編アイテム
最後にアコーディオンボタンを使った応用編として
口コミサイトなどに使える画像付きコメントをご紹介致します。
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
もしも上記のようなアコーディオン機能付きの
画像付きコメントを作りたい場合は
こちらの記事で作り方を紹介していますので
興味があれば、併せて確認ください＾＾
タイトルは【STORK】カスタマイズ！としていますが
この画像付きコメントもテーマ関係なくHTMLとCSSだけで
実装することができます。
また、画像を外したり、テキストを変更することで
用途を変えて使うこともできますので
あなたのサイトに合うアコーディオン機能付きの
アイテム作りにぜひチャレンジしてみてくださいね。
アコーディオンボタンを手軽に使う方法
WordPressに慣れている方には言うまでもありませんが
アコーディオンボタンのCSSコードを追加CSSにコピペできたら
HTMLコードをAddQuicktagのプラグインに登録しておくと
非常に便利です。わたしは全て登録しています。
例えば、セット型のアコーディオンボタンであれば
以下画像の❶の部分をAddQuicktagの上（開始タグ）に
❷の部分をAddQuicktagの下（終了タグ）にコピペして登録しておきます。
↓ こんな感じです。
そうすれば、記事を書いてる時にいつでも読み出せて
HTMLコードの一部分を書き換えるだけで使えるので
非常に便利です。
AddQuicktagの使い方に関しては、こちらの記事にも詳しく書いてあります。
ぜひ参考にしてみてください＾＾
まとめ：アコーディオン（開閉式）ボタンはとっても便利！
以上、アコーディオンボタンの実装方法から使い方
カスタマイズ方法まで解説してきましたが
いかがでしたでしょうか？
一見ややこしそうで、プロしか使えないイメージを持たれそうな
アコーディオンボタンですが
タネを明かしてしまえば、誰でも実装できる非常に便利なボタンです。
まだ、記事を書き始めで使い途が分からないという人も
いるかもしれませんが
少なくともこういうボタンがあるということだけ知っておけば
いずれは使い途も見つかると思います。
ぜひあなたのブログにも実装して
訪問者のユーザビリティや記事の読みやすさを
アップしてくださいね。
最後までお読みいただきありがとうございました！
こんなテーマを待っていました！
30代男性 ★★★★★