XserverXserverSupportDomainDomainSupportMany-KingMany-King Support

カテゴリー:「ウェブプログラミング」に関するアーカイブ

本サイトで利用しているウェブプログラミングの知識と実践に関する投稿記事を総括。

header.php をより完璧に!

より完璧!?な XHTML を目指して、「Another HTML-lint gateway」で抽出された問題(投稿記事、「より厳しい XHTML チェック」に詳細があります)を解決する必要がありますが、まずは header.php に関連する問題を解決します。

1. <html> における「lang 属性」と「xml:lang 属性」
これは、以外に簡単でした。以下のコードを修正します。
修正前

<html xmlns=”http://www.w3.org/1999/xhtml”>

修正後

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”ja” lang=”ja”>

2. <head>〜</head> 内の修正
指摘されている mailto とナヴィゲーション用のリンクの下記のコードをスタイルシートを指定するコードの直前に挿入しました。

<link rel=”index” href=”/index.php” />
<link rev=”made” href=”mailto:webmaster@nakui.biz” />

上記 2 点を修正するだけで、header.php に関する問題点が解決できました。投稿記事、「XHTML における「XML 宣言」の方法」と合わせて、ほぼ完璧!?な header.php に変身!

XHTML における「XML 宣言」の方法

XHTML 1.0 では、XML 宣言することが強く求められる!という事は良く知られているようですが、Internet Explorer 6.0 (IE6.0) が、それをカバーしていないため(エラーになったり、ページ表示できなかったり・・・)、宣言することを避けているサイトが結構ありますよね!

しかし、PHP が稼動するレンタルサーバでは、これを簡単に解決してくれます。詳細は、「BirDesign::IE6でのXML宣言の問題と回避方法」という投稿記事に示されています。

本サイトでも上記の投稿記事を参考に header.php の最上位行に下記のコードを挿入しました。

<?php
$ua = $_SERVER['HTTP_USER_AGENT'];
if (!(ereg(”Windows”,$ua) && ereg(”MSIE”,$ua)) || ereg(”MSIE 7″,$ua)) {echo ‘<?xml version=”1.0″ encoding=”‘ .get_settings(’blog_charset’) .’”?>’ . “\n”;
}
?>

上記のコード中、<?php と ?>の前後に、余計なスペース・改行などは入れないことが注意点くらいで、単純に挿入するだけで、XHTML 1.0 では、XML 宣言することができるようになります。上記のコードは、訪問者のブラウザが Windows の IE 以外だった場合に、XML宣言をするようになっているそうです。

より厳しい XHTML チェック

本サイトでは、ウェブ標準に拘って、XHTML + CSS をできるだけ正確に表記したいと考えているのですが、取り急ぎ W3C が提供している「W3C Markup Validation Service 」において “Valid XHTML Traditional” を目指しています。

しかし、一度クリアすると更なる上を目指したくなり、ウェブサイトを運営されている方なら誰でも!?ご存知の「Another HTML-lint gateway」での採点を実施したくなりました。

XHTML をチェックすることでは、最も厳格なものである、と個人的には信じていますが・・・そして早速採点すると、下記のような評価で得点は 85 点!Line とは、ページの XHTML の Line を示しているので無視するとしても結構ありますね~修正すべき行が・・・

  1. line 0: (文書の先頭に BOM が含まれています。)
  2. 【解決策】line 1: XHTML1.0 では XML宣言をすることが強く求められています。
  3. 【解決策】line 2: <html> には lang 属性を指定するようにしましょう。
  4. 【解決策】line 2: <html> には xml:lang 属性を指定するようにしましょう。
  5. 【解決策】line 19: (<head>〜</head> 内に <link rev=”made” href=”mailto:〜” /> が含まれていません。)
  6. 【解決策】line 19: (<head>〜</head> 内に <link rel=”next” href=”〜” /> などのナヴィゲーション用のリンクが含まれていません。)
  7. 【解決】line 127: <form> には name 属性と id 属性の両方を指定するようにしましょう。【解決策は、name 属性を挿入するだけですが、属性は id 属性と同一である必要があります】
  8. 【解決策】line 136: <div> と </div> の間が空です。
  9. line 174: (<td> と </td> の間に空白文字しか含まれていません。)
  10. line 175: (<td> と </td> の間に空白文字しか含まれていません。)
  11. line 176: (<td> と </td> の間に空白文字しか含まれていません。)
  12. line 182: (<td> と </td> の間に空白文字しか含まれていません。)
  13. line 195: (<td> と </td> の間に空白文字しか含まれていません。)
  14. line 204: (コメント中に `<` や `>` を書くと、いくつかのブラウザを混乱させることがあります。)
  15. 【解決策】line 219: <div> と </div> の間が空です。
  16. line 249: (コメント中に `<` や `>` を書くと、いくつかのブラウザを混乱させることがあります。)
  17. 【解決策】line 298: <div> と </div> の間が空です。
  18. line 322: (コメント中に `<` や `>` を書くと、いくつかのブラウザを混乱させることがあります。)
  19. 【解決策】line 341: <div> と </div> の間が空です。
  20. 【解決】line 348: <a> の href 属性の URI に不明のスキーム名 `feed` が指定されています。【解決策は、単純に feed を削除するだけ】
  21. 【解決】line 348: 空要素タグ <br> を閉じるときは `/>` に空白を先行させましょう。【解決策は、単純に指示に従うだけ】
  22. 【解決】line 350: <a> の href 属性の URI に不明のスキーム名 `feed` が指定されています。【解決策は、単純に feed を削除するだけ】
  23. 【解決】line 350: 空要素タグ <img> を閉じるときは `/>` に空白を先行させましょう。【解決策は、単純に指示に従うだけ】
  24. 【解決】line 350: (<img> には width と height 属性を指定するようにしましょう。) 【解決策は、単純に指示に従うだけ】
  25. 【解決】line 350: 空要素タグ <img> を閉じるときは `/>` に空白を先行させましょう。【解決策は、単純に指示に従うだけ】

上記の問題では、減点されない項目もありますが、一つずつ潰していきたいと思っています。ただ、上記の第 20 項から 25 項は、単純なミスですので即刻修正しました。

結構深刻な「文字コード」の問題

本サイトは、ファーストサーバをホスティングサービスとして利用させて頂いているのですが、先日の投稿記事、「ファーストサーバで文字化けを解決する方法」で公開した通り、標準の文字コードは、EUC-JP ですが、あえて本サイトでは、WordPress で推奨する UTF-8 の文字コードにしています。

ファーストサーバから解決策を伝授して頂いて、あっさり解決したと思っていたのですが。新規にページを作成して「公開」としても表示されません!サイドバーには、新規のページは表示されているのですが、クリックしても新規で作成したページが作成されませんでした。

なんとなく、リンク先のアドレスを確認すると、日本語が混在している!ページのタイトルを日本語にしているのですから当たり前なのですが、ひょっとして・・・

そこで、ページの「ページスラッグ」を英語表記に変更。するとあっさりと解決!ということは、Archive やカテゴリーに関しても同様の問題が発生する!?ところが、本サイトを立ち上げた時に、Archive に関しては、年月日と投稿記事 No のみでリンクを貼るようにしていたし、カテゴリーは、英語のみの表記に偶然調整していた!

これを知らずに、日本語で Archive リンクやカテゴリーを作成していたら・・・予想以上に文字コードの問題は大きそうですね!

RSS フィードを FeedBurner へ変更

RSS は、現在のウェブサイトには必須となりましたよね!当然、WordPress にも標準で RSS 2.0 を配信するソースはあるのですが、それを使って何かをやろうとすると、私のような未熟者にとっては負担が大きい!そこで、RSS フィードを FeedBurner へ置き換えました。

まずは、WordPress にある header.php の下記のコードを見つけます。テーマによっては、違うファイルかもしれません。特に RSS に関しては、複数の種類を配信している可能性もあるので注意が必要ですが。

<link rel=”alternate” type=”application/rss+xml”
title=”RSS 2.0″ href=”<?php bloginfo(’rss2_url’); ?>” />

上記のコードを下記のコードと置き換えます。下記のコードに関しては、改行をしないようにして下さいね!

<link rel=”alternate” type=”application/rss+xml”
title=”RSS” href=”http://feeds.feedburner.jp/ChasBar20″ />

これだけで、RSS の配信は、FeedBurner に置き換えることができますので、とっても簡単に高度な無料サービスを手に入れることができる!

Page 3 of 4«1234»