アコーディオンメニューでブログの見た目をすっきり！サンプルコード付

ブログの見た目をキレイに整えたい
HTMLコードに慣れてきたのでレベルアップしたい
使う上でメリット･デメリットは？

クリックするとにゅーんと出てくるアコーディオンメニューをブログに取り入れてみませんか？

アコーディオンを使えば多くの情報をコンパクトにできて見た目もUPしますよ！

という事で、LPはアコーディオンメニューを15個使ってる近所です(´･ω･｀)

そんなに使って見た目や動作は大丈夫？と怖くなるかもしれませんが、しっかりコード管理すれば全く問題なく動作してくれます。

大変便利なコードなので興味がある方はぜひ使ってみてほしいと思います。

デザインカスタマイズは自己責任にてお願い致します。

心配な方は記事を複製して試してみる、バックアップを取っておくなどしてからチャレンジしてください。

うまく機能せずデザインが崩れた場合当方では責任を負いかねますのでご了承ください。

この記事は下記のブログを参考に作成させていただきました。

サンプルコードもたくさん載っているので是非ご覧ください。

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

https://affirepo.com/stork-customize-accordion/

ここあです。ず〜っと前から作りたかったものがやっと出来ました。その名も… 「アコーディオンボタン〜！」 ※ドラえもんのBGM欲しい（笑）いきなりアコーディオンボタンとか言われても「は〜？」ってなりますよね…＾＾；ちゃんと説明します。アコーディオンボタンというのは… 「百聞は一見に如かず！」

affirepo.com

参考外部サイト

この記事の目次

アコーディオンメニューのメリット
アコーディオンメニューのデメリット
アコーディオンメニューサンプルコード
コードの解説とQ&A

アコーディオンメニューのメリット

アコーディオンメニューにすることで得られるメリットを挙げてみましょう！

取り入れるかどうするかの判断にご活用ください。

多数の情報をスッキリ見せられる

アコーディオメニューは初期状態では中身を隠した状態で表示できます。

記事ページで言う続きを見るのような感じですね。

私はLP(トップページ)にアコーディオンメニューをたくさん使用して情報量を増やしつつスッキリさせています。

トップページの例

数増やし放題

私のブログのLPでは実に15個ものアコーディオンメニューを採用。

６個のカテゴリーで使い分けてそれぞれ独立した動きになるようコードを書いてます。

メニューを増やしたいと思えばコードをちょこっと変えるだけで半無限に個別で増殖できます。

デザインも多数

参考サイト様で紹介されていますが、私のLPの形以外にも多数のデザインがあります。

これもコードが分かれば自分オリジナルにもできますし、そういうのが分からないという場合は検索すると色々出てきます。

下記のサイトなどをご覧ください。

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

https://affirepo.com/stork-customize-accordion/

affirepo.com

参考外部サイト

アコーディオンメニューのデメリット

まぁ・・・どんなカスタマイズにも得手不得手がありますね。

もちろんこのアコーディオンメニューにもやることによるデメリットも考えないといけません。

目的にたどり着くまで手間が増える

アコーディオンメニューを使わず見せればワンクリックで済むところを一度メニューを開いてもらう必要が出てきます。

Q&A方式でしたら自分に必要な回答だけ見れるのでユーザービリティがあがるのですが、トップページに採用した場合は諸刃の剣でもあります。

アコーディオンメニューを開いて(１手間)
その中のリンクを開く(２手間)

とアコーディオンメニューがあることで一手間増えてしまいます。

私はその手間のデメリットよりもスッキリ見せつつ文字リンクを増やせるほうにメリットを感じたので導入しました。

メニュータイトルがより重要になる

みなさんも興味のないタイトルの記事を開いてみようとは思いませんよね？

アコーディオンメニューでもそれと同じで興味を惹かれない文言だと開いてもらえない可能性が出てきます。

もしかするとアコーディオンメニューの中にある記事タイトルは逸品なのに、アコーディオンで隠してしまったことで見てもらえない可能性も出てきます。

さらに普通の記事タイトルとは違い見た目的に文字数が超重要になります。

と言うのもアコーディオンメニュー幅は使う場所で変わるので、私のように３カラムで使うとかなり文字数に制限がありました。

コード設定がちょっとややこしい

ネット検索すると｢初心者でも簡単！｣みたいな謳い文句もありますよね？

で、やってみたけどよくわからない･･･ってパターン多くないですか？

HTMLコードとか無知だった私もそうですが、単純に1個のアコーディオンメニューを作るならコピペ+αなので確かにまだ簡単な方ですが・・・

どこに何が入るのか？
CSSはどこを弄ればいいのか？

などちょっと知識がいります。

さらに自分の首を絞めたのがアコーディオンメニューでやりたい形があって

複数設置して独立させる
その中にリンクを貼る

ということ。

これをやろうと思うと

どこからどこまでがアコーディオンメニューの中なのか？
この<div>構文はどこにかかっているのか？

などちょっと知識が必要でした。

と、言うことで私のブログのアコーディオンメニューコードを置いておきます。

同じ形で良ければコピペしてアレンジて欲しいと思います。

アコーディオンメニューサンプルコード

これから紹介するコードは・・・

タイトル

リンク
リンク

タイトル

リンク
リンク

という構成になっています。

アコーディオンメニューCSS

まずはCSSをコピペしてください。

後から色の変え方なども載せてますので最初は何も弄る必要ありません。

/* アコーディオン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";
}

これをWPの管理画面→外観→CSS編集を開いて貼り付けて下さい。

貼り付けたらいよいよ記事にアコーディオンメニューを導入します。

アコーディオンメニュー見本

まずはどんなアコーディオンメニューなのか？から。

実際に動くのでクリックしてみてね。

転職お悩み編

【コネ】を使うと転職に邪魔だった！苦労話

3年我慢はもう古い！第二新卒で転職！

面接・行動編

転職活動はエージェントを使うべし！利用方法まとめ

ブロガーは転職で武器になるか聞いてみた！

アコーディオンメニューHTML

アコーディオンメニューを使いたいところに以下のコードを貼り付けて下さい。

<div>
<div class="cp_actab"><input id="tab-1" name="tabs" type="checkbox" /><label for="tab-1">アコーディオンタイトル</label>
<div class="cp_actab-content">
<a href="記事URL">記事タイトル</a>

<a href="記事URL">記事タイトル</a>
</div>
</div>
<div class="cp_actab"><input id="tab-2" name="tabs" type="checkbox" /><label for="tab-2">アコーディオンタイトル</label>
<div class="cp_actab-content">
<a href="記事URL">記事タイトル</a>

<a href="記事URL">記事タイトル</a>
</div>
</div>
</div>

もちろん場所を変えて貼り付ければアコーディオンメニューを2個3個・・・と増やすことも簡単です。

ここに注意！

HTMLタブ　から　ビジュアルタブに戻すとアコーディオンメニューがうまく働かないことがあります。

そこでもう一度HTMLを覗くと・・・

<div class="cp_actab">

<input id="tab-1" name="tabs" type="checkbox" /><label for="tab-1">アコーディオンタイトル</label>
<div class="cp_actab-content">

<a href="記事URL">記事タイトル</a>

<a href="記事URL">記事タイトル</a>
</div>
</div>

こんな感じで“cp actab”の次が改行されてしまっていませんか？

こうなるとアコーディオンメニューは開きませんので、HTMLタブで改行を削除してビジュアルタブに戻さずにそのまま保存してください。

動作が気になる場合はHTMLタブのままプレビュー画面に行ってもらうと改行されません。

どうやらビジュアルタブに戻ると勝手に改行が入るみたいです・・・。

コードの解説とQ&A

コードの簡単な解説と、実際に私が直面したこういう時どうしたら？と言うQ&Aを載せておきます。

コードの解説

先ほどの見本でも分かるように書きましたが一応補足までに。

ここがポイント！

【アコーディオンタイトル】→ご自身で好きなタイトルを付けて下さい
【記事URL】→ご自身のブログからコピペしてください
【記事タイトル】→ご自身のブログからコピペか新しくつけて下さい

私のブログの例で行くとこんな感じのコードとなります。

<div>
<div class="cp_actab"><input id="tab-1" name="tabs" type="checkbox" /><label for="tab-1">これは役立つ！便利グッズ！</label>
<div class="cp_actab-content">
<a href="https://kinjyo8835.com/colantotte-buy">肩こり解消のお手軽ネックレス【コラントッテ】</a>

<a href="https://kinjyo8835.com/design-book">デザインの勉強にこの1冊！【配色アイディア手帖】</a>
</div>
</div>
</div>

Q.2個じゃ足りない！増やしたい！

A.下記の【ここに入れる】と言う部分に以下のアコーディオンメニューコードを入れて下さい。

入れる部分はココ！

<div>
<div class="cp_actab"><input id="tab-1" name="tabs" type="checkbox" /><label for="tab-1">アコーディオンタイトル</label>
<div class="cp_actab-content">

<a href="記事URL">記事タイトル</a>

<a href="記事URL">記事タイトル</a>
</div>
</div>
<div class="cp_actab"><input id="tab-2" name="tabs" type="checkbox" /><label for="tab-2">アコーディオンタイトル</label>
<div class="cp_actab-content">
<a href="記事URL">記事タイトル</a>

<a href="記事URL">記事タイトル</a>
</div>
</div>
【ここに入れる】
</div>

入れるコードはコレ！

<div class="cp_actab"><input id="tab-1" name="tabs" type="checkbox" /><label for="tab-1">アコーディオンタイトル</label>
<div class="cp_actab-content">
<a href="記事URL">記事タイトル</a>

<a href="記事URL">記事タイトル</a>
</div>
</div>

その際<input id=”tab-1″ name=”tabs” type=”checkbox” /><label for=”tab-1″>と書いてある部分の数字を他のアコーディオンメニューと重ならないように書き換えて下さい。

今回の例で言えば「3」とか「4」とか・・・。

無難に数字を大きくしていく方が管理しやすいと思います。

Q.色を変えたいんだけど

A.CSSを弄れば色が変えられます。知識のある人ならデザインも弄れますが・・・しなくても十分整ってます。

上で登場したCSSのコードをちょこっと弄りましょう

/* アコーディオン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";
}

色を変える時はここ！