美川の山里暮らし

還暦を過ぎ、岡山県南西部の山間地で文明の利器を活用しながら田舎生活を満喫したいと思っています日本蜜蜂の扇風行動の写真

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

Filed under: Home Page — タグ: HTML, SEO, ホームページ作成 — daii @ 9:19 PM

2010年12月9日

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

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

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

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

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

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

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

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

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

コメントを受け付けていません

Filed under: WordPress — タグ: HTML — 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 — タグ: HTML, PHP, SEO — daii @ 7:20 PM

2010年11月12日

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

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

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

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

Filed under: Home Page — タグ: CSS, HTML, SEO, ホームページ作成 — daii @ 6:49 PM

2010年6月24日

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

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

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

スタイルシートファイルは印刷用を別にする必要があると今まで思っていましたが、印刷用に変更した部分と、新たに追加した部分だけを次のように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;}
}

コメントを受け付けていません