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

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エラー

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

<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fnelog.jp&amp;width=680&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;header=true&amp;stream=false&amp;show_border=true&amp;appId=569002053185714" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:680px; height:290px;" allowTransparency="true"></iframe>

これは、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”とクラスを追加しています。

こんな感じに。

<iframe class="facebook-like-box" src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fnelog.jp&amp;width=680&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;header=true&amp;stream=false&amp;show_border=true&amp;appId=569002053185714"></iframe>

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

scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:680px; height:290px;" allowTransparency="true"

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

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

/*Facebookライクボックスのiframeのスタイル*/
iframe.facebook-like-box{
  border: 0;
  background-color: transparent;
  overflow: hidden;
  width: 680px;/*ライクボックスの幅を指定*/
  height:290px;/*ライクボックスの高さを指定*/
}

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

まとめ

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

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

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

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

スポンサーリンク