kuu♪からのお知らせ

長年公開してきたカスタムスキンへの道ですが、
新しいサイト　Harbot's field内の「ssブログ（so-netブログ）のカスタマイズ方法」　へ引っ越しをします。

徐々に時間をかけて引っ越す予定で、今よりも見やすいサイトに変更しています。

今後ともよろしくお願いいたします。

3ペインのサイドバーの位置を変える

so-netより、この変則３ペインと同じ形のスキンが配布されるようになりました。
そちらをアレンジして、カスタマイズしたほうがよりきれいに出来ると思います
09.02.18　

---

 

通常の3ペインの場合、サイドバーは両サイドに振り分けられます。
これを、サイドバーを左に2つ、もしくはサイドバーを右に2つ　にする方法です。

---

【サイドバーを左に２つ】にする方法

①スタイルシート編集の一番下の方に

#side-a { float:left; width:170px; } #side-b { float:right; width:170px; }

もしくは

#side-a { float:left; } #side-b { float:right; }

というのがあります。

この下にこのタグを書き込みます。

#main { float:right; }

 

こんな感じです。 (完成後のタグ）

#side-a { float:left; width:170px; } #side-b { float:right; width:170px; } #main { float:right; }

 

---

【サイドバーを右に２つ】にする方法
　＊少し手順が多いので、間違えないようにしてください。

①スタイルシート編集の一番下の方に

#side-a { float:left; width:170px; } #side-b { float:right; width:170px; }

もしくは

#side-a { float:left; } #side-b { float:right; }

というのがあります。

1.）このタグの中身を書き直します。（青文字の部分が訂正後です。）

#side-a { float:right; width:170px; } #side-b { float:left; width:170px; }

もしくは

#side-a { float:right; } #side-b { float:left; }

 

2.）この下にこのタグを書き込みます。

#main { float:left; }

 

こんな感じです。 (完成後のタグ）

#side-a { float:right; width:170px; } #side-b { float:left; width:170px; }  #main { float:left; }

 

②スタイルシート編集の中ほどにある　
　　/* Articles */　#main {　に”margin-right:10px;”　を付け加えます。
　　数字は自分でバランスを見ながら変えてください。
　　又、”margin-left:10px;”など入っていたらそれは消してください。

/* Articles */ #main { width:540px; margin-right:10px; overflow:hidden; }

③デザイン　→　レイアウト　→　コンテンツ配置　でサイドバーの部分を入れ替えてください。

タグ：ソネット ソネットブログ So-net blog カスタムスキン カスタマイズ サイドバーを左に２つにする サイドバーを右に２つにする

ありがとうございます♪♪

記事が役に立たれたら、下のバナーの興味があるものをクリックしてもらうとうれしいです。