Welcome to my blog

vanillaice (Akira)

vanillaice (Akira)

W3C validation だぶりゅ すりー しー ばりでーしょん

についてです (´・ω・`)

W3Cとは
・ web上の各種技術を統括し標準化する非営利団体 アジアのホストは慶應義塾

W3C validation とは
・ 記述したソースコードの整合性を検査するためのwebサービス

Markup Validation Service

validate ばりでーと
・ 有効化する 正確にする 確認確証する(動詞)

validation ばりでーしょん
・ 有効化 正確(名詞)

valid ばりっど
・ 有効である様 正確である様(形容詞)

テンプレートはvalidに作ろう ということで努力しております
FC2仕様上どうにもならないことは省きます
例えばFC2でサムネイルを取得すると alt属性が抜けている といった問題があります
他にも
FC2エディターはまだHTML5に準拠するタグ構成をしてくれません
HTML4.01対応です
HTML5では多くの属性が廃止になりましたが
いまだそれら廃止タグを利用して装飾を行っています(いずれ修正されると思われます)

以上を踏まえまして
FC2仕様を除く テンプレート内容については基本的にvalid (validation満点) で製作しています

-------------

「validationクリア とテンプレ仕様にあるのに 何故か常にエラー判定を受けてしまいます」

ということでご相談頂きまして
その原因と対策でございます ( ゚Д゚)ノ

まず テンプレ構成自体がvalidであるにも関わらず エラーが出てしまう
これは記事内になんらかの原因があるわけです
テンプレートがvalidでも
導入しているプラグイン(通常 サイドバーに置かれる内容)が正確でなければエラーが出ます
そのプラグイン関係も全てvalidである と仮定してお話を進めます

-----------

サンプル記事

Rehab/ Amy Winehouse

こちらは私の過去記事ですが
tableレイアウトを利用したガッツリ古臭い装飾ページです(笑)
ページ数増やすために他サイトから移植しまして ^^;

こちら現在はvalid判定です(クリックで拡大できます)

sample


3つ目に Warning が出ていますが
これはFC2のコメント用ツールバーのJSが古いよ という指摘です
エラー = 減点項目 不正確
ウォーニング = 注意・忠告 減点対象にはならない
この違いがあります
具体的忠告内容
・ script type の初期値は javascript なんだし language属性は廃止だから書く必要はない

これをわざとinvalidな状態に直して(?)みました
操作した箇所は5箇所です
結果こちら ↓

sample


前半省略していますが 実に 71ものエラーを吐いております((((笑)
5箇所変更で71 (´・ω・`)

説明してまいりますが 特殊な記号等扱いますので一部画像を用います

★ 71番の項目 ★

The frameborder attribute on the iframe element is obsolete.
「iframe(あいふれーむ)要素のframeborder(ふれーむ ぼーだー)属性は廃止やで」


HTMLの基本の形というのはこれです ↓(超重要)

属性(attribute)="値(value)"

frameborderがどこにあるかと言いますと動画貼り付けの際に出てきます
みなさんがYouTubeやらDailymotionやらの動画を記事に貼り付ける際
FC2エディターを利用されるか あるいは サイトから発行される「埋め込みコード」を利用されるかだと思います
これらのソース内に含まれてるんですね (´・ω・`)
サンプル記事を例にとると以下の通りです(Dailymotionから発行されるコード)

<iframe frameborder="0" width="480" height="270" src="//www.dailymotion.com/embed/video/x29tvl" allowfullscreen></iframe>


frameborder="0"
というのが入ってますよね
これはFC2からYouTubeアクセスして取得する自動生成タグにも含まれますので削除します
削除する際に気をつけるのは 属性同士の間に半角スペースがきちんと入っているかどうか
正しい形 ↓
<iframe width="480" height="270" src="//www.dailymotion.com/embed/video/x29tvl" allowfullscreen></iframe>

間違い ↓ (半角スペースなし)
<iframewidth="480" height="270" src="//www.dailymotion.com/embed/video/x29tvl" allowfullscreen></iframe>

間違い ↓ (半角スペースが多い)
<iframe  width="480" height="270" src="//www.dailymotion.com/embed/video/x29tvl" allowfullscreen></iframe>

間違い ↓ (全角スペース)
<iframe width="480" height="270" src="//www.dailymotion.com/embed/video/x29tvl" allowfullscreen></iframe>


frameborder削除でエラーが減ります


★ 72, 73の項目 ★

Bad value -アドレス- for attribute on href element a: illegal character in query: not a URL code point.
「a要素の href属性の値がおかしい クエリとして認められない ちゃんとしたURLになってないぢゃん!」


ご相談頂いたSさんに該当する要件はこちらですー (´・ω・`)
これは何かというと
Facebook 及び Twitter のシェア用URL生成に係る内容です
URL内には記事タイトルが含まれます
原因は記事のタイトルのつけ方なんです

エラータイトル

sample

エラーにならないタイトル

sample


これ半角スペースが原因です
web上の一部の記号というのは 誤認識を引き起こす可能性があります
有名なのは「円マーク(¥)がバックスラッシュ(\)」になってしまう
これよく知られてると思います
半角スペースも同じように 改行コードと混同されることがあるんですね
URLに改行が含まれたら機能を失ってしまいますので
実態文字は避けて エンティティ文字を使いなさい
ということをW3Cセンセは言ってるわけだ

エンティティ文字一覧

半角スペースだけでなく
&
なんかもそうです
ちょっとめんどうではありますが エラーを避けるためには
タイトルに記号が含まれる際には エンティティを利用する
これでまた71のうちの2つエラーが減ります


★ 残りのエラー ★

今3つ減りましたが 71-3=68ものエラーがまだ残っています
その原因

sample


赤丸部分にダブルクォーテーションがあります
二つの " の間に挟まれている文字列はアルファベットです
この形ってね 上に書いた
属性="値"
これなんです これと誤認識されてしまってる(される恐れがあることを示唆している)んですねー (´・ω・`)

このモッさい装飾内容 エディター内ではこんな感じです ↓

sample


もうHTMLタグだらけ
こんな状態のソースの中でうっかりダブルクォーテーションなどを実態文字のまま使ってしまうとトンデモなことになります(笑)
表示自体はちゃんとされるんですよ されるから問題なさそうですが
内部ではこういうこと(エラー)が起こっている というわけですね (´・ω・`)

スクショ見ていただくと " の間に日本語で
"嫌なこった"
って書いてありますよね
これはセーフなんです
何故ならば HTMLの「値」に日本語などの2バイト言語は存在しないからです
間に挟まれた文字列が ひらがな カタカナ 漢字 であった場合
それは属性値たりえない つまり ダブルクォーテーションもHTMLに絡む内容ではない
という認識になります
気をつけるべきは " の中身がアルファベットの時です

というわけで No, no, no を挟むダブルクォーテーションが原因で
以降は延々とエラーを吐き続けております(笑)
残りのエラー全て この2箇所(No, no, no の前と後ろ)を修正することで解消されます
要はこちらも前項目と同様エンティティ文字表記をすれば解決です


------------

記事内容が原因で.... というのはこんなところでしょうかね (´・ω・`)
いや もちろんまだたくさん原因はあるのだけれど
でもねー あんまりこだわりすぎるのもどうかと個人的には思います
そりゃソースが綺麗であるに越したことはないんだけれども
記事書くのに考えすぎるとつまらなかろう と思うんです (´・ω・`)
苦痛になってしまうのではないかと(笑)
木を見て森を見ずな状態になることだってあります
何事もほどほどが一番です はい (´・ω・`)
テンプレートの方はしっかりバリデーションかけていきますので
記事作成についてはあまり深く考えず楽しくやってもらえると良いかな と思いますです ^^;
関連記事

Comments 0

There are no comments yet.

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い