サイトをカスタマイズする時の思考と考査

アフィリエイト初心者講座：TOP PAGE » 稼ぐパワーブログを作る » サイトをカスタマイズする時の思考と考査

サイトをカスタマイズする時の思考と考査

突然ですが、日本人の主食であるお米を美味しく炊けてますか…？
昔の常識にとらわれていたら美味しく炊けませんょ…
簡単に美味しく炊く秘訣は…編集後記で（´ε｀；）

最近、私の回りではサイトのカスタマイズがブームみたいになっていて
自分の個性をサイトデザインで出す事は非常に良い事だと思います。

色々とカスタマイズの方法を書いてるサイトも多く、詳しくアドバイスしている
サイトも多いので簡単にカスタマイズにチャレンジ出来るようになり
多くの人がカスタマイズをやってるねぇ…

しかーし！

見かけばかりのデザインにとらわれていてカスタマイズの本質を見ていない
自己満足のカスタマイズをしてる人が多いと思う。

HTMLやCSSの文字列を並べているだけで何が基準なのか分からないし
表示確認はどれだけのブラウザでやってるのって聞きたいです。
パーソナルユーズでブログをやってるのなら別に構わないと思うけど
アフィリエイトをやってる人がそんな事してて良いのって感じです。

HTMLのタグはドキュメント宣言に準拠して書かなきゃいけないし
インターネットエクスプローラ（IE6）の対策もしなければならない。

そして、HTMLもSEO対策を意識してマークアップしなければ
検索エンジンから置いてけぼりを食らいますょ…（´；ω；｀）

ドキュメント宣言に準拠した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を書く上で一番悩ませてくれるのが各ブラウザでの表示対策です。
その中でもIE6に至っては…一番悩ませるブラウザです。
現在多くの人に使われているブラウザは…
■ インターネットエクスプローラ
■ ファイヤーフォックス
■ グーグルクロム
■ オペラ
■ サファリ

これらのブラウザが同じように表示してくれると思ってますか…？

とんでもない…（｀・ω・´）

W3Cのリファレンスに一応は準拠はしているのですが、表示はまちまち…
特にインターネットエクスプローラなんてひどく、各バージョンでも表示が違うなんて…

ブラウザ対策は色々と方法論があるのですが…

■ CSSハック
各ブラウザのバグを上手く利用して表示を合わせる方法

■ リセットCSS
タグがデフォルトで持っている値をゼロにリセットさせる方法

聞いた事があると思うのですが、これらを駆使して表示を合わせる努力をします。

あの有名な窓さんは絶対的シェアを持ってるから好き放題にやってるし
IE6なんて早く無くなって欲しいと思う…今のバージョンもそう思う…

ブラウザ対策はIE6対策と言っても過言では無いと思う　ヽ（`Д´）ﾉ
IE6対策をする上で知っておいて欲しい事があります。

標準準拠モードと後方互換モードを知ってますか…？
ブラウザの表示モードなのですが、お互いにCSSの解釈が違います。
特にボックスでのwidthとheightの解釈が違うのでレイアウトが崩れます。

IE6はドキュメント宣言の違いで標準準拠モードで表示するのか
後方互換モードで表示をするのかを決めています。
因みにファンブログのドキュメント宣言では標準準拠モードで表示しています。

■ ドキュメント宣言を書いてない場合
すべてのブラウザは後方互換モードで表示します。

■ IE6が後方互換モードで表示する場合
・HTML4.01などのドキュメントタイプでブルーの部分のアドレスがない場合。
（Strictの場合はその限りではない）
・XHTMLの場合、ドキュメントタイプの前にXMLの宣言がある場合。
　<?xml version="1.0" encoding="Shift_JIS"?>

編集後記

今回も文字数の制限に引っかかりそうで詳しく書けない部分が多いのですが
自分で調べる事もスキルアップには欠かせない要素です。

各ブラウザでの統一した表示をさせるためには標準準拠モードで表示させる事が
前提条件であり、SEO対策から見てもドキュメント宣言を理解することは重要です。

HTMLやCSSを勉強してカスタマイズをする上で今回の記事を理解し疑問点は
ご自身で調べてスキルアップして欲しいと思います。

ブログサービスなどではSEO対策としてドキュメント宣言は必ず宣言しています。
しかし、HTMLやCSSのカスタマイズを教える場合には、ドキュメントタイプの
違いによるマークアップの仕方を教える事が必要だと考えます。

SEO対策を意識したカスタマイズをしなければどうやってアクセスを集めますか…？
パワーブログを作ることはアフィリエイトの第一歩です。頑張ってください。

で、美味しいご飯の炊き方なんですけど…
最近の炊飯器は価格も高くなり高性能高機能になってますよねぇ（´∀｀）
ピーンときましたかぁ…そぅ、高い炊飯器に買い変える事です。

なーんて、まぁ本当の事ですけど…（´ε｀；）
ご飯を炊くとき、お米を研ぎすぎてませんか…？

現在の精米機は高性能で、ほとんど米ぬかを除いてくれます。
研ぎすぎるとお米自体にヒビが入るばかりでなく、デンプン質を洗い流してしまい
美味しいご飯は炊けません。

研ぐではなく、軽くかき混ぜるくらいの洗い方で大丈夫です。
それくらい今の精米機は凄いんです。無洗米が作れるほどなのですから…

まっ、一番大事な事は保存方法です。
お米も生鮮食料品と同じです。乾燥させないように冷暗所で保存してください。

出来ないと思うのではなく、やってみようと思う勇気があなたの進化を生み出す。

いつも笑顔で。。
寿一太朗