So-net無料ブログ作成
検索選択
メッセージを送る

kuu♪からのお知らせ

■スキンを作るコツは、とにかくプレビューで確認することです。
 数字を替えた! 色を替えた! 画像を替えた!そのたびにプレビュー! で確認!
 そしてこまめに保存してください。

■コメントをたくさんいただいているのですが返信もままならない状況ですのでしばらくの間コメントの受付を停止させていただきます。ごめんなさい。

また、管理人kuuがしばらくソネブロを離れている間に随分仕様の変更等あったみたいですので、当ブログの記述では対応できないものも出ているかもしれません。

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

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


 

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

3ペイン-振り分け


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

3ペイン-左にサイドバーを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;
}

 


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

3ペイン-右にサイドバーを2つ

①スタイルシート編集の一番下の方に
#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;
}


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


nice!(2)  コメント(0) 
共通テーマ:blog

nice! ありがとう 2

コメント 0

コメントの受付は締め切りました

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

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

  

         

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。