上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 横幅可変式「スタンダード・2ヴァリアブル」のカラムの左右替えについての説明です。
 普通のテンプレートとはカスタマイズ方法が若干違います。




構造とカスタム



スタンダード・2ヴァリアブルのカラム構造

 実際は、幅がブラウザの横幅の「98%」サイズのメインボックスの上に、300px固定幅のサイドバーをポジションでのっけている状態です。
 そのままでは、本文アイテムがサイドバーの下に隠れてしまうので、右側に「padding:310px」で空間を作り、本文アイテムを、右から300px分押しのける形にしています。

 実際にデフォルトの左カラムを右カラムにするには、以下の2箇所をカスタマイズします。


CSS
/* 記事・コメントまで含むボックス */
#main{
position:relative;
padding:15px 310px 15px 0;
z-index:1;
min-width:300px;
}
/* サイドバーボックス */
#side{
font-size:12px;
width:300px;
overflow:hidden;
padding:10px 0 60px;
z-index:2;
border-top:1px solid #333;
background:#fff;
position:absolute;
top:1px;right:0px;
border-left:1px solid #333;
}


 赤字部分を、以下の青字のように変えれば完成です。
(同じ場所を探し、そのまま上書きしてもOK。)

/* 記事・コメントまで含むボックス */
#main{
position:relative;
padding:15px 0 15px 310px;
z-index:1;
min-width:300px;
}
/* サイドバーボックス */
#side{
font-size:12px;
width:300px;
overflow:hidden;
padding:10px 0 60px;
z-index:2;
border-top:1px solid #333;
background:#fff;
position:absolute;
top:1px;left:0px;
border-left:1px solid #333;
}


※サイドバーの幅なども調節できます。300,310という数値をそれぞれ調節して下さい。


■テンプレート詳細ページへ戻る。
スタンダード・2ヴァリアブル
このエントリーをはてなブックマークに追加
Thu.06.30.2011
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。