『川中重司、ほのぼのIT税理士!(^^)のブログ』のバックアップブログです。07)MovableType・NucleusEC-CUBE:トップページの画像を変更するには

EC-CUBE:トップページの画像を変更するには

EC-CUBEのプチ(^^ゞカスタマイズ。
今回は、トップページの画像変更です。

EC-CUBEのデフォルトのトップページはこうなっています。

EC-CUBE:トップページの画像を変更するには01
(クリックで拡大されます。)

いくら便利なECサイト構築ツールといえども、このままでは使えない場所が3点。
A.ヘッダー左側のロゴ(画像)
B.ヘッダー右側の電話番号・FAX番号・営業時間(画像)
C.中央の画像(画像)

今回は、これを変更してみましょう。

一番手っ取り早い方法は、新しい画像を、現在使われているファイルと同じファイル名でサーバーにUpすること。

では、下記の手順で進めましょう。
1.現在のファイル名の確認
2.新しいファイルの用意
3.準備したファイルをサーバーにUp


1.現在のファイル名の確認
(今回は、ちょっと力業です。EC-CUBEの操作でも確認できるのですが、ちょっと探しにくいので・・・。)
まず、先日の記事『EC-CUBE:まずはテンプレートのバックアップ』の方法でテンプレートのバックアップを取り、そのバックアップファイルを解凍。

EC-CUBE:トップページの画像を変更するには02
フォルダ”header”の中に、ヘッダー部分で使用している画像が有ります。
『logo.gif』が、A.ヘッダー左側のロゴ
『bg.gif』が、B.ヘッダー右側の電話番号・FAX番号・営業時間

EC-CUBE:トップページの画像を変更するには03
フォルダ”main”の中に、メイン部分で使用している画像が有ります。(今回は1枚しか有りませんが。)
『image.gif』が、C.中央の画像


2.新しいファイルの用意
『logo.gif』の大きさは、302x81
『bg.gif』の大きさは、780x95
『image.gif』の大きさは、400x200
これらと同じ大きさの画像を準備。
なお、『bg.gif』の場合は、画像加工ソフト(JTrimなど)で番号を書き換えると手っ取り早いでしょう。


3.準備したファイルをサーバーにUp
EC-CUBE:トップページの画像を変更するには04
(クリックで拡大されます。)

『EC-CUBE』の管理画面で、「コンテンツ管理」==>>「ファイル管理」と進みます。(ここで、『EC-CUBE』のファイルの操作ができます。画像ファイルの確認も出来ます。)

この画面で、置き換えるファイルを削除し、用意した新しいファイルをアップロードすれば、作業完了です。

上手くできましたか?


 税理士法人川中経営
  税理士・ITC 川中重司


1.『logo.gif
2.『bg.gif
3.『image.gif



川中は、ツイッターで時々つぶやいています。よろしければご覧下さい。
川中は、ツイッターで時々つぶやいています。よろしければご覧下さい。



このブログ記事について

このページは、鯖江の税理士が2008年10月 7日 00:00に書いたブログ記事です。

ひとつ前のブログ記事は「縁日で見かけた優れもの」です。

次のブログ記事は「EC-CUBE:トップページの『色』を変更するにはCSSファイルの編集を」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。