ヘッダ部分の画像  【解決済み】

困った時はこちらで質問してください。回答を担当する人は特に決まっていませんので、分かる方は回答をお願いします。
アバター
COCO

ヘッダ部分の画像

投稿記事by COCO » 2008/7/31 11:28

お世話になります。
ヘッダ部分の画像の大きさ(header_bg.jpg)を変更したいのですが、
どこを書き換えればいいのでしょうか?
具体的には、もう少し縦に長く設定したいです。

過去ログで調べたところzen-cart-v1.1.0-l10n-ja-0.9.6.1での
設定方法がありましたが、zen-cart-v1.3.0.2-l10n-jp-3を
使用しております。

よろしくお願いします。
アバター
kimono
記事: 1995
登録日時: 2005/9/27 13:30
お住まい: 大阪府大阪市天王寺区上本町
連絡を取る:

Re: ヘッダ部分の画像

投稿記事by kimono » 2008/7/31 17:43

こんにちわ。kimonoです :)
includes/languages/japanese/header.php
で記載されております。
define('HEADER_LOGO_IMAGE', 'logo.gif');
この部分ですね。こちらを変更したい場合は、このファイルをEUCの弄れるファイルで修正・変更し、
define('HEADER_LOGO_WIDTH', '192px');
define('HEADER_LOGO_HEIGHT', '64px');
でサイズの変更も行い、オーバーライドで、
includes/languages/japanese/ご自身のテンプレート名/header.php
としてアップ、
includes/templates/ご自身のテンプレート名/images/
にlogo.gifと同様にアップしてください。logo.gifもここにあります。
アバター
COCO

Re: ヘッダ部分の画像

投稿記事by COCO » 2008/7/31 21:52

kimonoさん、こんにちは。

早速ご返事いただきまして、ありがとうございます。
私の質問が不十分で申し訳ないのですが、
ロゴの部分ではなくて、classicテンプレートの場合、
includes/templates/classic/imagesの中にあるheader_bg.jpgが
表示される部分(鳥居と青空が出ている写真 760px×110px)の写真を
差し替えて領域を広げるには、どのようにすれば良いのでしょうか?

ご面倒をおかけしますが、よろしくお願いします。
COCO
アバター
うさぎっち
記事: 25
登録日時: 2006/4/27 01:45

Re: ヘッダ部分の画像

投稿記事by うさぎっち » 2008/8/01 00:54

デモサイトと同じ構造である、ということを前提に。
ロゴ画像は別に用意して、背景にある鳥居画像を入れ替えて領域=サイトの横幅を広げる、ということでよろしかったでしょうか?
http://zen-cart.jp/zen-cart-v1.3.0.2-l10n-jp-3/ (デモサイト)

でしたら、スタイルシートの変更だけでいけると思います。
includes/templates/ご自身のテンプレート名/css/stylesheet.css

152行目 領域を広げる
/*wrappers - page or section containers*/
#mainWrapper {
background-color: #ffffff;
text-align: left;
width: 750px; /* ←ここをご希望の幅に */
vertical-align: top;
}

63行目 写真の差し替え
table.header {
background-color:#FFFFFF;
background-image:url(../images/header_bg.jpg); /* ←ここを希望の画像と入れ替える */
background-repeat:repeat-x;
border-bottom:1px solid #9A9A9A;
border-left:1px solid #9A9A9A;
border-right:1px solid #9A9A9A;
}

写真の差し替えは差し支えないようであれば該当する画像を直接上書きでも良いかと。
アバター
COCO

Re: ヘッダ部分の画像

投稿記事by COCO » 2008/8/01 07:14

うさぎっちさん、こんにちは。

早速ご返答いただきまして、ありがとうございます。
おっしゃるとおり幅もなのですが、デモサイトと同じ構造で、
縦の幅を広げる場合も単純に

width: 750px; 
height: 200px; //153行目にこの部分を追加//

・・・すればよろしいのでしょうか?
よろしくお願いします。
COCO
アバター
うさぎっち
記事: 25
登録日時: 2006/4/27 01:45

Re: ヘッダ部分の画像

投稿記事by うさぎっち » 2008/8/01 11:14

高さの変更をCSSでやるなら #mainWrapper はサイト全体が入ってるボックスなので
そこではなくて、ヘッダ部分の要素が入ってる部分

63行目 table.header {} 内に
height:200px;
を追加してみてください。

ただこのテーブル、ヘッダ部分のテンプレートファイル
includes\templates\ご自身のテンプレート名\common\tpl_header.php
53行目付近で
<td valign="middle" height="<?php echo HEADER_LOGO_HEIGHT; ?>" width="<?php echo HEADER_LOGO_WIDTH; ?>">
のように、kimonoさんが言われている
includes/languages/japanese/header.php
ファイル内からヘッダの画像のサイズを拾うようになっているようなので
正規のやり方で高さの変更をするならkimonoさんが書かれている方法が正しいのかも。

多分CSSだけでも見た目は変わると思いますが、うまくいかなければ上記を参考にいろいろ試してみてください :wink:
アバター
COCO

Re: ヘッダ部分の画像

投稿記事by COCO » 2008/8/01 15:38

うさぎっちさん>

ご指導いただきましてありがとうございます。
初心者の私にとっては、ちょっとハードルが高いかもしれません。
kimonoさんが教えていただいた方法なら出来そうなので
いろいろ試してみます。

ありがとうございました。
COCO
アバター
automatic38
記事: 1
登録日時: 2009/1/21 03:01

Re: ヘッダ部分の画像

投稿記事by automatic38 » 2009/2/12 23:15

横槍すいません。
私もCOCOさんと同じことをしたくていろいろ探っているうちにここにきました。
そして以下の方法でheader_bg.jpg(760 x 110 pixel) を縦に長いサイズの画像(760 x 300 pixel) に変更できましたのでコメントさせてください。


以下はstylesheet_original.css内です

/*HEADER CSS*/

TABLE.header {
background-image: url(../images/header_bg.jpg);
background-repeat: repeat-x;
background-color: #ffffff;
border-right: 1px solid #9a9a9a;
border-left: 1px solid #9a9a9a;
border-bottom: 1px solid #9a9a9a;

height: 300px;     /*ここを追加しました*/
}


同じ内容で悩んでいる人の助けになれば幸いです。
アバター
kokoru

Re: ヘッダ部分の画像

投稿記事by kokoru » 2010/7/15 15:41

すみません。横レスです。
↑automatic38さんの上記のようにstylesheet_original.css内に
height: ■■■px;をいれましたら、全体の高さが低くなってしまいました。
全体の高さがヘッダの高さによって調節されてしまうようです。
ヘッダの高さを変更したら、全体も高くなるようにするには
どうしたらよいのでしょうか?
アバター
marucome09
記事: 48
登録日時: 2013/3/06 16:23

Re: ヘッダ部分の画像  【解決済み】

投稿記事by marucome09 » 2013/5/04 17:21

私も便乗させて下さい。

高さを調整したら画面が2つ縦に重なるようになってしまいました。

どこを見るべきでしょう・・・・

http://www.teambluewing.com/store/
アバター
@電材
記事: 157
登録日時: 2009/7/11 00:56
お住まい: 大阪府
連絡を取る:

Re: ヘッダ部分の画像

投稿記事by @電材 » 2013/5/09 10:08

高さを調整したら画面が2つ縦に重なる


見てみましたが、直ってる状態ですよね?

画像の大きさと、画像の領域のサイズが合っていないとダブるように見えますが、画像の領域の背景色が指定されている場合があります。
登録する画像とCSSの比率でも変わる場合があるので注意が必要です。

#logoWrapperの場合、classicだと

コード: 全て選択

#logoWrapper{
   background-image: url(../images/header_bg.jpg);
   background-repeat: repeat-x;
   background-color: #ffffff;
   height:196px;
   }


となってますが、背景を縦に同じ柄で繰り返す場合はrepeat-xだと横方向の繰り返し指定なのでy方向への指定もしくはrepeatにすれば縦横に繰り返しになります。
縦横のサイズをピクセルで指定するとbackground-colorは残ったままなので、サイズを間違えると背景色が出てしまうこともあるので、直感的に作業する場合はbackground-colorをコメントアウトしてみたりで試せばいいかと思います。
全体のページの幅が指定されていれば、ピクセル指定でなく%での指定でもいい場合もあります。

ボックスの画像の場合は、両サイドの高さとコンテンツの高さを分ける場合は、画像を別に用意するか、CSSを分けてやる必要があります。

例えば

コード: 全て選択

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxConte


あくまでも適当に抜き取ったコードですが・・
このコード以下に画像が指定されている場合、これら全てにその指定項目が反映されてしまうので.leftBoxHeadingを分離したりするとボックスごとの画像指定が可能です。

この作業は直感ではなく、地道な作業になりますが、細かくやれば、オリジナリティは増してきます。

CSSが複雑になると、見え方がブラウザによって変わってくることもあるので

microsoft expression superpreview 4 trial

このツールであれば、IE6~IE9での見え方がわかりますのでお勧めです。
単なる趣味のサイトhttp://zairyo.ne.jp
アバター
marucome09
記事: 48
登録日時: 2013/3/06 16:23

Re: ヘッダ部分の画像

投稿記事by marucome09 » 2013/5/09 14:47

@電材さん:

じつはこれ、IE10だとでないんですよ(笑
IE9だと見事にでたのであせったわけですが・・・

で、ヘッダ表示の一部にゴミコードがはいってたので、取り除いたのですが・・・

とりあえず様子見してあります。

#多分トラップの取り残しだとおもいますが・・・いつやっちゃったんだろう?(^^;;;

場所はinclude\templates\××(テンプレート名)\common\tpl_header.phpの55行目近辺、

コード: 全て選択

    <li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li>
<?php } } ?>


のあとにへんなaタグがはいってました。^^;;;;;;

大変お騒がせしました・・・・

“Zen Cart 質問コーナー” へ戻る