わーぷれCollege

Tweet

3カラムのテンプレートといえば、右の画像のような感じ。

通常、この手の3カラムのHTMLは、

ヘッダー
　→ 左カラム
　→ コンテンツ
　→ 右カラム
　→ フッター

と記述していき、
クローラーにもその順番で読み込まれます。

ですが、せっかくオリジナルテンプレートを作るのだからSEOを意識したいところ。


そこで検索エンジンに読ませたい順に

ヘッダー
　→ コンテンツ
　→ 左カラム
　→ 右カラム
　→ フッター

と記述します。

あとはスタイルシートで視覚的に順番を入れ替えてあげればオッケ！

まずは、一番左にあるコンテンツ#contensにmargin-leftを追記し、右にずらしてあげます。

ここでmargin-leftに入れる値は、サイドバー分のwidthです。

それから、このままだとIEでずれてしまうので、display: inline;も記述して下さい。

次にleft-sideをコンテンツの左側に移動。

これはネガティブマージンで左に寄せてあげれば問題解決です。左サイドバーのwidthとコンテンツのwidth分をマイナスしてあげてください。

ex)両サイドバー250px コンテンツ500pxの場合

#left-side{
margin-left: -750px;
}

♡

これで検索エンジンに読ませたい順にHTMLを書いた3カラムの完成です☆

カテゴリー： CSS｜コメント(0)｜2012年6月16日12:27 AM