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