「ネタバレ防止」に使える開閉コンテンツ、通称「アコーディオンパネル」。
CSS・JavaScript・jQueryなどを設定する事で、デザイン性のあるパネルの設置も可能だが、それらの設定をせずとも記事本文で使用するHTMLのみのコピペで「簡単」に開閉式コンテンツ「アコーディオンパネル」が使える様にできる。
今回は、CSS・JavaScript・jQueryの面倒な設定をしないで「記事本文のHTMLへのコピペだけ」で使えるアコーディオンパネルの使い方を簡単解説。
使い方は簡単。本記事に記述されたパネルのHTMLコードを記事編集画面のHTML編集モードでコピぺするだけ。
開閉式コンテンツ：アコーディオンパネルとは？
映画・漫画の紹介ブログでよく見かける仕掛け。ユーザー側に一つの動作（クリック）を要求する事で、不本意に目にしてしまう重要な「ネタバレ」を「防止」するコンテンツ。
↓使用例↓
クリックで表示：【ネタバレあり】の感想
このようにネタバレを含めた感想を書く際に、読者に対して不意に「ネタバレ」を目にしてしまう事を防止できる。
一般的にはネタバレ防止を主目的とし、パネルは常に閉じた状態で使用される事が多いが、コードを追加する事で常に開いた状態にする事も可能。
デフォルトでパネルが閉じた状態のHTMLコード
クリックで表示：開閉式コンテンツ
文章の入力場所
コピペ用HTMLコード
<div><details>
<summary>クリックで表示：開閉式コンテンツ</summary>
<p>文章の入力場所</p>
</details></div>
上記のコードをHTML編集画面にコピペ、任意の文章を編集すれば、面倒なCSS等の設定をせず簡易の「アコーディオンパネル」を設置する事ができる。
ブログサイトによっては、上記のコードでもプレビュー等のアクションにより自動でコードがデフォルトで開いた状態に書き換えられてしまう事象がある。その場合は、以下のコードに変更すれば対処可能。
<div><details close>
<summary>クリックで表示：開閉式コンテンツ</summary>
<p>文章の入力場所</p>
</details></div>
こちらのコードは赤文字のcloseスペルを追加する事で、デフォルトで閉じている状態に固定されるため勝手に書き変わる現象を抑える事ができる。
それぞれのコードの意味
<details></details>アコーディオン対象の範囲。
<summary></summary>の間にアコーディオンパネルのタイトルを記入。
<p></p>の間の隠したい文章・画像を記載する。
<div></div>指定範囲を定義付けする。これがないと、プレビューと編集を行き来した際に、行が勝手に追加されていく事態を抑える。（はてなブログで事象確認済）
デフォルトでパネルが開いた状態のHTMLコード
クリックで表示：開閉式コンテンツ
クリックすると閉じる
HTMLコード
<div><details open>
<summary>クリックで表示：開閉式コンテンツ</summary>
<p>文章の入力場所</p>
</details></div>
デフォルトで閉じた状態との違いは赤字部分「open」の属性があるかないか。openコードを追加すれば、デフォルトで開いた状態に設定可能。
対応ブラウザ
「iOS・Android」でも問題なく機能する。
読者の使用ブラウザのバージョンによっては、上手く機能しない場合がある。
主な対応ブラウザは上記の通り。「IE」は完全非対応。2019年12月時点で「IE」のブラウザシェア率は「 12.13％」。「IE」からのアクセスを見込める場合は、実装しない方が無難。
2022年6月にIEのサービスは終了しているため、現在ではブラウザもバージョンを気にする必要なし。
使用のメリット・デメリット
メリット
CSSやJavaScript・jQueryの設定が不要なので、パソコンが苦手な方でも簡易に「開閉式コンテンツ」を使用した記事の作成が可能。
【はてなブログ】では、使用しているブログテーマによっては、ネットで紹介されているCSS等が上手く機能しない事があるが、今回紹介した「開閉式コンテンツ：アコーディオンパネル」のHTMLはCSSを使用しないタイプのため上手く機能する事が多い。
CSSの設定等がわからないけどパネルを使用したい人向けといえる。
デメリット
「IE」ブラウザは非対応のため、そこからの流入を狙えるブログでは使用に不向き。（2022年6月にIEサービスは終了のためこのデメリットは現在はない）
本記事のHTMLコードでは、他のブログでよく見かけるアニメーション風のおしゃれな開閉アクションの実装は出来ない。
デザイン性を重視したい場合には向かない。
まとめ
映画・漫画の紹介記事を書く人には、今回紹介した機能は使う機会も多いと思う。ネタバレを嫌う人や、ネタバレを希望する人、両者の需要を満たせるので、使う機会のある方は試しに使用してみてほしい。