■ html と css ■
こんにちは。tanzan です。
本年もよろしくお願いいたします。
しかし、年末商戦は来ませんでしたねえ。数年前なら高島屋だけで１０万円くらいの利益が出たものでしたが…。そして毎年低調な新年は、以前にも増して低調となっています。
今日書くのは、ホームページのコンテンツの話ではなく、ＷＥＢデザインや、ページのレイアウトなどの話です。
html と css とをどのように組み合わせるかを身につけると、サイトのメンテナンスが容易になるばかりでなく、ＳＥＯ的にも有利なサイトを作ることができます。
「できる100ワザ アフィリエイト―ホームページでがっちり稼ぐ実践ノウハウ」という本が出ています。
３人のまっとうなアフィリエイターの方たちが書かれた本ですね。内容的には初級向けかな、と思いますが、中級くらいの人も自分のやっていることを見直すには良いです。
でも、ほとんど僕がメルマガで書いている内容とも重なるんです。結局、長くやっている人たちは、同じような方向性に向かってきている、ということでしょうか。
ただこの本で一箇所「うん？」と思ったのは、iframe の使用を推奨している点です。メニュー部分を iframe で外部ファイル化することで、メニュー部分を共通化する、ファイルサイズを小さくする、という利点が強調されています。
しかし、僕は iframe をメニューに使うのは、内部リンクの強化という面ではマイナスだと思います。
メニューの共通化は、HTML編集ソフトに DreamWeaver を使って、テンプレート機能を利用すれば、かなり容易に実現できます。この点は「できる100ワザ アフィリエイト―ホームページでがっちり稼ぐ実践ノウハウ」にも説明されています。
ページの左側にメニューを持って来たい時に、検索エンジンにメニューではなく
コンテンツを先に読ませる方法はＣＳＳを使って実現できます。
方法は先日紹介した参考書、「実践 Web Standards Design」という本に出ています。ちょっと高いですけど、レイアウトの実践部分は役に立ちます。
実を言うと、ＸＯＯＰＳの動的サイトをやめて、「実践 Web Standards Design」に書いてあるようなＣＳＳを使ったページ構成に変えたら、アクセス数が倍くらいになったサイトがあります。
ＸＯＯＰＳに付属するテンプレートは、テーブルを使ったページデザインを使っていて、ＳＥＯとしては勧められません。ですから、テーブルを使ったデザインに問題があったのか、動的ページに問題があったのか、その両方なのかまではよくわかりませんが。
ＣＳＳを使ったページデザインというのは、例えば以下のようなhtml文になります。実際は半角文字で書かれます。
＜ｄｉｖ ｉｄ＝”ｈｅａｄｅｒ”＞
ここにヘッダー部分を書く
＜／ｄｉｖ＞
＜ｄｉｖ ｉｄ＝”ｍａｉｎ”＞
＜ｄｉｖ ｉｄ＝”ｃｏｎｔｅｎｔｓ”＞
ここに本文を書く
＜／ｄｉｖ＞
＜ｄｉｖ ｉｄ＝”ｍｅｎｕ”＞
ここにメニューを書く
＜／ｄｉｖ＞
＜／ｄｉｖ＞
＜ｄｉｖ ｉｄ＝”ｆｏｏｔｅｒ”＞
ここにフッターを書く
＜／ｄｉｖ＞
css ファイルで main と menu の位置を指定してやることで、本文を前にメニューが後に記述されたままで、見かけ上はメニューが左側に来るレイアウトを実現することができます。
例えばこんな感じ。 ここはまだ編集中の「遺跡の旅」というサイトです。各ページの左側にあるメニューは、htmlファイルの中では、右側のコンテンツの後に書かれています。
メニューはキーワードが分散していますから、検索エンジンのクローラー（ロボット）がメニューを先に読み込むと、ページのテーマがわかりづらくなります。
「遺跡の旅」の例だと、ペルーの遺跡のページを読み込んだときに、メニューを先に読み込ませると、他の国の名前が検索エンジンに先に拾われてしまいます。
このため、コンテンツ部分をファイルの中の前の方に出して、ページ特有のキーワードを検索エンジンがわかりやすいようにしています。
css ファイルの中で使っているのは、「遺跡の旅」サイトでは float という指定です。css の中の指定で、コンテンツ部分を右に寄せ、メニュー部分を左に寄せて横に並べています。
レイアウト用には、他にも position という指定を用いることもあるようです。でも僕はほとんど使ったことがありません。
もう一つのポイントは、テーブルを使わないレイアウトを使うことの重要性です。「遺跡の旅」のトップページは、コードを見てもらうとわかりますが、テーブルを一つも含んでいません。テーブルでブロックを区切る代わりに、div タグでブロックを区切ってあります。
テーブルを使ったレイアウトは、ファイルが大きくなるという問題ばかりでなく、コンテンツと見かけのデザインがすべて html ファイルに含まれてしまう、という欠点があります。
html 文中でテーブルを使ったレイアウトを使ってしまうと、ページのデザインの変更がしにくいのが一番の問題です。
div でブロックを区切っておけば、css ファイルの中での指定を変えるだけで、メニューを右側に表示することも簡単。メニューや本文の横幅を変更することも容易です。サイトの中のすべてのページに変更を加える必要がなく、css ファイルを一つだけ変更すれば良いからです。
さらに、例えばＰＣ用に作られたサイトを、携帯用に作り変えるのも、テーブルを使っていたら大変です。
何しろ、ＰＣと携帯では、表示エリアが全く違いますから、同じレイアウトが使えません。
テーブルを使ってＰＣ用に表示を固定してしまうと、携帯用のサイトに作り変えるためには、全ページのレイアウトを html をいじって変えなくてはなりません。
ところが html 文中にはコンテンツと div を使ったブロックの区切りだけを入れておけば、極端な話、css を変更すれば、携帯画面の横幅に合わせた、情報が縦に並んだレイアウトに変更することもできてしまいます。
つまり、html 文では、文章の論理的な構造を div で区切ったブロックに整理して記述するだけにして、レイアウトや色、フォントサイズなどの「見かけ」を決めるものは一切入れないようにしておく。
一方 css ファイルの中で、対象となるブラウザー（ＰＣとか携帯とかハンドヘルド機とかゲーム機とか）に合わせた「見かけ」を記述する、というようにします。
こうしておくと、ＳＥＯにも強いだけでなく、メンテナンスもしやすいサイトが出来上がります。
具体的な css の指定方法は、このメルマガでは説明し切れませんから、参考書を見るか、あるいは「css レイアウト」などで検索をかけて出て来るサイトを参考にしてください。
僕自身、「css レイアウト」で出て来るいくつかのサイトを参考にしてやり方を覚えました。ただ、参考書を見たら、もっとスマートなやり方が出ていましたが。