『わたブログ』 PointHeart’s magazines

映画・書籍・ゲーム・不動産などエンタメを紹介している雑誌ブログ

【簡単:HTMLのみ】クリック開閉式コンテンツ「アコーディオンパネル」の設置方法

 

 

f:id:PointHeart:20200601062712j:plain

「ネタバレ防止」に使える開閉コンテンツ。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」の属性が追加。これでデフォルトで開いた状態に設定可能。

 

対応ブラウザ

f:id:PointHeart:20200601054621p:plain

「iOS・Android」でも問題なく機能する。

読者の使用ブラウザのバージョンによっては、上手く機能しない場合がある。主な対応ブラウザは下記の通り。「IE」は完全非対応。2019年12月時点で「IE」のブラウザシェア率は「 12.13%」。「IE」からのアクセスを見込める場合は、実装しない方が無難。

使用のメリット・デメリット

メリット

CSSやJavaScript・jQueryの設定が不要なので、パソコンが苦手な方でも簡易に「開閉式コンテンツ」を使用した記事の作成が可能。

【はてなブログ】では、使用しているブログテーマによっては、ネットで紹介されているCSS等が上手く機能しない事がある。だが今回紹介した「開閉式コンテンツ:アコーディオンパネル」のHTMLは上手く機能する事が多いので、CSS設定が上手く行かない人でも簡単に使える。

デメリット

「IE」ブラウザは非対応のため、そこからの流入を狙えるブログでは使用に不向き。

よく見かけるアニメーション風の開閉アクションの実装は出来ない。そのため、ただ隠すためだけで、デザイン性の高さの追求には不向き。 

 

まとめ 

映画・漫画の紹介記事を書く人には、今回紹介した機能は使う機会も多いと思う。ネタバレを嫌う人や、ネタバレを希望する人、両者の需要を満たせるので、使う機会のある方は試しに使用してみてほしい。