アコーディオンにTwitter埋め込みをすると、閉じててもクリックできしまう問題を解消する方法

内容が長い記事などでは、Shortcode Ultimateのスポイラーやアコーディオン機能の使用が、ユーザビリティの向上に役立ちます。

SEOでもユーザー行動は重視されており、SEO対策としても有効です。

実際、私も頻繁に利用するのですが、Twitter埋め込みをアコーディオン内で行うと、スポイラーを閉じてても埋め込んだツイートのクリック可能要素(ツイートやプロフィールへのリンク等)をクリックできてしまうのです。

これではユーザビリティはむしろ下がってしまうため、対策を紹介します。

アコーディオンに入れたTwitterをクリックできないようにする

結論、アコーディオンを閉じているときは、Twitter(というかiframe)のheightを0にすることで解決できました。

height0指定というと、SEO面で隠しテキスト扱いされないの?と疑問も生まれますが、Shortcode Ultimateがこの機能を使っているので問題ありません。

解決方法:CSSにコピペするだけ

以下のコードをstyle.cssの一番最後にでもコピペしてもらえれば解決します。

かんたんにコードを解説します。

.su-spoiler-closed

スポイラーが閉じているときに付与されているclassです。開くと消えます。

iframeは、埋め込みに使われるタグですね。Twitterの他、YouTubeなど埋め込んでも適用されます。

height: 0 !important;

高さを0に指定します。

埋め込んだツイートはそれぞれheightが指定されているので、!importantでそれらを上書きします。

まとめ

アコーディオンの仕組みを理解する必要があったので少し手間取りましたが、結果シンプルなコードで解決できたので良かったです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です