| スポンサーサイト | ||
| 【--/--/-- --:--】 | ||
|
上記の広告は１ヶ月以上更新のないブログに表示されています。 新しい記事を書く事で広告が消せます。 
|
| ▲TOP |
| 羊テンプレ３カラム メニュー、記事欄の幅変更 | ||
| 【2006/03/02 09:41】 | ||
|
今朝方 koju-hitsuji1（羊３カラム）の幅変更可能の物をUPしました。 今の私のブログがそのテンプレを使用しております(*゜▽゜)ノ 幅変更方法については 追記欄に記述しますので 参考になさってください。 以前から羊テンプレをお使いの方は 最新版をDLしてから設定してください 管理画面＞ブログデザインの設定＞修正（koju-hitsuji1のテンプレートの修正です） そうすると出てきた画面に 『スタイルシートの編集 koju_hitsuji1を編集しています。』という文の下に テキストエリアがありスタイルシートの編集が出来るようになってます。 たとえば 左のメニューの幅を150pxにして右を230pxに変更 真ん中の記事の欄の幅を400にするとします。 青文字で書いてあるように すべての幅の関係を足したり引いたりして 数値を埋めていきます。 まず 全体の幅を計算します。 150px＋230px+400px＋20px＋20px＝820px （左＋右＋記事＋左隙間＋右隙間＝コンテンツの幅） となってますのでcontainerのwidthを820pxとします。 これで 全体の幅を設定しました。 次に 左側のメニューと記事欄をあわせた幅を設定します 150px＋400px＋20px＝570px （左メニュー＋記事欄＋その間の隙間） となるのでwrapperのwidthを570pxとします。 残りは そのままの数字を当てはめていきます。 primary-columnは記事欄の幅 secondary-columnは左メニューの幅 extra-columnは右メニューの幅 となっています。 /* それぞれの幅（width）の関係*/ /* secondary-column(200px)＋隙間(20px)＋primary-column(420px)＝wrapper(640px) */ /* wrapper(640px)＋隙間(20px)＋extra-column(200px)＝container (860px) */ /* これらを踏まえて幅のみ変更可能 */ div#container { width : 860px; →820pxに変更 /* コンテンツ幅を860pxに設定 （変更可能）*/ margin-left : auto; /* 左側のマージンを自動算出 */ margin-right : auto; /* 右側のマージンを自動算出 */ text-align : left; /* body要素で指定したセンタリングを戻す */ } div#wrapper { float : left; /* ラッパー（プライマリーカラム＋セカンダリーカラム）を左側に回り込ませる */ width : 640px;→570pxに変更 /* 幅を640px（420px＋200px＋隙間の20px）に設定 */ } div#primary-column { float : right; /* プライマリーカラム（記事等）を右側に回り込ませる（このテンプレではプラグインカテゴリー1） */ width : 420px;→400px /* 幅を420pxに設定 */ } div#secondary-column { float : left; /* セカンダリーカラム（メニュー等）を左側に回り込ませる （このテンプレではプラグインカテゴリー２、３）*/ width : 200px;→160px /* 幅を200pxに設定 */ } div#extra-column { float : right; /* エクストラカラム（掲示板等）を右側に回り込ませる */ width : 200px;→230px /* 幅を200pxに設定 */ } 上の色がついてる所をそれぞれ矢印で示した先の数字に変えるだけなので 一応スタイルシートに青字で書いてあるようなコメントを加えていますので 説明見なくても 判るように書いたつもりなんですが 判りにくかったらごめんなさい(;´▽｀A`` 一番難しいのは 足し算くらいかもしれない。。 判らなかったら質問箱などでコメントください。 スポンサーサイト
|
| ▲TOP |
| この記事に対するコメント | ||
|
こんにちは！ とってもかわいいので、テンプレダウンロードさせていただきました。 ありがとうございます。 幅の変更、フリースペースの変更も、はじめはわからなかったのですが、説明を読んでできました。 ありがとうございました！！
こんにちは(*^^)
テンプレ使用ありがとうございます。 私の説明で判っていただけて良かったです♪ またその他カスタム方法も載せるつもりですので 気が向いたらまた来てくださいね(*ゝ∀・*)b
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます |
| ▲TOP |
| この記事に対するコメント投稿 | ||
|
|
| ▲TOP |
