FC2ショッピングカートのロゴを色々変える方法 | もーええやん

もーええやん

無気力こそ境地

サカイです。FC2ショッピングカートのカスタマイズです。

かなり重要なことを忘れてました。

ホームページのロゴについてです。

この設定はややこしいことに、FC2ショッピングカートの場合、

選ぶテンプレートによって設定方法が異なります。。

一番確実な方法は、

ご自身のページをソース表示し、その中にある画像ファイル(.gif .png .jpg)などを探し出すことです。

その画像URLを表示するよう命令しているCSSを書き換えれば、ロゴを書き換えることができます。

私がやっていたFC2ショッピングカートはGREENというテンプレートを使っていました。

http://forace.cart.fc2.com/

これです。今は跡地になっていますが、見ていただくとわかるように、

タイトルのロゴはフラッシュになっています。

フラッシュを追加する方法はあとで述べますが、

このテンプレートでの画像変更は下記の通りです。

テンプレートカスタマイズページに行きます。

1. 「rogo」でCSSをページ内検索をします。

#rogo{ background-image:url("ここを書き換える"); background-repeat:no-repeat; width:900px; height:200px; margin: 0 0 10px; }

このような文章があるので「ここを書き換える」の部分をアップロードした画像ファイルに書き換えます。
(" などを消さないよう注意しましょう。

width:900px; height:200px;というのは画像の大きさです。

横幅が900PX、縦が200PXということです。

これより小さい画像をアップすると無理やり引き伸ばされるので、小さい画像にしたい場合はここの数値を書き換える必要があります。

400×100だった場合は

width:400px;height:100px;
このように書き換えます。
・画像じゃなくフラッシュ(FLASH)を設置する方法

実はこの方法、無理やりです。

まずは上記で紹介した画像ファイルを消します。

消すと言っても、CSSを丸ごと消すと画面が真っ白になります。。

ということで、このように書き換えます。

#rogo{ background-image:url(""); background-repeat:no-repeat; width:900px; height:200px; margin: 0 0 10px;  }
("") のようにURL全てを消してしまいます。
ただし、HTMLは残っているようにします。

こうすると、タイトルの部分のロゴは何も表示されなくなり、ショップ名のタイトルだけが表示されるようになります。

次にショップタイトルが邪魔なので、これも同じように消します。

今度はCSSではなく、HTMLのほうをいじります。

<h1><a href="{top_url}">{shop_name}</a></h1>

これを丸ごと消します。もし消さずにカスタマイズしたい場合は

<h1><a href="http://yahoo.co.jp">こちらからヤフーに移動できます。</a></h1>


} 中かっこを消し、URLと文字を入れるとカスタマイズができます。

今から行うフラッシュには必要ないので、削除します。

もちろんあってもいいですが、邪魔にならないよう端にするなどしたほうがデザイン的に綺麗だと思います。

では、長い前置きでしたが、フラッシュの設置方法です。

実はよく知られている設置タグでは反応しません。

<param name="allowScriptAccess" value="always">
<embed
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer"
width="900" height="150" align="middle"
src="https://cart1.fc2.com/upfile/f/forace/4ace.swf"
allowScriptAccess="always"><noembed> フラッシュアニメを見るにはプラグインが必要です。</noembed>
赤文字の部分がないと、フラッシュを設定しても表示されません。

<noembed> フラッシュアニメを見るにはプラグインが必要です。</noembed>

の部分はフラッシュプレーヤーがない人に表示されるメッセージです。

なくても問題はありません。(たぶん)

青い文字の部分が、ご自身で作ったフラッシュを呼び出すURLです。

先ほどの画像同様、大きさの設定を間違わないよう注意しましょう。

設置場所はテンプレートGREENだとここ。

  <!-- ロゴ画像 start --> <div id="rogo"><param name="allowScriptAccess" value="always">
<embed
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer"
width="900" height="150" align="middle"
src="https://cart1.fc2.com/upfile/f/forace/4ace.swf"
allowScriptAccess="always"><noembed> フラッシュアニメを見るにはプラグインが必要です。</noembed>
<!-- shopname start-->  <!-- [FC2 Analyzer] http://analyzer.fc2.com/  --> <!-- Tag for http://forace.cart.fc2.com --><script language="javascript" src="http://analyzer52.fc2.com/ana/processor.php?uid=414914&pid=3850931" type="text/javascript"></script> <noscript><div align="right"><img src="http://analyzer52.fc2.com/ana/icon.php?uid=414914&pid=3850931&ref=&href=&wid=0&hei=0&&col=0" /></div></noscript> <!-- [FC2 Analyzer]  -->
<!-- shopname end --> </div> <!-- ロゴ画像 end -->
もちろん前後に文字を入れてもいいですし、実はやろうと思えば同じような方法で、商品の各ページにフラッシュを設置したりすることができます。

ただしその場合はすべての商品に同じフラッシュが貼り付けられるため、商品の種類が多い場合は番宣用には向きません。。(早くyoutube貼れるようになったらいいのにね)

現在、FC2ショッピングカートではyoutubeを設置することはできません。

商品の説明に動画は非常に効果的なので、是非検討してもらいたいですね。

FC2リクエストというサービスで、FC2にしてほしいことをリクエストできます。

そこに私が勝手に立てたリクエスト板があるので、ショッピングカートにyoutubeを貼れるようしてほしい人は一票をよろしくお願いします。

今日はここまで。

他のショッピングカート業者に比べて、痒いところに手が届くショッピングカートなのは間違いありません。

カスタマイズもコツがわかればやり放題ですし、ただし、そのためには何度かプレビューをして、変更点がどの位置に反映されたか確認する地道な作業とHTMLのそれなりの知識が必要です。

ググればある程度出てきます。

ご自身のショッピングカートなので時間を惜しまずゆっくりカスタマイズしてくださいー!