趣味でいろんな事やってます。今はテンプレートやカスタマイズ方法 HTML CSSについて書いています。『完成!』とか『クリア!』と達成感を味わいたい。 そんなこんなで へたのヨコズキ 趣味紹介ページです。
 
 
 
 
 
 
スポンサーサイト
 
 
【--/--/-- --:--】
 
 
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


 賞金クリックランキング ブログランキング・にほんブログ村へ FC2ブログランキング 人気ブログランキング
 
 
 
▲TOP
 
 
 
 
羊テンプレ3カラム メニュー、記事欄の幅変更
 
 
【2006/03/02 09:41】
 
 
今朝方 koju-hitsuji1(羊3カラム)の幅変更可能の物を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; /* セカンダリーカラム(メニュー等)を左側に回り込ませる (このテンプレではプラグインカテゴリー2、3)*/
width : 200px;→160px /* 幅を200pxに設定 */
}
div#extra-column {
float : right; /* エクストラカラム(掲示板等)を右側に回り込ませる */
width : 200px;→230px /* 幅を200pxに設定 */
}

上の色がついてる所をそれぞれ矢印で示した先の数字に変えるだけなので
一応スタイルシートに青字で書いてあるようなコメントを加えていますので
説明見なくても 判るように書いたつもりなんですが 判りにくかったらごめんなさい(;´▽`A``

一番難しいのは 足し算くらいかもしれない。。
判らなかったら質問箱などでコメントください。
スポンサーサイト

 賞金クリックランキング ブログランキング・にほんブログ村へ FC2ブログランキング 人気ブログランキング
テンプレート >> ブログ
 
 
 
▲TOP
 
 
 
 
この記事に対するコメント
 
 

こんにちは!
とってもかわいいので、テンプレダウンロードさせていただきました。
ありがとうございます。

幅の変更、フリースペースの変更も、はじめはわからなかったのですが、説明を読んでできました。
ありがとうございました!!
【2006/03/04 11:33】 URL | あい #- [ 編集]

こんにちは(*^^)
テンプレ使用ありがとうございます。
私の説明で判っていただけて良かったです♪
またその他カスタム方法も載せるつもりですので
気が向いたらまた来てくださいね(*ゝ∀・*)b
【2006/03/04 13:16】 URL | コジュ #mXYcHdTk [ 編集]

管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
【2006/03/22 20:21】 URL | # [ 編集]

管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
【2006/03/22 23:17】 URL | # [ 編集]

 
 
 
▲TOP

 
 
 
 
この記事に対するコメント投稿
 
 















 
 
 
▲TOP

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。