Blogger Labo：【Blogger】アコーディオンメニューを追加してみた

ふとアコーディオンメニューに興味を持ったので これについて書こうと思う。

そもそもアコーディオンメニューとは、項目をクリック（またはタップ）すると登録しておいたメニューが伸びるように表示されるモノのことである（当ブログのサイドバーに追加済み）。

アコーディオンメニューを追加するメリットはサイドバーの空間を短縮できることである。当ブログのように特定のジャンルに特化した記事が多いとなかなか便利である。

しかし、この機能はBloggerに搭載されていないので自力で導入するしか無い。そこで、調べてみると以下のような記事が見つかった（以下は他サイト様の紹介です）。



某氏の猫空さんのアコーディオンメニュー


Blogger Labo：【Blogger】アコーディオンメニューを追加してみた

https://blog2.k05.biz/2016/04/blogger-accordion.html
（↑IEかEdgeでないとアクセスできない）

コードや導入方法に関しては某氏の猫空さんのサイトで詳しく説明されているので直接見に行って欲しい。当ブログに導入しているアコーディオンメニューは某氏の猫空さんのコードを使わせてもらっているのだが個人的には結構気に入っている。

導入方法は簡単ですでにBlogger仕様になっているので、HTML/JavaScriptガジェットにコードをコピペするだけですぐに使える。リンク内容やデザインに関しては自分で設定する必要があり、デザインについてはCSSの知識が多少必要になる。

Kinchan's Blogさんのアコーディオンメニュー


Blogger Labo：【Blogger】アコーディオンメニューを追加してみた

https://lmn-blog.com/jquery_accordion01/

Kinchan's Blogさんのアコーディオンメニューは、1階層と2階層のアコーディオンメニューとなっている。初心者には扱いづらい内容かもしれないが、多少HTMLがわかる人なら便利に使えると思われるモノになっている。

Bloggerに導入するには初心者にはやや難しく、以下のように設定する必要がある。

・1：HTML/JavaScriptガジェットを追加する
・2：HTMLコードをコピペする
・3：<style>と追記し、CSSコードをコピペして最後に</style>と追記する
・4：<script>と追記し、scriptコードをコピペして最後に</script>と追記する

とりあえず、上記のように設定するとBloggerに導入することはできる。ただし、読み込む際に若干レイアウトが崩れるのでそこがちょっと残念なところ（読み込んだ後は問題なし）。


いくつかのコードを試してみたが、上記のものがBloggerと相性が良い模様。某氏の猫空さんのコードはそもそもBloggerに特化して書かれたものなので、Bloggerに導入するのであればこれが一番使いやすいと思われる。また、コードを組み合わせたりしてオリジナリティを出してみても面白いと思った。