全体/背景/レイアウトに関するカスタム

ここではサイト全体に関するカスタマイズの紹介をします。

全体のデザインを整えるだけである程度サイトの印象を変えることができます。

背景を変える

CSSに下記を追加してください。

 

body {

background:url(画象ファイルno-repeat;

}

 

CSSに上記の記述を入れることで背景画像を変更できます。

画象ファイルの箇所は管理バーのレイアウト>独自レイアウト>ファイル

より背景にしたい画象ファイルをアップロードしてください。

 

no-repaetの箇所は背景をリピートしない設定です。

 

no-repaetを

repeat-xに変更で横にリピート

repeat-yに変更で縦にリピート

 

以上で背景が設定出来ました。

 

 

 

コンテンツ全体の幅を変える

コンテンツ全体の幅を変えることがレイアウトの基本です。

この基本レイアウトを担っているCSSはID名#containerです。

 

CSSで#containerを探してみましょう。

するとデフォルトの独自レイアウトで下記のように記述があります。

 

#container
{
margin:0 auto;
width:834px;
}

 

これを見つけたらこっちのものです!
見れば何となく分かると思いますが、そう答えは簡単。

width:834px; を変更すれば幅が変わります。

当サイトは幅を980pxまで広げています。

 

#container
{
margin:0 auto;
width:980px;
}

 

これで幅が広がりました!

しかし、全体の幅を広げるとナビゲーションとメインコンテンツの幅を調整する必要が出てきます。そこで続いてナビゲーションとメインコンテンツの幅も調整しましょう。

 

 

サイドナビゲーションとメインコンテンツの幅を変える

 

ナビゲーションのID名は#navigation

 

#navigation {
float:left; width:220px; padding:17px;
}

 

メインコンテンツのID名は#content 

#content {
float:right; width:680px; padding:17px;
}

 

それぞれの幅をうまく調整して幅が綺麗に揃うようにしましょう。

 

ここでワンポイントテクニック!

 

ナビゲーションとメインコンテンツの左右を入れ替えるテクニックですが
float:left;
float:right;
これを入れ替えるだけでナビゲーションとメインコンテンツの左右を入れ替えることができます。
デフォルトでは左にナビゲーションですがそれを入れ替えることが簡単にできてしまいます。

 

ぜひお試しください!