W3C validatorのエラーの説明

FC2ブログで回避不可能なエラーや警告

指摘内容には エラー(error) と 注意・警告(warning) の二種類があります。より重大で修正必須なのが エラー の方で赤文字で示されます。警告の方は直せるならば直しなさい、という感じですかね。黄文字での指摘です。

FC2ブログの特性上回避不可能なエラー及び警告がありますのでまずそちらを説明しておきます。

広告関連JS、コメント関連JSの警告

WarningThe type attribute is unnecessary for JavaScript resources.

〝JavaScriptリソースのtype属性は不要です。〟

WarningThe charset attribute on the script element is obsolete.

〝スクリプト要素のcharset属性は廃止されました。〟

FC2が自動で挿入するスクリプトファイルにユーザーは手出しできません。例えばコメント時のクッキー情報を扱うJSは以下のような形で挿入されます。

<script type="text/javascript" charset="utf-8" src="//static.fc2.com/comment.js" defer></script>

unnecessary (あんねせさりぃ) = 不要
だから書かなくて良い、という指摘。そして
obsolete (あぶそりーと) = 廃止
既に規格外にされているのだから書かないように、という指摘です。

この unnecessary と obsolete の指摘はよく出てきますので英単語の意味として要暗記。

サムネイル画像のエラー

ErrorAn img element must have an alt attribute, except under certain conditions.

〝img要素は特定の条件下以外はalt属性が必須です。〟

特定条件というのはいくつかありますが、FC2ブログの記事として考えられるのは figcaptionが与えられているfigure要素内のimg要素 ぐらいかな、と思います。ですからみなさんが記事内に画像を通常掲載(img要素掲載)する場合には alt属性必須 です。

要約タイプテンプレートのトップページサムネイルや関連記事サムネイル、新着記事サムネイルなど、FC2ブログが用意している独自変数を利用せざるを得ない場合には alt属性が付きません ので即エラーです。ここはFC2ブログの独自変数内容の見直しを待つしかありません。でも繰り返しますがみなさんが記事内に画像を掲載する場合にはちゃんとalt属性を書いてください。

サンプル画像

alt属性あり

<img src="12345.jpg" alt="遊園地の回転木馬">

alt属性値が空白
(html5では装飾目的など特に意味を持たない場合には値の省略(空)が認められています)

<img src="12345.jpg" alt="">

▲alt属性はあるが意味不明
(エディターを利用して掲載した場合はファイル名称+拡張子がaltとして自動入力されますのでこのパターンに該当します)

<img src="12345.jpg" alt="12345.jpg">

alt属性なし

<img src="12345.jpg">

受信コメント内容のエラー

FC2ブログのコメント投稿欄は一部のhtmlを使えるようになっています。といってもサーバーサイドでhtmlに変換してもらう(php)という方式なのでFC2の仕様に沿った書き方が必須です。その記述を担うのが コメントツールバー です。コメントツールバーを使うと例えば文字を太くするツールをクリックすると [太字][/太字] こういった書式が出てきます。これがサーバーで変換されて <b></b> というhtmlタグとして処理されます。

ところがこのコメントツールバーの仕様はhtml4.01あるいはxhtmlなので既に廃止されている <font> などに変換されてしまいます。これはバックエンド処理なのでどうにもできません。受信コメント一覧もvalidを保ちたい場合にはコメントツールバーの掲載を避けるぐらいしか。ただし掲載せずともコメント投稿者が一定の書式、例えば赤字指定の [色:FF0000][/色] などを知っていれば直接打ち込むだけですので、完全に避けるのは不可能です。

よく見受けられるエラー

ErrorAttribute xxx not allowed on element yyy at this point.

〝この時点でyyy要素のxxx属性は許可されていません。〟

「この時点で (at this point)」と出てきた時は「もしかしたらここ以前に何かしらのミスがあるかもしれない」と疑ってみても良いと思います。絶対ではありませんが。
yyy要素に許可されていないxxx属性というのは例えば以下のようなもの。

<link src="https://xxx">

link要素はsrc属性を持てません。URLを記すのはhref属性です。こうしてそもそもが正しくない場合もありますし、先程書いたようにこの指摘以前に何かしらのエラーがあり、その影響を受けてしまっているパターンも非常に多いです。その中でもダントツなのは

• 記号やアルファベットが 全角 になっている
• ダブルクォーテーション " の欠損
• 左右ブラケット < > の欠損

2と3はエラーの指摘が行われますので気がつくのですが、1の「半角と全角の別」については指摘が行われません。htmlの世界は英語ですからもとより「全角」の概念が無いからです。全角英数字も 全角スペース も 文字 として解釈されてしまいます。

not allowed〜 at this point の文言を見つけ、要素と属性に不整合が見当たらない時にはその指摘以前の要素のアルファベットと記号をチェックすると良いと思います。

ErrorUnclosed element xxx.

〝xxx要素が閉じられていません。〟

終了タグ欠損ですね。以下はspan終了タグ欠損の例。

<span style="color: rgb(180,11,11);">あいうえお

ErrorEnd tag xxx seen, but there were open elements.

〝xxx要素の終了タグがありますが、(中に)開いたままの要素があります。〟

整合性のある(開始タグと終了タグの位置が正しい)要素の中に 入れ子 されている要素がまた閉じていない時に指摘されます。つまり終了タグの欠損です。以下は「p要素の終了タグがありますが、中のspan要素が開いたままです」状態の例。

<p>
  <span style="color: rgb(180,11,11);">あいうえお
</p>

終了タグ忘れは本当にやっかいで、W3Cのバリデータというのは ページ単位 での検証になりますので自身が書いた記事内容だけではなくテンプレート内容も絡んできますので初心者の方にとっては原因特定がとても難しいんですね。なのでテンプレート内容は常にvalid(正当)な状態を保っておくことも大事です。記事内容がテンプレートのレイアウトまでも狂わせてしまう原因のワースト1がこの終了タグ忘れ(閉じ忘れ)です。

ErrorNo space between attributes.

〝属性間のスペースがありません。〟

属性と属性の間には必ず半角スペースがひとつ必要です。

属性間スペース無し

<img src="12345.jpg"class="test"alt="代替テキスト">

属性間スペース有り

<img src="12345.jpg" class="test" alt="代替テキスト">

ErrorQuote " in attribute name. Probable cause: Matching quote missing somewhere earlier.

〝属性名にクォートの " が指定されています。恐らくここ以前のどこかでクォートのマッチングミスがあります。〟

ここ以前のどこかでマッチングミス。まさしく ダブルクォーテーション欠損 のことを言っています。つまり「先行要素のミスがたぶんここでも影響していますよ」という親切な指摘です。この指摘が出てきた時は迷わずダブルクォーテーションのチェックです。

先行要素のダブルクォーテーション欠損が後続要素に影響する例 (center;")

<div style="text-align: center;>
  <span style="color: rgb(180,11,11);">あいうえお</span>
</div>

ダブルクォーテーション欠損のミスは 後々まで長く尾を引きエラーを量産する最悪なミス と言えるかと思います。

ErrorCSS: Parse Error.

〝CSSのパースエラーです。〟

この指摘が出た場合十中八九前の項の「先行要素のダブルクォーテーション欠損」です。100%とは言いませんがFC2ブログで見かける場合90%はこれです。またはダブルクォーテーションが書いてあっても 全角になっている かのいずれか。

ErrorStray end tag xxx.

〝xxx要素の終了タグがはぐれています〟

こちらは開始タグと終了タグの「数」の不整合ではなく「位置」の不整合です。以下はspan終了タグが本来あるべきdiv終了タグ直前ではなく、間違った位置であるdiv終了タグ直後に書かれている例。

<div style="text-align: center;">
  <span style="color: rgb(180,11,11);">あいうえお
</div>
</span>

ErrorDuplicate ID xxx.

〝ID名のxxxが重複しています〟

WarningThe first occurrence of ID xxx was here.

〝ID名xxxが最初に発生しているのはここです〟

IDというのは同ページ内に一つしか存在してはいけませんので、複数あればエラーです。「最初に発生〜 ここです」のwarningは重複エラー指摘を補足しています。なにかしらの装飾をCSSに追加する場合、利用が1箇所のみと確定できる場合以外はIDではなくclassを利用するようにしましょう。というか初心者の方は常にclassを用いるようにするが吉。

ID使用

<span id="xxx">あいうえお</span>

<span id="xxx">かきくけこ</span>

class使用

<span class="xxx">あいうえお</span>

<span class="xxx">かきくけこ</span>

まとめ

記事内容で指摘されるエラーはこのぐらいではないかと思います。
私もよくやるのですが、過去記事内容のhtmlコピペ には気をつけてください。記号を拾い忘れていたり(コピーミス)、URLなど値の入れ替えをする際にうっかり記号を消してしまったり、属性を追加(クラス属性など)の際にスペースを入れ忘れたり… などなど。ともかくhtmlというのは記号一つ間違えただけでも構文としては崩壊ですので最新の注意が必要です。とはいえ人間ですからミスして当たり前。そのためにバリデータを活用するんですYO (o'ω')ﾉ

ブログ作成に役立つブックマークレット

FC2ブログで記事を書く際に 役立つかもしれない、という条件付きです。 特に 旧投稿画面を利用し、htmlを使うことが多い 方向けです。 他の方が製作したものについてはここでの二次配布は致しません。ご紹介するだけです。 リンクを掲載しますので直接赴き、提供者様の規約・ルールに則ってご利用ください。...

vanillaice000.blog.fc2.com

最後のTipsです。受信コメント数の多いページでバリデーションにかけるとコメント内のエラーがたくさん出てきて作業の邪魔になることがあります。その場合は記事編集画面を一旦開き、プレビュー画面でバリデートされると受信コメントが除外されます。プレビュー画面のバリデート結果ではtime要素のBad valueエラーの指摘が出ますが、プレビュー画面では記事投稿日・記事編集日の日付が取得されないために発生する一時的なものなので気にする必要はありません(実際の投稿済画面でこのエラーは消えます)