忍者ブログ
[267] [616] [269] [270] [271] [272] [273] [274] [275] [276] [277]
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

 BLOCKBLOGのメルマガで、
サンプルCSSには、左メニューばかりで、
右メニューがないといようなことが書いてあったが、

BLOCKBLOGの文書構造であれば、
基本的に左メニューのCSSがあれば、
右メニューは簡単に出来るはずなんですが。^^)
ただし、背景画像が左メニュー用のデザインだと無理ですが。^^);;

ところで、BLOCKBLOGさんのメルマガ。
これって参考になることも書いてあるので、
なんでブログにも乗せないんですかね?
不思議だ??なにか駄目な理由でもあるのでしょうか?

ということで、
簡単な方法は2通りあって、

拍手[0回]



●方法1:右メニュー用のHTMLを生成すればよい。

これは、BLOCKBLOGさんが実際に行っている方法だけど、

単純に左メニュー用だと、HTML内には、
DIV id=menu領域の次にDIV id=content領域が出現しているので、
これを、
DIV id=content領域の次にDIV id=menu領域を出現するようにすればよい。

これはBLOCKBLOGさんの方で、ページ設定で右メニュー設定指定であれば
このようにHTMLを作成するだけ。
もちろん、CSSは変らないでいいはずです。

●方法2:左メニュー設定のままで、CSSだけ変更して右メニューにするには

この方法は、普通はJavaScriptでCSSを制御するときに使う方法
なんだけど、それで出来たので、紹介します。

で、まずは、考え方なんだけど、
DIV id=menu領域とDIV id=content領域を、単純に左右入替えてやればいい。

CSSでは、この入替えを行うには、以下の方法で行うようです。
どちらのDIV領域にも、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ずらせばよい。

すなわち、CSSの

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
}

この方法は、とても簡単でいいかも。
でも、いろいろなCSSで試してないし、
OS/ブラウザも、WindowsXP sp1 / IE6.0 SP1、Mozilla1.6 , Opera7.23
しか見てないので、その他の環境ではどうなるかは分かりませんが。^^);;

●追記:
 肝心なこと知りませんでした。
 基本的に方法1は、float属性で配置しているんですよね。
 なので、通常右メニューにするには、

#menu { 内で
    float:left   →  float:right;

#contet {内で
    float:right;  →  float:left;

に変えればいいが、BLOCKBLOGさんで使っている画像が、
メニュー領域まで指定している大きさなので、
単純に上記のようには変えられないので、
この方法は、単純にはいかないみたいですね。


PR

コメント


コメントフォーム
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード
  Vodafone絵文字 i-mode絵文字 Ezweb絵文字


トラックバック
この記事にトラックバックする:
忍者ブログ [PR]
カレンダー
09 2017/10 11
S M T W T F S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
フリーエリア
[-]最新トラックバック
プロフィール
HN:
7maru
性別:
非公開
自己紹介:

バーコード
ブログ内検索
[+]アーカイブ
アクセス解析