ホームページデザインの変更

■ ホームページデザインの変更 ■

こんにちは。tanzan です。

YAHOO の検索結果が変化しましたね。具体的には8月22日ころに変更になったそうです。

僕のサイトは、結構稼いでいたのに表示されなくなったところもあれば、表示されないと思って放置していたのに表示されるようになって泡を食っているところもあります。トータルでの影響はまだよくわかりません。

一つ言えるのは、サイトやコンテンツが少ないと、全部一度にやられてしまう可能性がある、ということですね。

さてお知らせです。

まず旧バージョンの楽天アフィリエイトツール(有料版)をご利用の方へ。楽天の仕様がまたまた変更になりました。とりあえず対応しましたので、以下の掲示板を見てください。

http://aff.banabana.com/modules/newbb/viewtopic.php?topic_id=78&forum=3&post_id=394

今後の変更には対応しきれない可能性がありますので、以前にも書きましたが、楽天アフィリエイトツールAPI版(無料版)への変更をお願いします。

http://netshopowners.com/rakuten/

次に電脳卸ツール(有料版)をご利用の方へ。電脳卸のWEBサービスに新バージョンが出ました。このためとりあえず、電脳卸ツールで新しいWEBサービスを使うための変更点をまとめました。以下をご覧ください。

http://aff.banabana.com/modules/newbb/viewtopic.php?topic_id=8&forum=3&post_id=396

旧バージョンのWEBサービスは、早ければ来年4月ころに使用できなくなるそうです。ですから電脳卸ツールをご利用の方も、変更されることをお勧めします。

また新バージョンの電脳WEBサービス(DWS2.0)には商品情報が取得できるなど、機能が拡張されていますので、それを利用できるツールのリリースも考えていま
す。

有料にするか無料にするかなどはまだ検討中です。

今僕のサイトのあちこちでは、ページデザインの変更作業を行っています。と言っても、みかけのデザインを大きく変えているわけではなくて、<table>タグを使った表組みでデザインしていたものを、<div>タグとCSSを使ったものへと変更しているのです。

ページをデザインする時にはわかりやすいので<table>タグを使いがちですし、また僕が愛用しているテンプレートのアフィプレート(最近販売中止になりました)も表組みを使ったデザインになっていました。

でも表組みを使ったデザインはどうしても重くなるのが一つの欠点。一度組んで中身を入れると、それを移動させるのも一苦労でした。

そこで<div>タグを使い、表示位置をCSSファイルで指定してやる方法に変えることにしたのです。

CSSファイルで位置を指定する利点は単にページが軽くなるだけではありません。

普通表組みで左側にメニューを置くと、コンテンツよりも先にメニューが読み込まれます。

検索エンジンのロボットも、コンテンツより先にメニューを読み込んでしまいますから、メニューが多岐にわたっていたりしたら、キーワードが曖昧になり、SEO的にも不利になります。

ところがCSSで位置を指定すると、コンテンツより下に書いてありながら、メニューを見慣れた左側に置く、ということができます。

論より証拠。例えば当社のトップページを見てください。

ページのソースを表示させて見るとわかりますが、真中の列が一番最初に来て、その次に左側メニュー、そして右側メニューが一番下に出てきます。

一番重要なのは真中の列ですから、これで両側のメニューよりも先に読み込めるようになりました。

こうした組み方をCSSで実現するためには float というパラメータの設定を使います。

「css レイアウト」あるいは「CSS 段組」で検索をかけると参考になるサイトが沢山表示されます。最初は書店でCSS関係の本を買おうかと思いましたが、WEBで調べた情報で十分でした。

さらにもう一つ進めているのが、テンプレートの利用です。

「あれ?アフィプレートを使っているんじゃ?」

と思われるかもしれませんが、これはWEBページ作成ソフトにも関連します。

僕のサイトは以前はどこもホームページビルダーで作っていました。それを、ドリームウィーバーに変更しているのです。

ドリームウィーバーのテンプレート機能は強力で、テンプレートに基づいてページを作ると、ページ内にどのテンプレートを使っているかの記録が残ります。

そして、テンプレートを変更するだけで、そのテンプレートを元に作ったすべてのページが自動的に変更されます。

これは超便利です。

先ほどの当社トップページのソース、上の方に以下のような記述があります。

template=”/Templates/3コラム.dwt”

これは僕が用意した3コラム、つまり3列に分かれたページ用のテンプレートを使用していることを意味しています。

右メニューの幅をもう少し狭めよう、あるいはヘッダーのデザインを変更しようと思ったら、テンプレートをいじるだけ。すると、3コラム用のテンプレートを使用したページのデザインはすべて自動で変更されます。

WEBデザインをきちんと学んだ人にとっては「何だそんなことか」と思われるようなことなのですが、生産性に大きな違いが出ますから、遅ればせながら作業を進めているところです。