AMPでもエラーの出ないアコーディオン(開閉式)コンテンツを超簡単に実装する方法

AMPでもエラーの出ないアコーディオン(開閉式)コンテンツを超簡単に実装する方法

普段は隠しておいて、クリックすると内容が表示されるアコーディオン(開閉式)コンテンツ。何かの解説をする記事などで、ダラダラと内容が長くなってしまわないようにしつつ、別のページへ行かなくても詳細な解説が見られるようにできるので、使用している方も多いのではないでしょうか??

WordPressにはこれを実装できるプラグインがたくさんありますし、jQueryなどを使って自作することもできます。でも・・・AMPでは基本これらはNGなんです。これに対応するために、

などを使ってAMPのページではアコーディオン表示用のプラグインを動作しないようにした上で、前後をdivで囲んでCSSで非表示にするという苦肉の策を取られる方(私もその一人)も多いと思います。もちろんこれでエラーはなくなるのですが、せっかく作ったアコーディオン形式の詳細解説が表示できないなんてもったいない!なんとかできないの?というのが今回の方法へ至ったきっかけです。

AMPで対応できるアコーディオンコンテンツを作成するには「amp-accordion」というスクリプトが用意されているので、それを使えば表示は可能です。でもそうするとレスポンシブ表示(デスクトップと通常のモバイル表示)時はどうする?となってしまいますよね?別々にアコーディオンを作っておいて場合によって非表示にするということもできそうですが、重複した内容がページ内に記述されていて、それをCSSで非表示にして片方だけ表示・・・というのはアレ的にどうかと思います。

それならカスタムスクリプトに頼らず、かつそのままAMPでも使えるアコーディオンコンテンツは作れないの?といろいろ錯誤したところ最終的に超便利なタグを使って簡単に実装できることが分かりました。

これから紹介する方法はhtmlで出力されるページであればどんな場合でも使えますが、今回は私も使っているWordPressでの実装例として紹介します。

AMPでも使えるアコーディオンコンテンツの表示デモ

百聞は一見にしかず。今回の方法でこのような動作が実現できます。↓の「クリックしてちょ!」をクリックしてみてください。

クリックしてちょ!

クリックしたときに表示される内容。クリックしたときに表示される内容。クリックしたときに表示される内容。クリックしたときに表示される内容。クリックしたときに表示される内容。クリックしたときに表示される内容。クリックしたときに表示される内容。クリックしたときに表示される内容。クリックしたときに表示される内容。クリックしたときに表示される内容。

AMPでも使えるアコーディオンコンテンツの実装方法

これだけのことでどんだけ悩んだ??とできてしまえばなんてことないコードでした。

html(投稿本文などに挿入する)コード

使用するhtmlの例は以下になります

<div class="amp-hidden">
<details class="blue">
<summary>詳細情報</summary>
<div class="summary-blue">
<p>詳細な情報をここへ入力</p>
</div>
</details>
</div>

「詳細情報」の文字列がタイトルになります。

「<p>詳細な情報をここへ入力</p>」の部分が「詳細情報」をクリックしたときに表示されるコンテンツになります。

デザインコード

WordPressでは「外観」→「カスタマイズ」→「追加CSS」へ以下をコピペします。

※例は青色系の色になりますので好みで変更してください。

details.blue {
background: #100f70;
padding: 5px;
color: #fff;
border-radius: 5px;
}

.summary-blue {
background: #fff;
color: #000;
padding: 5px;
}

上の「details.blue」は全体の設定です。タイトルと開いたコンテンツ部分の背景が青になります。

そして直後に「.summary-blue」というdiv要素で背景を白に戻しています。

こうすることで、AMPでは許可されていないborder属性のように表示することができます。

また、全体を「amp-hidden」というdivタグで囲んでいるので、AMPで表示させたくない場合にはAMPのCSSへ

.amp-hidden{
display:none;
}

を追記すればパソコンおよびモバイル表示(レスポンシブ)のみ表示されるようになります。

何事も工夫ですネ。

使用する際の注意

この方法で最初非表示になっているコンテンツの中にショートコードなどを入れても私の環境ではきちんと表示されましたので特にWordPressで記事作成をしている方には有効な手段かと思います。

が、少々問題もあります。

今回のコードはhtml5で採用された「details」というhtmlタグを使用しています。このタグは現在一部のブラウザでは利用できないようですので、詳しくはこちらの対応表をご覧ください。

※シェアの大きなところでは2020年1月6日現在Microsoft EDGEとInternet Explorerは不可となっています。

スマートフォン・PCのブラウザシェア調査(2019年11月分)

によると両方で12%程度のシェアがあるようですので、どうするかは各自判断が必要でしょう。

サイトへの支援をお願いします

最後までお読みいただきありがとうございました。本記事の内容がお役に立てましたら幸いです。
今後もよりよい情報を提供し続けることができるよう、投げ銭によるサイトへの支援、およびSNSによる拡散をお願いします

作者:

☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。

年齢:40代 趣味/園芸・ペット・卓球