webデザイン・初心者のためのテーブルレイアウトのコツ

ホームページを作る上での基本形に、ヘッダー＋フッター＋２カラムの形がありますね。
よくブログでみかけるこの形です。

ブログはCSSデザインで構築してある場合がほとんどですが、初心者にとってCSSデザインを覚えるのは壁が高い・・・かも？？
というわけで、初心者さんにオススメなのがテーブルを使って作る方法。
今回はテーブルデザインのポイントと初心者さんが間違いやすい部分のお話です。

（１）基本形はこれになります



ソース

---

<table width="500" border="1">
<tr>
<td height="22" colspan="2">ヘッダー</td>
</tr>
<tr>
<td width="129">サイドナビ</td>
<td width="355">メイン</td>
</tr>
<tr>
<td colspan="2">フッター</td>
</tr>
</table>

---

（２）１を改良するコツとしては、すべてのセルに valign="top"を入れて上にくるようにすること

---

<table width="500" border="1">
<tr>
<td height="69" colspan="2" valign="top">ヘッダー</td>
</tr>
<tr>
<td width="132" height="113" valign="top">サイドナビ</td>
<td width="352" valign="top">メイン</td>
</tr>
<tr>
<td height="46" colspan="2" valign="top">フッター</td>
</tr>
</table>

---

（３）で、サイドナビを入れたいですよね・・・。基本枠の中にさらに枠を作りたいときの基本は、こんなふうにするのではなく

---

（これは悪い例です）
<table width="500" border="1">
<tr>
<td height="69" colspan="2" valign="top">ヘッダー</td>
</tr>
<tr>
<td width="145" valign="top">メイン</td>

<td width="339" rowspan="5" valign="top">メニュー１</td>
</tr>
<tr>
<td valign="top">メニュー２</td>
</tr>
<tr>
<td valign="top">メニュー３</td>
</tr>
<tr>
<td valign="top">メニュー４</td>
</tr>
<tr>
<td valign="top">メニュー５</td>
</tr>
<tr>
<td height="46" colspan="2" valign="top">フッター</td>
</tr>
</table>

---

（４）このように、さらに中にテーブルを入れると制御しやすくなります

---

<table width="500" border="1">

<tr>
<td height="69" colspan="2" valign="top">ヘッダー</td>
</tr>
<tr>
<td width="203" height="113" valign="top"><table width="200" border="1">
<tr>
<td>メニュー１</td>
</tr>
<tr>
<td>メニュー２</td>
</tr>
<tr>
<td>メニュー３</td>
</tr>
<tr>
<td>メニュー４</td>
</tr>
<tr>
<td>メニュー５</td>
</tr>
</table></td>
<td width="281" valign="top">メイン</td>
</tr>
<tr>
<td height="46" colspan="2" valign="top">フッター</td>
</tr>
</table>

---

制御しやすいからと、テーブルの入れ子入れ子入れ子・・・をどんどん繰り返していると、
複雑なソースになって、あとで修正したいときなどに混乱する場合もあるので
入れ子は最低限に使うようにしましょう。

この方法の応用編を動画マニュアルにて解説しています。
ドリームウィーバーを使ったテーブルデザインの方法
（１）から（６）まで順番で見ていただくと、どんな手順でやったら効率が良いかわかっていただけると思います。

ビジネスブログとは・・・

ビジネスブログ（企業向けブログ）の基本を考えてみました。

* ブログの主催者が明確である
* 本サイトの更新情報や、読者へのお知らせを掲載する
* 本サイトを読む読者にとって、役に立つ情報を発信する
* 本サイトへのリンクを入れ、本サイトの案内の役目も担う
* 本サイトのイメージアップになるようなデザイン
* 読者（お客様）からの問い合わせ窓口がついている

基本を想定して、それにあったカスタマイズを行ってみましょう。

＜参考　動画で学べるビジネスブログの作り方＞

* seesaaを使ったビジネスブログの作り方
私が作っている動画マニュアルのサイトですが、ここではseesaaブログを使って、企業ブログ風にカスタマイズする方法を動画にしてみました。初心者向けになっていますので、参考にしてください。見本はseesaaブログですが、動画を見て貰えれば、他のブログのカスタム方法の参考になるかと思います。
何故、seesaaにしたかというと、いくつか理由があるんですが、わたしがいくつか無料ブログをためした中ではピカイチで、カスタムのしやすさ、SEOに強い作り、広告を非表示にできる、２Ｇまでの大容量・・などなど、良い点がたくさんありました。

seesaaで始めるビジネスブログ

（１）新規登録の方法
（２）カテゴリ登録と記事投稿
（３）デザインを変更する方法
（４）サイドメニューの広告表示を削除す...
（５）サイドメニューに企業のロゴを入れ...
（６）自由形式コンテンツの編集

テンプレートをカスタムする方法
（１）ヘッダーの背景画像を変更する
（２）文字色を変える方法
（３）本サイトへのリンクを追加する
（４）フッターに企業情報を追加する
（５）フッターの文字スタイルを調整する...

＜参考　SEO対策に有利なビジネスブログの作り方＞

　こちらでSEO対策に有利なビジネスブログの作り方　という記事を書いたので、興味のある方は参考にどうぞ・・・・・

　以前は、被リンクを貰う方法と言えば、「相互リンク集」の作成が主流でした。ところが、SEO対策のために無節操に相互リンクを増やすサイトが増えてきたために、最近は関係ないサイトとの相互リンクがいくらあっても、検索エンジンが評価してくれない傾向にあるようです。

　もちろん、関係サイトのリンク集を作るのは、読者のためにもなるので、読者のためのコンテンツは充実させましょう。それとはべつに、有効な被リンクを増やす方法のひとつとして自分で対策できるのが、ブログを使ったSEO対策です。
無料ブログはたくさんあるので、手軽にブログの立ちあげができますが、中にはカスタマイズの自由がほとんど利かず、ビジネスブログには不向きなブログサービスもあるので、吟味してブログサイトは選びましょう。

XHTLM＋CSSサイトはSEO対策に有利か？

「XHTM＋CSS、いわゆるweb標準で作られたサイトは、SEO対策に有効である」
スタイルシートでのサイトの構築方法が紹介されたとき、こんな説が一般的でした。
つまり
「検索エンジンクローラーがやってきて、情報を収集するときに、クローラーが読みやすいサイト、
ソースが簡潔でクローラーにも理解でき、重要事項が前の方に書いてある」などの理由から、従来のテーブルデザインより、テーブルを使わないweb標準サイトの方が検索に有利だということです。

そこでさっそくCSSの勉強をして、今までのサイトを出来る範囲でリニューアルしました。

と・こ・ろ・が・・・・・・・・・・
苦労してリニューアルしたはいいけど、ほとんどアクセス数にも、ましてや成約率に変化なし・・・(-_-:)
焦りましたよ〜〜〜。「CSSサイトって検索に有利っていうけど全然話がちがう〜〜」なんて・・・・
それもそのはず、基本の基本を知らなかったわけで、自分の勉強不足だったんですけどね。。。

というわけで壁にぶつかった時に、大阪のとあるSEOセミナーを受講しました。

大阪　SEOセミナーの山下先生です。
この先生の教えてくれる方法は、難しい概念や専門用語は登場しません。
自分のサイトの身の丈にあったやり方で、初心者向けに、サイトオーナーが自分でできる方法を教えてくれます。

現に山下先生に教わった方法で、サイトを最適化したところ、着実に順位が安定して上位に表示されるようになりました。
また、この方法は、Yahoo!アルゴリズムの変動に比較的強いという特徴があって、Yahoo!順位が落ちたとたくさんのサイトオーナーさんが泣いているような激動の時期でも、ほぼ順位に変動がありません。
実際、20を超えるサイトで試していて、２年ほど経過を観測してますが、今でも実感しています。

もし、
「自社でやってる余裕がないけどSEO対策をどこかに外注したい。だけど魑魅魍魎の世界みたいだし、どこに頼めば良いかわからない」という方は、
山下先生のSEOセミナーを受講してみるといいと思います。

サイト作成は自分でできないが、専任のデザイナーに任せているという方は、担当デザイナーさんがうまくリニューアルできるように個別指導をしてくれます。（巷の有料のSEO対策サービスからしたら破格の安さなので不思議なんですが、この先生の対策の基本は「自分でコツコツ改良しましょう」なので、安いのです）でも基本を教えてもらってコツコツと改良していくとほんとに地道に効果が出てくるのでびっくりです。

業者に依頼したり広告を増やすのもひとつの方法ですが、その前にやっておかなければいけない基本の基本、これを知っているだけで財産になりますね。
あくまで、検索エンジン（クローラー）を欺く裏ワザではなく、公正で地道なSEO対策を。
クローラーのためのみならず読者にもわかりやすい優しいホームページを作ること。そんなSEO対策を教えてくれています。

さてはて・・・わたしのサイトでも、SEO診断してますので、お近くの方は（近くじゃなくてもできますが）気軽にお問い合わせください。＞SEO対策リニューアル／SEO診断／SEO対策個別指導

ブログでの上手な記事タイトルの付け方

前回の続きです。

動画マニュアルでseesaaで作るビジネスブログというのを更新しています。
それに合わせて、わたしのサイトで、SEO対策に有利なビジネスブログの作り方・・というコンテンツを作ったので紹介します。

---

●上手な記事タイトルの付け方

ロングテールを利用したブログのSEO対策で必須といっていいテクニックが、上手なタイトルの付け方です。

「春がきました」では誰も検索してくれません。でも「遠山郷に春が来た」だと、遠山郷というキーワードが増えます。「遠山郷の小嵐神社・春の例祭」というさらに具体的な記事タイトルだと、小嵐神社の情報を探している人に親切です。しかも、小嵐神社についての情報が載っているホームページは少ないと思われるので、検索したときに１〜３位などの上位に表示される可能性が高く、それだけ来訪者も増えます。

そして、ありがたいことに、過去に書いた記事が、１年後の春に小嵐神社の春のお祭りの情報を探している人の役に立つこともある・・・今投稿した記事は未来に渡って営業してくれるようなものですね。
今まで、読者が集まる掲示板にこのような情報を書いていた主催者さんも、ぜひブログを活用してこまめに情報発信してみてください。
昔の掲示板の記事はなかなか検索エンジンにもヒットしませんでしたが、ブログの記事は、上手な記事の作り方をすればヒットしやすいのです。

---

遠山郷観光協会のホームページを紹介します。



　遠山郷は長野県の最南端、南信濃・上村地方の山深い谷。日本三大秘境のひとつと言われてます。
国の重要無形民俗文化財に指定されている遠山霜月祭、神様の湯治場の伝説がある秘境の谷に湧いた天然温泉「かぐらの湯」
日本の原風景が残る場所下栗の里、南アルプスの雄大なパノラマを望むしらびそ高原。
南アルプスの恵みをたっぷり含んだ名水・観音霊水・・・・山と渓谷に囲まれた里山です。
心安らぎ、人情味溢れる遠山郷へぜひ訪れてみてください。

このサイトは、信毎ホームページ大賞2004　特別賞を受賞しました。
村人と村の外の遠山郷ファンで育てているホームページです。