Facebookライクボックスなどのiframeが原因でHTML5構文チェックツールでエラーが出るときの対処方法

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

HTML5構文チェックツールには、以下のようなものがあります。

今回は、これらのバリデーションツールで、以下のようなエラーが出たときの解消方法を紹介したいと思います。

Error: The scrolling attribute on the iframe element is obsolete. Use CSS instead.

Error: The frameborder attribute on the iframe element is obsolete. Use CSS instead.

Error: The allowtransparency attribute on the iframe element is obsolete. Use CSS instead.

photo by Jeremy Keith

スポンサーリンク
レクタングル(大)広告

エラーが出る原因

HTML5Validationエラー

エラーが出ている箇所のソースは以下のようになっています。

これは、Facebook Like Boxで作成したFacebookのライクボックスをなどを、サイトに挿入した時のタグです。

Facebookライクボックスとは、サイトなどでよく見かける以下のようなもののことです。

Facebookライクボックス例

このライクボックスを表示させるのに必要なタグを取得するとき、iframeで取得すると、冒頭に書いたようなエラーが出ます。

ライクボックスをiframeで取得

これにより出るエラーは以下。

Error: The scrolling attribute on the iframe element is obsolete. Use CSS instead.

iframe要素のscrolling属性は、古い時代遅れの書き方だから、代わりにCSSを使ってね。

scrolling属性は、フレームのスクロールを制御する属性です。

Error: The frameborder attribute on the iframe element is obsolete. Use CSS instead.

iframe要素のframeborder属性は、古い時代遅れの書き方だから、代わりにCSSを使ってね。

frameborder属性は、フレームの境界線を消す属性です。

Error: The allowtransparency attribute on the iframe element is obsolete. Use CSS instead.

iframe要素のallowtransparency属性は、古い時代遅れの書き方だから、代わりにCSSを使ってね。

allowtransparency属性は、インラインフレームの背景を透過するタグです。

結局のところ、エラーが出ているものはすべて、iframeの属性でいろいろ設定していることが、古い仕様のやり方なのでエラーが出ます。

これらを解決するには、書いてある通り、すべてCSSでスタイルを代用してやることで解消されます。

エラーの解消方法

このエラーの解消するには、まずiframeのscrolling、frameborder、allowtransparency属性の部分を削除してやります。そして、スタイルをCSSで記入するため、class=”facebook-like-box”とクラスを追加しています。

こんな感じに。

削除した部分は以下です。

style属性でエラーが出ているわけではありませんが、どうせCSSで設定するならまとめて行おうと、ついでに削除しました。

そして、消してしまったiframe属性の代わりとなるCSSを書き、削除したstyle属性の補間となるスタイルシートを以下のように記入して、スタイルシートファイルに貼り付けます。

WordPressの場合は、style.cssなどにです。

まとめ

このようにすることで、Facebook Like Boxで生成されたiframeの属性によるHTML5構文エラーを消すことができます。

ただ、今回のエラーは、Facebookライクボックスに限らず、iframeにscrolling、frameborder、allowtransparency属性が指定されていると表示されます。

ですので、ライクボックス以外のiframeでエラーが出たとしても、エラーで指摘されている属性部分を削除してやり、属性の代わりとなるCSSを指定してやれば、対処することができると思います。