美川の山里暮らし

還暦を過ぎ、岡山県南西部の山間地で文明の利器を活用しながら田舎生活を満喫したいと思っています エジソン君の絵

ホームページのほぼ全ページをHTML文法に忠実になるようにしました

Filed under: Home Page — タグ: , , — daii @ 9:19 PM
2010年12月9日

約1000ページあるホームページをXHTML1.0Transitionalの文法にできるだけ忠実になるようにしました。ほぼ95%以上はチェック完了しましたが、まだ不具合があるかも知れません。

HTML文法のチェック方法


Valid XHTML 1.0 Transitional

このマークがホームページの各ページの左上に付いています。ここをクリックすると、そのページのHTML文法が合格かどうかがわかります。全ページチェックができていませんが、いずれ100%のページで合格にしたいと思っています。
Another HTML-lint gateway

このサイトでは、ページを採点して、100点満点で何点かを表示してくれます。たぶん98点以上になっているはずです。これぐらいの点数が取れれば表示が変になることはまずありません。

なぜ文法に忠実になるようにする必要があるのでしょうか

インターネットエクスプローラー(IE)やFirefoxやOpera等のブラウザは、寛大でHTML文法に少しぐらい従っていなくてもそこそこの表示をします。でもあまりにもひどいHTMLだと、表示してくれないこともあります。また、思った通りの表示にならないこともあります。

100点を取るのが目的ではありませんが、常に文法に気をつけてウェブページを作成したいものです。シンプルで表示の速いページを作成する為にも必要なことだと思っています。そうすることが結局SEO対策にもなります。

よくある文法違反の事例

XHTMLでは<img src=”******” alt=”***” />のように、終了タグの無いものはこのように書く必要があります。このタグを閉じる前のスペースとスラッシュをよく忘れます。

ホームページに使っている画像が表示できない時、前記のalt=”***”のように、代換えのテキストで表示することになっています。これはよく忘れる例です。

楽天の広告等やアクセス解析のスクリプトで”&”という文字がよく出てきますが、この文字は”&amp;”と書いてやる必要があります。この違反はとても多く、この通りに書かなくても、通常は影響がないので、違反のまま使われている例が多いのです。

文法ではないのですが、機種依存文字(丸の付いた数字や、II IVのようなローマ数字)の使用もよくあります。自分では使わなくても掲示板で誰かが使う場合があります。半角カタカナの使用も指摘されます。

スポンサーリンク

WordPressの検索フォームがXHTML文法エラー(role属性を消す)

Filed under: WordPress — タグ: — daii @ 8:09 PM
2010年12月5日

WordPressのブログに検索フォームを付けると、XHTMLで文法エラーを指摘されます。(http://validator.w3.org/)でチェックするとすぐにわかります。

これはフォームタグにrole属性がついているからです。このrole属性は特に必要ないので除去します。WordPress3.02-jaでも付いています。バージョンアップをしたら、修正の必要があります。

検索フォームにあるrole=”search”は、どこにあるのかすぐにはわかりません。私はTextSSを使って探しました。

該当箇所はWordPress3.02-jaの場合、/wp-includes/general-template.phpの160行目付近にあります。

$form = '<form role=”search” method="get" id="searchform" action="' . home_url( '/' ) . '" >

となっているので、role=”search” を消します。これでエラーは無くなりました。いつもチェックして文法エラーは無くしておきたいものです。

英語ページをサブディレクトリに移動しました

Filed under: Home Page — タグ: , , — daii @ 7:20 PM
2010年11月12日

約1ヶ月前から英語ページをサブドメインで作り始めましたが、SEO上でサブドメインは不利なので、サブディレクトリに移動しました。アドレスは http://as76.net/en/ です。これは以前からあった英語ページと同じアドレスです。

約1ヶ月で約300ページできました。毎日平均10ページを翻訳したことになります。ウェブの翻訳を使うので簡単といえば簡単なのですが、うまく翻訳してくれない時は手間が掛かります。

また、英語のページから内容が同じ日本語ページに行けるようにリンクも付けました。その反対に、日本語のページを英語に翻訳したページがあれば、そのページに行けるようにもしました。未翻訳の場合は、自動的に英語にウェブ翻訳ができるようにしました。このリンクはメインページの最下行にあります。

これは、PHPを使って自動的に行なっています。まだ慣れないPHPですが、うまくいったと思っています。

スポンサーリンク

メインのスタイルシートに印刷用のスタイルシートを追加する方法

Filed under: Home Page — タグ: , , , — daii @ 6:49 PM
2010年6月24日

普通は変更した部分だけを印刷用のスタイルシートファイルに追加指定します

普通、印刷用スタイルシートは、印刷用に変更した部分と、新たに追加した部分だけで作ります。私の場合の印刷用スタイルシートは次のようになっていました。

#content {max-width: 1500px; margin: 0; padding-left:20px;}
#menu {display: none;}
.np {display: none;}

一行目で横幅を広めにしておいて、印刷で横幅が自動的に調整(横幅は元々フレキシブル)されるようにします。また、左側に余白を広めに取ります。二行目でサイドバーの印刷をやめて、三行目で広告等を印刷しないようにします。印刷のプレビューをしてみてください。こんなに簡単な設定でもうまく印刷されるはずです。

メインのCSSファイルに印刷用のスタイルシートを追加記入する

スタイルシートファイルは印刷用を別にする必要があると今まで思っていましたが、印刷用に変更した部分と、新たに追加した部分だけを次のようにmedia=”all”で指定したメインのスタ イルシートファイルの最後に追加すれば良いことがわかりました。

この方法を見つけたのは、グーグルウェブマスターツールを見ていたら「Labs」の「サイトのパフォーマンス」に「ページの読み込み時間の短縮方法」で、CSSファイルをまとめなさいと書いてあったのがヒントになったからです。

この方法だとprint.cssファイルが不要で、CSSファイルがひとつで良いことになります。この為、ファイルの読み込みが速くなり、SEOにもユーザーにも良いし、とても簡単で管理が楽になります。

@media print {
#content {max-width:1500px;margin:0;padding-left:20px;}
#menu {display: none;}
.np {display: none;}
}
Older Posts »

Powered by WordPress