Menu
上級CSS[スタイルシート]レイアウト講座
サンプルソースで覚えるCSSテクニック商用利用可！無料CSSテンプレート配布
スポンサードリンク
ひとつのCSSファイルでトップページと下層ページのレイアウトを変更する、もしくはある特定のページだけレイアウトを変更する指定です。1カラムレイアウト、2カラムレイアウト、3カラムレイアウトなどをCSSファイルひとつで制御します。(本来ひとつでなくても各カラム用のCSSファイルを用意すればOKです)
ブログなどでよく見かけるデザイン変更方法ですがウェブサイトで指定する方法です。今回はトップページを3カラム、下層ページは2カラム左サイドバーに変更する解説です。もちろんレイアウトだけでなく、デザイン（背景画像を変える、フォントサイズを変更するなど）変更も同じ方法です。
トップページのみ3カラム構造で下層ページはすべて2カラム左サイドバーとします。
まずトップページと下層ページのベースを作成しますが、ベースとなるのは2カラムレイアウトなので、2カラム左サイドバー用のテンプレートを作成します。
尚、基本を覚える為に(X)HTML構造は最もシンプルなかたち(最も簡単な段組み)で説明します。
[1]ベーステンプレートとして左サイドバー構造のテンプレートを作成します。
[2]トップページ用としてbody要素に id="column-three" とid名を付けたファイルを作成します。今回は#column-threeとしましたが、なんでも結構です。また、3カラムなので右サイドバー部分として新たにブロックを作成します。今回は#rigt-sidebarとしましたが、#column-three同様なんでも結構です。
[1]ベーステンプレート
<body> <div id="wrapper"> <div id="header"> <!-- ヘッダー部分 --> </div> <div id="menu"> <!-- メニュー部分 --> </div> <div id="contents"> <!-- コンテンツ部分 --> </div> <div id="footer"> <!-- フッター部分 --> </div> </div> </body> </html>
[2]トップページ用
<body id="column-three"> <div id="wrapper"> ***** 中省略 ***** <div id="menu"> <!-- メニュー部分 --> </div> <div id="contents"> <!-- コンテンツ部分 --> </div> <div id="rigt-sidebar"> <!-- 右サイドバー部分 --> </div> ***** 以下省略 *****
2カラム左サイドのシンプルなCSS指定。直接変更に関係のない部分は省略。
* { margin: 0; padding: 0; }
#wrapper {
text-align: left;
margin: 0 auto;
width: 860px;
}
#header { }
#menu {
float: left;
width: 180px;
}
#contents {
float: left;
width: 680px;
}
#footer { clear: both; }
子孫セレクタ指定の応用です。
イメージ：すべてのペースは2カラムの上記CSSですが、#column-three部分だけの指定を追加していきます。この時、共通する部分は新たに指定しなくてもよし。
トップページに追加した#rigt-sidebarの指定をCSSに追加記述します。今回は#menu同様width: 180px;としました。
#menu {
float: left;
width: 180px;
}
#contents {
float: left;
width: 680px;
}
/* -- トップページ用 -- */
#rigt-sidebar {
float: right;
width: 180px;
}
#rigt-sidebar部分の追加に伴い、トップページ用[ #column-three ]に#contents部分の幅を変更します。全体の幅860pxに納まるようにして下さい。
#contents {
float: left;
width: 680px;
}
/* -- トップページ用 -- */
#column-three #contents { width: 500px; }
#column-threeが指定された要素の#contentsは500pxにするという指定です。この時 [ float: left; ] は継承されているので指定の必要はありません。
以上で完成となります。
上記がスタイル変更の基本です。基本が分かれば後は応用ですので、頑張ってみて下さい。当サイトも同様にデザインを変更させています。少しだけ手の込んだ事をしていますが、基本は同じです。
因みにデザインテンプレートバージョンの時は [3カラム] になっていますが、実際には [3カラムに見せかけた2カラム] です。XHTMLの構造はどのページも2カラム構造で作成されています。
完成CSSサンプル
* { margin: 0; padding: 0; }
#wrapper {
text-align: left;
margin: 0 auto;
width: 860px;
}
#header { }
#menu {
float: left;
width: 180px;
}
#contents {
float: left;
width: 680px;
}
/* -- トップページ用 -- */
#column-three #contents { width: 500px; }
/* -- トップページ用 -- */
#rigt-sidebar {
float: right;
width: 180px;
}
#footer { clear: both; }
下記の方法は一番簡単ですが一つ問題点があります。
基本的にはすべてのテンプレートを3カラムで作成し、2カラム表示したいページでは不必要な部分を隠してしまいます。上記の場合なら [ #rigt-sidebar ] 部分となります。[ display: none; ] を指定する事になるので、Googleが言うところの隠しテキストおよび隠しリンクに該当する恐れがあります。
隠しテキストおよび隠しリンク
コンテンツに隠しテキストや隠しリンクが含まれていると、ユーザーに対するものと異なる情報が検索エンジンに提示されるため、信頼できないサイトと見なされる可能性があります。 過度のキーワードといったテキストは、以下のような複数の方法で隠すことができます。
- 白の背景で白のテキストを使用する
- テキストを画像の後ろに含める
- CSS を使用してテキストを隠す
- フォント サイズを 0 に設定する
隠しリンクとは、Googlebot でクロールされることを意図しているが、下記のようにユーザーからは読み取れないリンクのことです。
- リンクが隠しテキストで構成されている (たとえば、テキストの色と背景色が同じ)。
- CSS を使用して、高さが 1 ピクセル程度の非常に小さいハイパーリンクが作成されている。
- リンクが小さな文字 (たとえば、段落中のハイフン) に組み込まれている。
偽装目的の隠しテキストや隠しリンクが含まれていると判断されたサイトは、Google のインデックスから削除され、検索結果ページに表示されなくなります。
偽装目的の隠しテキストや隠しリンクが含まれていると判断されたサイトとありますが、もしご利用になられる場合は自己責任でお願いします。
上記の基本を応用して、もうひとつ1カラムのページを作成するとします。
基本パターン同様、(X)HTML構造は最もシンプルなかたち(最も簡単な段組み)で説明します。また1カラムページ用としてbody要素に id="column-one" を指定しました。
[1]ベース
----------------------------- <body> <div id="wrapper"> ***** 省略 ***** <div id="menu"> <!-- メニュー部分 --> </div> <div id="contents"> <!-- コンテンツ部分 --> </div> <div id="rigt-sidebar"> <!-- 右サイドバー部分 --> </div> ***** 省略 *****
[2]トップページ用と任意ページ用
<body id="column-three"> --- トップページ <body id="column-one"> --- 任意のページ [1カラム]
/* ---------- 以下はメニュー部分[左サイド] ---------- */
/* -- 2カラムと3カラム共通 -- */
#menu {
float: left;
width: 180px;
}
#column-one #menu { display: none; } --- 任意のページでは非表示
/* ---------- 以下はコンテンツ部分 ---------- */
/* -- 2カラム用 -- */
#contents {
float: left;
width: 680px;
}
/* -- 3カラム用 -- */
#column-three #contents {
float: left;
width: 500px;
}
/* -- 1カラム用 -- */
#column-one #contents {
float: none;
width: 860px; [ もしくは100% ]
}
/* ---------- 以下は右サイド部分 ---------- */
#right-sidebar { display: none; } --- 通常ページ[2カラム]と任意ページ[1カラム]では非表示
#column-three #right-sidebar { --- トップページ[3カラム]では表示
display: block;
float: right;
width: 180px;
}
ブラウザ表示上は見えませんが、(X)HTML上では#right-sidebar及び#menuは存在しています。
スポンサードリンク
