Bloggerでアコーディオン機能

▲▼だったり[+][-]だったりするボタンを付けて、ページの一部分を伸縮させる機能「アコーディオン」をBloggerにつけてみました。

Bloggerのテンプレートに沿って説明していきますが、CSSとJavaScriptで構成されていますのでBlogger以外のページにも利用できます。

後で知ったのですが、Bloggerに限らずタグだけで簡単に実現できるそうです。

MDN Web Docs：「details」によれば、タグだけでアコーディオンの実装ができるそうです。open属性を付与したり、外すことで状態も変えられます。

<details open>
  <summary>常に表示される項目</summary>
 状況により隠れる項目
</details>

バックアップ

今回はテーマのHTMLを編集します。テーマのHTMLを編集すると現在のページが崩れたりすることもあります。事前にバックアップをとっておきましょう。

バックアップは「メニュー」→「テーマ」→「バックアップ」と進みます。するとバックアップデータのダウンロードが始まります。元に戻す際は、同じメニューから「元に戻す」を選択した後バックアップでダウンロードしたファイルを指定します。

ここでバックアップされるのは「テーマ」だけでブログ本文はバックアップされません。もし本文もバックアップしたい場合は、「設定」から「コンテンツのバックアップ」を選択してください。

バックアップができたら「HTMLを編集」に進みます。

HTML

アコーディオンを作成する部分を、アコーディオンヘッダ(閉じた時にも残る部分)とアコーディオンボディ（閉じた際に消える部分)に分けBlogger のテーマのHTMLに追加記述します。この時、消えている時(初期)、表示された時の装飾用にクラスを定義します。またアコーディオンヘッダにはクリック時に実行するJavaScript関数を設定しておきます。

クラスは次の4種で構成されます。

accordion-head
閉じたときに残す部分につけるクラスです
accordion-head-show
アコーディオンボディの部分が表示されている時にアコーディオンヘッダに付与するクラスです
accordion-body
閉じたときに隠れる部分につけるクラスです
accordion-body-show
表示の時にアコーディオンボディに付与されるクラスです

これらを次のように定義します。

accordion-head
閉じたときに残す部分を挿入します。タグは何でもいいと思いますが、ここではh3にしました。このonclickイベントにアコーディオンの開閉をするためのJavaScriptの関数accordionFunction();を設定しています。この関数については後から説明します。

理由は関数の説明の際にしますが、このタグはaccordion-bodyと同じ階層で、直前に記述するようにしてください。
accordion-head-show
初期状態を表示にしたい場合は、accordion-headと一緒に記述してください。
accordion-body
divタグ等でアコーディオンで開閉させたい部分を囲んでください
accordion-body-show
accordion-head-show同様に、初期状態を表示にしたい場合はaccordion-bodyと一緒に記述してください。

図式化すると次のようになります。

コンテンツ

<h3 class="accordion-head" onclick="accordionFunction();" >accordion-bodyと同じ階層でその直前に入れます</h3>

<div class="accordion-body">アコーディオンにしたい要素を包みます

<div>アコーディオンにしたい要素</div>

</div>

このHTMLの記述時にBloggerの独自タグに戸惑うかもしれません。 BloggerのテーマのHTML(XML)の構造はおおむね次のようになっています。目的のガジェット(ブログの投稿や自己紹介などの単位)に存在するidの値がmainとなっているincludableを見つけてたどっていくと理解しやすいと思います。

b:section(Bloggerレイアウト枠)

b:wedget(Bloggerガジェット枠)

b:wedget-settings(Bloggerガジェット設定枠)

b:wedget-setting(Bloggerガジェット設定)

b:wedget-setting

b:includable(Bloggerにおける関数) id=main
idが関数名として扱われます。idがmainとなっているincludable(最初に呼び出されるメイン関数)がガジェット毎に必ず1つあります。

処理やb:include(関数呼び出し)

b:includable id=任意
id=main以外のincludableの有無は任意で、その呼び出しにはb:inculdeタグが使われます。b:includeタグの中ではname属性で呼び出す関数名を指定しています。

処理やb:include(関数呼び出し)

b:wedget b:section内にガジェットは複数存在できます。

CSS

CSSは次のようになります。accordion-headクラスに対して疑似要素のbefore設定しています。ここではcontent△と全角スペースを設定しています。環境によってはそのまま「content: "△　"」としても機能しますが、BloggerのテーマのHTMLに記述する場合には「content : "¥025bd¥03000";」としてください。¥0に続けて、16進数で数値文字参照のコードを設定しています。(ここでの"はBloggerのテーマHTML内でデコードされて、実際のページ表示時には"になるものです。)

非表示にする際はtransitionを使ってheight、line-height、opacityを0に、overflowをhiddenに設定しています。また△はtransformのrotateXで逆さにしています。これを実現するために「display:inline-block」の記述が必要です。これらの手法は「矢印付きアコーディオンをJavascriptのみで実装」の記事を参考にさせていただきました。ありがとうございました。

CSS


.accordion-head::before {
   content:"\025bd\03000"; 
   display: inline-block;
}
.accordion-head-show::before {
  transform: rotateX(180deg);
}
.accordion-body {
  line-height: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition-duration: 0.5s;
}
.accordion-body-show {
  line-height: normal;
  height: auto;
  opacity: 1;
  transition-duration: 0.5s;
}

JavaScript

JavaScriptはbodyタグを閉じる前あたりに、scriptタグで囲んで記述してください。同じ階層の次の要素を返すnextElementSiblingを使って、開閉する要素を見つけています。このためにアコーディオンヘッダ部のすぐ後にアコーディオンボディ部がくるように記述しました。

event.targetでアコーディオンヘッダ部を受け取って次の要素をnextElementSiblingで取得、そのあとにアコーディオンボディとアコーディオンヘッダに表示状態を意味するクラスaccordion-body-showを付与したり削除します。classList.toggle関数は存在時は削除、未存在時には追加してくれる便利なものです。

HTML(Script)

<script>
let accordionFunction =()=> {
  let elH=event.target;
  let elB=elP.nextElementSibling;
  elB.classList.toggle('accordion-body-show');
  elH.classList.toggle('accordion-head-show');
}
</script>

投稿:2021/12/11 - 更新:

Bloggerでアコーディオン機能

バックアップ

HTML

CSS

JavaScript

close close

投稿:2021/12/11 - 更新:　