初めてHPを作った時はホームページビルダーなどのホームページ作成ソフトで作られた方が多いのではないでしょうか？
ホームページビルダーは便利な反面、余計なというかおせっかいな機能もあります。これはのちほど解説します。

ホームページビルダーでページを作ってFTPで転送して表示させただけでは　絶対にGoogleやYahooで上位表示させることはできません。つまりアクセスアップも期待できないということです。これは長い間の経験からも明らかですし、皆さんもよくご存知だと思います。

しかし、何をどうやったらいいかわからないかたが多いのではないでしょうか？
それが現実だと思います。

SEOやSEMや検索エンジン対策　などと言う語で検索すればほんとにたくさんの解説サイトや紹介本、SEO対策会社のサイトが目白押しですよね。最後まで理解できましたか？そんなに難しい言葉を使わなくても、、、と思いませんでしたか？

では簡単にできることを

使っている画像すべてにalt属性をつけます

まずSEO対策で重要なのは使っている画像すべてにalt属性をつけるということです。
タイトル画像、ボタン、写真、バナー、ラインにいたるまで　すべてです。
SEO対策上有利だからと言ってターゲットにしているキーワードをむやみに入れると
検索エンジンからスパムと判定される恐れがありますので、キーワードは１個または
短文の説明程度にしたほうが無難です。

ホームページビルダーの方は、画像上で右クリック-『属性の変更』-『代替テキスト』と書かれた空欄部分に説明文を記入します。
(altキー+Enterキーでも可)

例　
<IMG src="button/whatsnew.gif" width="57" height="13"border="0" alt="更新情報">

これだけでいままでほったらかしにしていた貴方のサイトは、次回Googleの更新時には順位がぐんとあがります。めんどくさがってやらない人が多いので、これはきくんです。実際にある方に教えてあげたら『すごい順位があがりました！』と喜ばれました。

ではなぜこんなことをするのかということですが、ブラウザで画像を非表示に設定してこのalt属性の文字を頼りにしている人もいるようです。
テキストブラウザで見る人もいるようです。

目の不自由な人への配慮

画像には説明を付ければ大丈夫　　　　　　　　　　
インターネットでホームページを見ていて、画像の上にマウスポインタを置いたら、説明文が吹き出しの中に表示されたことはありませんか？これを画像の「代替テキスト」といいます。
代替テキストは、文字のみを表示できるWeb ブラウザの場合は、画像の代わりになり、読み上げソフトの場合は、読み上げの対象となります。一般のWeb ブラウザを使っている人でも、速度の遅いモデムでアクセスしている人や、速度を上げるために画像を表示しないようにしてネットサーフィンしている人たちは、代替テキストを読むことになります。それだけではありません。代替テキストはリンク元としても利用できます。リンク付きの画像に代替テキストを入れておけば、たとえ画像を表示できなくても、画像の代わりにリンク元として利用できるので、リンク先に飛ぶことができるのです。
画像に説明を付けることは、多くの人にあなたのホームページを訪れてもらうための必須条件といえるでしょう。

体の不自由な人への配慮

手が不自由な人や細かい動きが苦手な高齢者など、マウスの操作が難しい人に
とっては、どのようなホームページが利用しやすいでしょうか。

画像は大きく、画像と画像の間隔は広く

一般の Web ブラウザの操作は、「マウスのクリック」がほとんどです。画像にリンクが設定されている場合、あまり画像が小さいと、クリックする場所が狭くなり、体の不自由な人はうまくクリックできないことがあります。クリックしやすいように、画像を大きくしておくといいでしょう。やむを得ず小さい画像にリンクをはるときは、画像と画像の間隔を広くあけるといいでしょう。
こうしておけば、クリックしようとした場合と少しぐらいずれても、間違って別のページに飛んでしまうことがなくなります。

さらにこんな工夫がしてあれば‥‥

ホームページが本のように構成されているときは、「次のページに進む」、「戻る」などといったリンクが各ページに付いていることがあります。体の不自由な人の中には、マウスを動かすこと自体が難しい人もいます。このような人にとっては、これらのリンクが各ページの同じ位置にあれば、マウスを動かさなくてすむので助かります。
(『目の不自由な人への配慮』『体の不自由な人への配慮』の2項は、とてもわかりやすいのホームページビルダーヘルプより引用しました)

つまり、alt属性をつけるということが、まず自分のためになりまた　人のお役にもたつことができるというお話でした。

SEO対策ワンポイントレッスン　　　　　画像のalt属性を必ずつけること

最後までページを書いたら

ホームページビルダーのメニューの『ツール』-『HTML構文チェック』『HTMLクリーンアップ』『アクセスビリティチェック』を必ずしてからサーバーへFTP送信するクセをつけましょう。

SEO対策ワンポイントレッスン
『HTML構文チェック』『HTMLクリーンアップ』『アクセスビリティチェック』を必ずしてからサーバーへFTP送信するクセをつける
このような機能のないソフトを使っている方は、Another HTML-lint gatewayで採点してみることが重要
あなたのHTMLの穴がわかる

　CSS(カスケーディング　スタイルシート)を使う

W3Cの仕様書等の文書の日本語訳集
これは、ホームページを作る上での大変重要な事項が書かれたものです。HTMLの定義などがこと細かに決めてあります。いろいろ調べてみてください。

CSSとは、簡単に言えば　HTMLで使う本文や段落などの書体や色、大きさなどを設定したものです。

実際にHTML文書のなかでは、個別に指定しません。

HTML文書に、以下のように記述します
<head>
<link rel=stylesheet type=text/css href=style.css>
</head>

style.cssに、いろいろ記述していくことになります。

BODY {
cursor : crosshair;
scrollbar-3dlight-color : #FFFFFF;
scrollbar-arrow-color : #336666;
scrollbar-base-color : #FFFFFF;
scrollbar-darkshadow-color : #FFFFFF;
scrollbar-face-color : #FFFFFF;
scrollbar-highlight-color : #CCCCCC;
scrollbar-shadow-color : #CCCCCC;
font-size : small;
}
(以上を日本語訳すると、カーソルは十字、スクロ-ルバーは、白っぽい感じ、文字の大きさはsmall)

単に、上のようにするだけでもかなりサイトの印象は変わってくると思います。
サイトにあわせてカラーを変えてみてください。
以下テーブルや段落といったものを記述していきます。

style.txtという新規のテキストファイルを作って上記のコードをコピペして保存後、右クリックして拡張子をcssに変更すればOKです。このファイルが使えなくなるけどいいですか？みたいな警告がでますが無視して大丈夫です。

スタイルシートについて詳しくは、以下の解説サイトへどうぞ！

CSSの解説++

1とほほのスタイルシート入門
2CSS辞典
3スタイルシートの裏の裏
4CSSでイケてるデザインサイトリンク集
5CSSでイケてるデザインサイトリンク集2
6すちゃらかCSS素材集
7WEBデザインテンプテート集
8Designing with CSS
9@ORion
10BLOOM
11でざいん広辞苑
12スタイルシートライブラリ
13ウェブスタンダードテンプレート集

スタイルシートをHTMLファイルに適用させるには

<ホームページビルダーの場合>

編集画面を開いたまま、表示--スタイルシートマネジャー--リンク--参照　とたどります。
あらかじめ使用するCSSファイルは、HTMLファイルを保存しているフォルダに入れておきます。
CSSファイルを選択して　OKを押す。
すると、『スタイルの一覧』内に表示されるので選択すると、『編集』という文字があらわれるので　ここからいろいろ設定することができます。
ホームページビルダーの場合、このソフトのなかにも標準でスタイルシートが装備されていますが、このままでは使えません。
エクスプローラで、Program Files/IBM Homepage BuilderVer**/sample/css とたどればあります。
これらは、読み取り属性がついているので、使うスタイルーシ-トをコピーしてサイトの保存フォルダに保存したら　右クリックして『プロパティ』を選択。『読み取り専用』のチェックをはずしてOKを押す。

その前に、編集画面の左側にナビゲーションバーを表示させてください。
『素材集』--『素材タブ』--『素材』とたどると下の方に、スタイルシートがあります。
一番下の『設定ボタン』をクリックすると、『スタイルシートテストモード』ができますので、気に入ったものがあればそれを使ったほうが早いですね。

なければ、以下を参考に作ってください！

++お勧めCSS作成、編集ソフト++

1 FlashCSS
FlashCSSはスタイルシートの知識が無くてもマウス操作で簡単にスタイルシートを作成出来るプレビュー機能付きCSS自動作成ソフトです。
設定可能項目は「文字」「リンク」「テーブル」「背景」「スクロールバー」「その他」の６項目です。

2 AutoStyle anyware 　　作者HP

3 Style Note
スタイルノートはインターフェースと使いやすさを追求したHTMLエディタです。また CSS と HTML のかなり柔軟な再編集機能を提供しています。豊富な機能が搭載されていますので、ヘルプを見ながら触れてみてください。

4 HTML Project2
HTML Project2は、Windows95/98/Me/XP 上で動作する、豊富なカスタマイズ機能を搭載した、HTML 4.01、XHTML 1.0およびスタイルシートCSS2に完全対応したタグ挿入型エディタです。

はっきりいって初めてCSSを使うのに、いちから書ける人ははいません。
そこでまず、FlashCSSやAutoStyleであらかじめCSSを作っておき、それをStyleNoteに読み込んでもっと詳細に設定するといいと思います。ほとんど、FlashCSSだけでまかなえるはずです。

デザインテンプレートなどもダウンロードしたら、StyleNoteで編集されるといいと思います。

その他のCSSお勧めサイト++

1WEB大好きどっとこむ　2Ran com.X 　3T2-Designing 　4TG *Love is full.My table tag*

5グッドテンプレート　最後の手段　買う！

ソーシャルブックマークで情報を共有！

　　　

HTML+CSSサイトの場合