ＢＬＯＣＫＢＬＯＧのメルマガで、
サンプルＣＳＳには、左メニューばかりで、
右メニューがないといようなことが書いてあったが、
ＢＬＯＣＫＢＬＯＧの文書構造であれば、
基本的に左メニューのＣＳＳがあれば、
右メニューは簡単に出来るはずなんですが。^^)
ただし、背景画像が左メニュー用のデザインだと無理ですが。^^);;
ところで、ＢＬＯＣＫＢＬＯＧさんのメルマガ。
これって参考になることも書いてあるので、
なんでブログにも乗せないんですかね？
不思議だ？？なにか駄目な理由でもあるのでしょうか？
ということで、
簡単な方法は２通りあって、
●方法１：右メニュー用のＨＴＭＬを生成すればよい。
これは、ＢＬＯＣＫＢＬＯＧさんが実際に行っている方法だけど、
単純に左メニュー用だと、ＨＴＭＬ内には、
DIV id=menu領域の次にDIV id=content領域が出現しているので、
これを、
DIV id=content領域の次にDIV id=menu領域を出現するようにすればよい。
これはＢＬＯＣＫＢＬＯＧさんの方で、ページ設定で右メニュー設定指定であれば
このようにＨＴＭＬを作成するだけ。
もちろん、ＣＳＳは変らないでいいはずです。
●方法２：左メニュー設定のままで、ＣＳＳだけ変更して右メニューにするには
この方法は、普通はJavaScriptでＣＳＳを制御するときに使う方法
なんだけど、それで出来たので、紹介します。
で、まずは、考え方なんだけど、
DIV id=menu領域とDIV id=content領域を、単純に左右入替えてやればいい。
ＣＳＳでは、この入替えを行うには、以下の方法で行うようです。
どちらのＤＩＶ領域にも、position属性で相対位置「relative」を指定し、
この場合は、左右を入れ替えるので、
left属性で、
両方の領域が現在の最左位置よりどれだけずれるかを指定する。
例えば、見返り美人だと、
menu領域の最左位置は、
content領域の横幅が
520px(= PADDING-RIGHT:10px + PADDING-LEFT:10px + WIDTH:500px)なので、
最左位置を右に520pxずらす。
content領域の最左位置は
menu領域の横幅が
300px(= PADDING-RIGHT:50px + PADDING-LEFT:50px + WIDTH:200px)なので、
最左位置を左に300pxずらせばよい。
すなわち、ＣＳＳの
menu領域は、
#menu {
PADDING-RIGHT: 50px; PADDING-LEFT: 50px; FLOAT: left;
PADDING-BOTTOM: 5px; MARGIN: 0px; WIDTH: 200px;
PADDING-TOP: 5px
}
の先頭にposition:relative; left:520px;を追加するだけ。
↓
#menu {
position:relative; left:520px;
PADDING-RIGHT: 50px; PADDING-LEFT: 50px; FLOAT: left;
PADDING-BOTTOM: 5px; MARGIN: 0px; WIDTH: 200px;
PADDING-TOP: 5px
}
content領域は、
#content {
BORDER-RIGHT: #000000 0px solid; PADDING-RIGHT: 10px;
BORDER-TOP: #000000 0px solid; PADDING-LEFT: 10px;
FLOAT: left; PADDING-BOTTOM: 10px;
BORDER-LEFT: #000000 0px solid; WIDTH: 500px;
PADDING-TOP: 10px; BORDER-BOTTOM: #000000 0px solid
}
の先頭にposition:relative; left:-300px;を追加するだけ。
↓
#content {
position:relative; left:-300px;
BORDER-RIGHT: #000000 0px solid; PADDING-RIGHT: 10px;
BORDER-TOP: #000000 0px solid; PADDING-LEFT: 10px;
FLOAT: left; PADDING-BOTTOM: 10px;
BORDER-LEFT: #000000 0px solid; WIDTH: 500px;
PADDING-TOP: 10px; BORDER-BOTTOM: #000000 0px solid
}
この方法は、とても簡単でいいかも。
でも、いろいろなＣＳＳで試してないし、
ＯＳ／ブラウザも、WindowsXP sp1 / IE6.0 SP1、Mozilla1.6 , Opera7.23
しか見てないので、その他の環境ではどうなるかは分かりませんが。^^);;
●追記：
肝心なこと知りませんでした。
基本的に方法１は、float属性で配置しているんですよね。
なので、通常右メニューにするには、
#menu { 内で
float:left → float:right;
#contet {内で
float:right; → float:left;
に変えればいいが、BLOCKBLOGさんで使っている画像が、
メニュー領域まで指定している大きさなので、
単純に上記のようには変えられないので、
この方法は、単純にはいかないみたいですね。
[0回]
