ブログをカスタマイズしていく時あちこちのコードをいじりますが、ある程度適当なコードでもブラウザが自動補正して表示してくれます。
でも、自分の環境では思ったとおり反映されているけど、ブラウザやバージョンの違いで意図しないエラーが吐き出されていることもあります。
そんな時便利なのが、HTMLやCSSをチェックしてくれるサービス。カスタマイズしたあとは一度チェックしてみましょう。「え、こんなにひどいの…？」とショックを受けるかもしれません。
Headline
HTMLをチェックしてくれるツール
HTML4.01とXHTMLの文法チェック
まず「HTMLとXHTMLの違いは何ぞや」という話を簡単にご説明します。
HTMLは、標準的であり一般的な言語。最終バージョンは4.01です。これにXML要素を加えたものがXHTMLです。はい、簡単すぎてわけわかりませんね。
詳しくはこちらをご覧ください。
「HTML 4.01」と「XHTML 1.0」と「HTML5」の違いまとめ
具体的な記述方法の違いはこちら。
たとえば、HTMLでは改行が<br>ですが、XHTMLでは<br />とする（しかも小文字のみ）など細かな違いがいくつかあります。
自分のブログはどちらで記述されているのかわからない時は、ブログのソースを見てみましょう。一番上に記述があるので、そこで判別できます。Stingerを例に挙げるとこんな記述が。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML1.0ですね。さらに細かい仕様があるのですが、ここでは割愛します。
で、HTML4.01やXHTMLの記述が正しいかどうかチェックしたい場合は、こちらのツールを使います。
URL指定、コピペ、アップロードの3パターンが用意されています。自分のブログをすぐに確認したい時はURLを入力してチェックしてみましょう。
残念ながら当ブログはHTML5で作ってあるので、このツールは使えません。だれかのブログを勝手にチェックしてみます。さて、誰のブログでしょう…。
「-98点」となってしまいました。文法的にマズイ点がたくさんあったようです。冒頭でふれたようにブラウザは自動補正してくれるので、見た目で気づかないことが多いんですよね。
思ったとおり表示されていれば問題ないですが、エラーはできるだけ消したほうが致命的な問題を回避できます。表示速度にも若干影響する部分です。
HTML5の文法チェック
先述の「Another HTML-lint gateway」はHTML5に対応していません。
HTML5は4.01後の最新バージョンで、採用するブログが徐々に増えています。いくつかのタグが新たに加わり、廃止されたものもあります。
構造を明確にできるようになった、というのが特徴で、たとえばGoogle先生に『ここはヘッダーです！』『ここが記事本文です！』『ここは本文に直接関係ない部分です！』というのを伝えられます。
このHTML5はまだ正式勧告されていないのでツールもベータ版ですが、こちらでチェックできます。
先ほどと同じく、URL、コピペ、アップロードでチェックできます。
このブログをチェックしてみましょう。
あらら。頑張ります…
ちなみに文法チェックだけなので、「そこはarticleじゃなくてsectionだろーが！」なんていう構造上のツッコミはしてくれません。
CSSをチェックしてくれるツール
では、カスタマイズで最も多くいじるであろうCSSのチェックをしてみましょう。
HTMLと同じく、3パターンでチェックできます。詳しい説明は不要ですね。重大なエラーが見つかったらすぐ修正しましょう。
セミコロンがコロンだった、なんてイージーミスもよくあります。というより、「設定反映されねーぞ！？」という時はイージーミスのほうが多いかもしれません。
WordPressテーマをチェックするプラグイン
もしテーマを自作した場合は、WordPressが正しく動くかどうかをチェックしておきましょう。
「Theme-Check」というプラグインを使います。
テーマチェック時の注意点
プラグインをインストールしたら、「外観」に「Theme Check」という項目が追加されます。ここから実行するだけですが、その前にデバッグモードにしておかなければなりません。
wp-config.php 内にこんな記述があります。
define('WP_DEBUG', false);
「false」を「true」に書き換えて上書き保存。
define('WP_DEBUG', true);
これでデバッグモードに切り替わりました。テーマチェックをした後は、「false」に戻すのをお忘れなく！
まとめ
以上、HTMLとCSS、おまけでWordPressテーマチェックツールのご紹介でした。
たった一か所の記述ミスで重大なエラーが出ることもあるので、あちこちカスタマイズした後は必ずチェックする習慣をつけておきましょう。
チェックツールで100点になったら検索サイトで上位表示されやすい、ということはありません。でも、表示スピードに影響するほどのエラーならSEOにも関係してくるので注意してください。
それでは、また。