2011年01月19日
サイトをカスタマイズする時の思考と考査
最近、私の回りではサイトのカスタマイズがブームみたいになっていて
自分の個性をサイトデザインで出す事は非常に良い事だと思います。
しかーし!
見かけばかりのデザインにとらわれていてカスタマイズの本質を見ていない
自己満足のカスタマイズをしてる人が多いと思う。
HTMLやCSSの文字列を並べているだけで何が基準なのか分からないし
表示確認はどれだけのブラウザでやってるのって聞きたいです。
パーソナルユーズでブログをやってるのなら別に構わないと思うけど
アフィリエイトをやってる人がそんな事しいて良いのかなって感じます。
HTMLのタグはドキュメント宣言に準拠して書かなきゃいけないし
インターネットエクスプローラ(IE6)の対策もしなければならないんですょ。
ところで、ドキュメント宣言って何なの!って思う人が多いと思います。
ドキュメント宣言とは、HTMLの標準化をやってるW3Cという団体があり
HTMLのリファレンスを定めて勧告していて、そのリファレンスにはいくつかのタイプがあり
タイプによっては使えるタグが異なってきます。
分かりやすく言うと、使えるタグと使えなくなるタグなどを定めている規格のようなものです。
HTMLはページの構造を記述しているので、宣言したドキュメントタイプに準拠して
マークアップしなければ検索エンジンの評価も下がると思います。
例えばファンブログのドキュメント宣言は…
赤文字の部分、XHTML 1.0 Transitional を宣言しています。
このタイプは、HTML 4.01 からXHTMLへの移行時期のドキュメントタイプです。
従って厳格なXHTMLのリファレンスでなく、HTML 4.01+アルファみたいなリファレンスです。
例をあげると、XHTMLでは閉じタグがないタグは最後にスラッシュを
入れる事になってるのですが、無くても良いと…
非推奨になったタグを使っても表示してくれるなど結構曖昧なんです。
曖昧だからといって曖昧に済ませていてはいけません!
検索エンジンがどのように評価するのかアルゴリズムが解らないので
ドキュメント宣言通りのマークアップをするべきだと思います。
サイトをカスタマイズする場合、ドキュメントタイプに準拠したマークアップを
するように心がけて下さい。
HTMLを書く上で一番悩ませてくれるのが各ブラウザでの表示対策です。
その中でもインターネットエクスプローラに至っては、一番悩ませるブラウザです。
現在多くの人に使われているブラウザは…
■ インターネットエクスプローラ
■ ファイヤーフォックス
■ グーグルクロム
■ オペラ
■ サファリ
これらのブラウザが同じように表示してくれると思ってますか…?
とんでもない…(`・ω・´)
W3Cのリファレンスに一応は準拠はしているのですが、表示はまちまち…
特にインターネットエクスプローラなんてひどく、各バージョンでも表示が違うなんて…
ブラウザ対策は色々と方法論があるのですが…
聞いた事があると思うのですが、これらを駆使して表示を合わせる努力をします。
あの有名な窓さんは絶対的シェアを持ってるから好き放題にやってるし
IE6なんて早く無くなって欲しいと思う…今のバージョンでもそう思う…
ブラウザ対策はIE6対策と言っても過言では無いと思う ヽ(`Д´)ノ
IE6対策をする上で知っておいて欲しい事があります。
ブラウザの表示方法で、標準準拠モードと後方互換モードを知ってますか…?
ブラウザの表示モードなのですが、お互いにCSSの解釈が違います。
特にボックスでのwidthとheightの解釈が違うのでレイアウトが崩れます。
IE6はドキュメント宣言の違いで標準準拠モードで表示するのか
後方互換モードで表示をするのかを決めています。
因みにファンブログのドキュメント宣言では標準準拠モードで表示します。
■ ドキュメント宣言を書いてない場合
すべてのブラウザは後方互換モードで表示します。
■ IE6が後方互換モードで表示する場合
・HTML4.01などのドキュメントタイプでブルーの部分のアドレスがない場合。
(Strictの場合はその限りではない)
・XHTMLの場合、ドキュメントタイプの前にXMLの宣言がある場合。
<?xml version="1.0" encoding="Shift_JIS"?>
今回も文字数の制限に引っかかりそうで詳しく書けない部分が多いのですが
自分で調べる事もスキルアップには欠かせない要素です。
各ブラウザでの統一した表示をさせるためには標準準拠モードで表示させる事が
前提条件であり、検索エンジン対策から見てもドキュメント宣言を理解することは重要です。
HTMLやCSSを勉強してカスタマイズをする上で今回の記事を理解し疑問点は
ご自身で調べてスキルアップして欲しいと思います。
ブログサービスなどのHTMLはドキュメント宣言は必ず書いてあります。
しかし、HTMLやCSSのカスタマイズを考える場合には、ドキュメントタイプの
違いによるマークアップの仕方を考えてカスタマイズする事が必要だと考えます。
検索エンジン対策を意識してカスタマイズをしなければどうやってアクセスを集めますか…?
パワーブログを作ることはアフィリエイトをやる上で欠かせない要素です。頑張ってください。
初心者のあなたが今回書いたことを理解するまでにはかなりの時間が掛かると思うので
検索エンジン対策済みのテンプレートがあるのならばそれを利用するべきだと考えます。
私が作ったテンプレートを無料で配布しています。良かったら利用してください。
ファンブログテンプレートのサンプルとダウンロードはこちらから
今回の記事に関連した過去記事も合わせてどうぞ。
アフィリエイトに特化したファンブログ・テンプレート
配布テンプレートのカスタマイズ方法−1
配布テンプレートのカスタマイズ方法−2
自分の個性をサイトデザインで出す事は非常に良い事だと思います。
しかーし!
見かけばかりのデザインにとらわれていてカスタマイズの本質を見ていない
自己満足のカスタマイズをしてる人が多いと思う。
HTMLやCSSの文字列を並べているだけで何が基準なのか分からないし
表示確認はどれだけのブラウザでやってるのって聞きたいです。
パーソナルユーズでブログをやってるのなら別に構わないと思うけど
アフィリエイトをやってる人がそんな事しいて良いのかなって感じます。
HTMLのタグはドキュメント宣言に準拠して書かなきゃいけないし
インターネットエクスプローラ(IE6)の対策もしなければならないんですょ。
ドキュメント宣言に準拠したHTMLのマークアップ
ところで、ドキュメント宣言って何なの!って思う人が多いと思います。
ドキュメント宣言とは、HTMLの標準化をやってるW3Cという団体があり
HTMLのリファレンスを定めて勧告していて、そのリファレンスにはいくつかのタイプがあり
タイプによっては使えるタグが異なってきます。
分かりやすく言うと、使えるタグと使えなくなるタグなどを定めている規格のようなものです。
HTMLはページの構造を記述しているので、宣言したドキュメントタイプに準拠して
マークアップしなければ検索エンジンの評価も下がると思います。
例えばファンブログのドキュメント宣言は…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
赤文字の部分、XHTML 1.0 Transitional を宣言しています。
このタイプは、HTML 4.01 からXHTMLへの移行時期のドキュメントタイプです。
従って厳格なXHTMLのリファレンスでなく、HTML 4.01+アルファみたいなリファレンスです。
例をあげると、XHTMLでは閉じタグがないタグは最後にスラッシュを
入れる事になってるのですが、無くても良いと…
非推奨になったタグを使っても表示してくれるなど結構曖昧なんです。
曖昧だからといって曖昧に済ませていてはいけません!
検索エンジンがどのように評価するのかアルゴリズムが解らないので
ドキュメント宣言通りのマークアップをするべきだと思います。
サイトをカスタマイズする場合、ドキュメントタイプに準拠したマークアップを
するように心がけて下さい。
ブラウザ対策
HTMLを書く上で一番悩ませてくれるのが各ブラウザでの表示対策です。
その中でもインターネットエクスプローラに至っては、一番悩ませるブラウザです。
現在多くの人に使われているブラウザは…
■ インターネットエクスプローラ
■ ファイヤーフォックス
■ グーグルクロム
■ オペラ
■ サファリ
これらのブラウザが同じように表示してくれると思ってますか…?
とんでもない…(`・ω・´)
W3Cのリファレンスに一応は準拠はしているのですが、表示はまちまち…
特にインターネットエクスプローラなんてひどく、各バージョンでも表示が違うなんて…
ブラウザ対策は色々と方法論があるのですが…
■ CSSハック
各ブラウザのバグを上手く利用して表示を合わせる方法
各ブラウザのバグを上手く利用して表示を合わせる方法
■ リセットCSS
タグがデフォルトで持っている値をゼロにリセットさせる方法
タグがデフォルトで持っている値をゼロにリセットさせる方法
聞いた事があると思うのですが、これらを駆使して表示を合わせる努力をします。
あの有名な窓さんは絶対的シェアを持ってるから好き放題にやってるし
IE6なんて早く無くなって欲しいと思う…今のバージョンでもそう思う…
ブラウザ対策はIE6対策と言っても過言では無いと思う ヽ(`Д´)ノ
IE6対策をする上で知っておいて欲しい事があります。
ブラウザの表示方法で、標準準拠モードと後方互換モードを知ってますか…?
ブラウザの表示モードなのですが、お互いにCSSの解釈が違います。
特にボックスでのwidthとheightの解釈が違うのでレイアウトが崩れます。
IE6はドキュメント宣言の違いで標準準拠モードで表示するのか
後方互換モードで表示をするのかを決めています。
因みにファンブログのドキュメント宣言では標準準拠モードで表示します。
■ ドキュメント宣言を書いてない場合
すべてのブラウザは後方互換モードで表示します。
■ IE6が後方互換モードで表示する場合
・HTML4.01などのドキュメントタイプでブルーの部分のアドレスがない場合。
(Strictの場合はその限りではない)
・XHTMLの場合、ドキュメントタイプの前にXMLの宣言がある場合。
<?xml version="1.0" encoding="Shift_JIS"?>
編集後記
今回も文字数の制限に引っかかりそうで詳しく書けない部分が多いのですが
自分で調べる事もスキルアップには欠かせない要素です。
各ブラウザでの統一した表示をさせるためには標準準拠モードで表示させる事が
前提条件であり、検索エンジン対策から見てもドキュメント宣言を理解することは重要です。
HTMLやCSSを勉強してカスタマイズをする上で今回の記事を理解し疑問点は
ご自身で調べてスキルアップして欲しいと思います。
ブログサービスなどのHTMLはドキュメント宣言は必ず書いてあります。
しかし、HTMLやCSSのカスタマイズを考える場合には、ドキュメントタイプの
違いによるマークアップの仕方を考えてカスタマイズする事が必要だと考えます。
検索エンジン対策を意識してカスタマイズをしなければどうやってアクセスを集めますか…?
パワーブログを作ることはアフィリエイトをやる上で欠かせない要素です。頑張ってください。
初心者のあなたが今回書いたことを理解するまでにはかなりの時間が掛かると思うので
検索エンジン対策済みのテンプレートがあるのならばそれを利用するべきだと考えます。
私が作ったテンプレートを無料で配布しています。良かったら利用してください。
ファンブログテンプレートのサンプルとダウンロードはこちらから
今回の記事に関連した過去記事も合わせてどうぞ。
アフィリエイトに特化したファンブログ・テンプレート
配布テンプレートのカスタマイズ方法−1
配布テンプレートのカスタマイズ方法−2
Posted by 寿 一太朗 | カスタマイズで考えるべきこと | TOP▲ |