ヘッダー画像部分

カスタマイズ方法

デザインテンプレートのヘッダー画像の変更、及び、ホームページテンプレート枠のヘッダー部分に画像を表示させます。

デザインテンプレート

CSSファイルの以下の部分です。(DL時の860pxで変更する事を前提としています。また、背景に使用する画像の名前はheader.jpgとし元画像に上書き保存したと仮定しています。)

デザインテンプレート変更部分

style.css

[3] 各ブロック毎の画像指定
      3-1 外側のブロック
      3-2 内側のブロック

1枚画像の時は下記どちらかへ指定し、不要な方を削除します。

/*
[3-1] 各ブロック外側部分
----------------------------------------------------------------------*/
#header { background: url(image/bg-header.jpg) repeat-x 0 100%; } 

/*
[3-2] 各ブロック内側部分
----------------------------------------------------------------------*/

/* ヘッダー中枠 */
.header-inner { 中身を削除 }

配置を指定します

/*
[3-1] 各ブロック外側部分
----------------------------------------------------------------------*/
#header { background: url(image/bg-header.jpg) repeat-x 0 100%; } 

赤字部分repeat-xをno-repaetへ変更

赤字部分0 100%部分で細かな調整をして下さい。

CSSファイルの以下の部分です。(DL時の860pxで変更する事を前提としています。また、背景に使用する画像の名前はheader.jpgとし元画像に上書き保存したと仮定しています。)

デザインテンプレート変更部分

style.css

[3] 各ブロック毎の画像指定
      3-1 外側のブロック
      3-2 内側のブロック)

1枚画像の時は下記どちらかへ指定し、不要な方を削除します。

/*
[3-1] 各ブロック外側部分
----------------------------------------------------------------------*/
#header { background: url(image/bg-header.jpg) repeat-x 0 100%; } 

/*
[3-2] 各ブロック内側部分
----------------------------------------------------------------------*/

/* ヘッダー中枠 */
.header-inner { 中身を削除 }

配置を指定します

/*
[3-1] 各ブロック外側部分
----------------------------------------------------------------------*/
#header { background: url(image/bg-header.jpg) <span>repeat-x 0 100%</span>; } 

赤字部分repeat-xをno-repaetへ変更

赤字部分0 100%部分で細かな調整をして下さい。

テンプレート枠

CSSファイルの以下の部分です。(DL時の860pxで変更する事を前提としています。また、背景に使用する画像の名前はheader.jpgとし保存したと仮定しています。)

テンプレート枠変更部分

wm-base-layout.css

[3-3] 各ブロックの背景等を指定(外枠部分)
[3-4] 各ブロックの背景等を指定(内枠部分)

1枚画像の時は下記どちらかへ指定し、不要な方を削除します。

/*
[3-3] 各ブロックの背景等を指定(外枠部分)
-----------------------------------------------------------------------
自由に指定して下さい */

/* ヘッダー部分背景指定など */
#header { background-color: #cf6; }

#header { background: url(image/bg-header.jpg) no-repeat 0 100%; }
/*
[3-4] 各ブロックの背景等を指定(内枠部分)
-----------------------------------------------------------------------
自由に指定して下さい */

/* ヘッダー部分背景指定 */
.header-inner { }

配置を指定します

赤字部分0 100%部分で細かな調整をして下さい。

コメント

   
 

高品質で低価格!ホームページ制作・ネットショップ制作・Wordpressを利用したCMSサイト制作等、随時承っております。

どうぞお気軽にお問い合わせください。