は最低限の設定が終わりました。今回はデザインを設定してみようと思います。
ＦＣ２無料ショッピングカート
はかなり変わったシステムになっており、ただＨＴＭＬを知っているだけだとカスタマイズがややこしかったりします。独自の記号に置き換えたリンクがあるため、文字を読めばなんとなくわかるのですが、その設定を間違えるとページが表示すらされなくなるという糞仕様。
ちなみにＦＣ２無料ショッピングカート
には２種類デザイン設定があります。・簡単ページ
・テンプレート
簡単ページは文字通り簡単です。ロゴやレイアウトを選択するだけでデザインを決められます。
ログインボタンの下に商品のリンクをつけたい！などのカスタマイズはテンプレートでしかできない。
さらに商品を紹介している画面の部分を大きくしたり、メニューの幅を広げたりするのも簡単ページではできない。
いわばブログのデザインを変えるのと同じことしかできないのが簡単ページ。
ＨＴＭＬを知っていればテンプレートを使うと、結構なカスタマイズができます。
では、管理画面から両方の設定方法を見ていきます。
ログインしたら、左メニューのデザイン設定をクリック。
そうすると「デザイン・表示の設定」という文字をクリック。
デザインの設定という画面が出てきて、その下に4つのメニューが出てきます。
「表示設定」 「簡単ページ設定」 「ＰＣ用テンプレート設定」 「携帯用テンプレート設定」
これらを「上の4つのメニュー」ということにします。
デザインの設定を押して出てきているページを見ていただくと
「ＰＣ版表示の設定」・・・
「携帯版表示の設定」・・・
と出ています。
これは先ほど紹介した上の4つのメニューのうちの「表示設定」を押すと出てくる画面です。
「ＰＣ版表示の設定」から見ていきましょう。
ショップ名というところが、ホームページに表示されるショップの名前です。
簡単ページに設定していると、そのショップ名がホームページ左上に文字として表示されます。これを消したい場合は、簡単ページではなくテンプレートで編集しなければいけません。
ただ、テンプレートでもＨＴＭＬ編集をしないと結局は表示されるので、
せっかく横長のショップタイトル用画像作ったのに、ショップ名がかぶってて見栄えが悪い！という人はテンプレート変更の説明をご覧ください。（ＳＥＯ対策上、消さない方がいいという意見もあります）
簡単ページの設定方法は読めばできるので割愛します。。
それでは実際にテンプレートをいじっていきます。
デザイン・表示の設定→上の4つメニューの表示設定→パソコン版表示の設定
デザイン選択をテンプレートを利用するにします。
登録を押して変更します。
続いて、上の4つメニューの中にある「ＰＣ用テンプレートの設定」をクリック。
今「default」と書いてあるテンプレートしかないと思います。
テンプレートを増やし変更したい場合は、
先ほどの「ＰＣテンプレートの設定」の下にある「公式テンプレートの追加」を選びます。
３つに分かれているもの（３カラム）２つに分かれているもの（２カラム）がありますが、横幅などは調性できますが、元のカラムはテンプレでもいじれない為、自分のイメージに近いフォーマットを選んでください。
ここではsaleというテンプレートを選んだことにします。
テンプレートの中で癖がなく編集しやすいです。
「テンプレートを適用する」を選び、続いて横にある「編集」を押します。
そうするとＨＴＭＬの編集という画面が出てきます。
ここの編集はバックアップを自動で取ってくれたりしない為、
メモ帳を用意してなにかあったときのために
全てコピーしておきましょう。
テンプレート名は自分でわかるように変えて結構です。
テンプレート名の下に一つ、そしてその下にもう一つ、ＨＴＭＬが書かれたページがあると思います。
上がページ構成、下が文字の大きさや色を変えるところです。
下は調べたり、何度かプレビューしていると何者かわかりやすいので今回は割愛。
とりあえず上の枠にあるＨＴＭＬだけいじります。
まずはＦＣ2のＨＭＴＬを簡単に説明。
{top_url} というように中カッコに囲まれた部分の英語を見ます。
トップユーアールエルなので、トップにリンクされるようになっているものとわかります。
<link rel="top" href="{top_url}" title="トップ">のようになっているので三角カッコごと消します。
ただ、丸ごと消す場合は間違えて消すと、ページのデザインが狂ってしまうため注意が必要です。
{ } このカッコを見ていけばＦＣ2のＨＴＭＬも結構簡単にできるようになってきます。
慣れても不慮の事故があるため、コピーは取っておきましょう。
では、先ほど書いていたページの左上に出てくるショップ名。これを消す方法からです。
ここでご存知の方もいらっしゃると思いますが、とある便利機能を使います。
インターネットを見ているこのソフト、ブラウザの検索機能を使います。
ブラウザによって違いますが、インターネットエクスプローラーの場合は「CTRL」+「Ｆ」を押すと検索タブが左上あたりに出てきます。
ここに文字を入力するとその文字が見つけられ便利です。
上画面のＨＴＭＬをクリックし、カーソルが点滅してることを確認したら検索したい文字を入力します。
今回はタイトルを消したいので<h1><a href="{top_url}">{shop_name}</a></h1>を探します。
nameと入力すると色が変わり、どこにあるか探してくれます。
<h1><a href="{top_url}">{shop_name}</a></h1>が見つかったら横一列丸ごと消します。
こうするとタイトルリンクが消えます。
他のテンプレだと<div class="site_title"><a href="{top_url}">{shop_name}</a></div>となっていることもあるので、このパターンの場合でも同じで横一列すべて消します。
{top_url} と{shop_name} と書かれているHTMLの上あたりにあるものは横一列消してしまいましょう。
下らへんに同じようなものがある場合は、ページの下の方にいったお客さんがトップページに戻るのに便利なので置いておいた方がいいと思います。不要な方は同じように消しましょう。
注意すべきは横一列消すことで、まとめて２行消す場合はしっかり確認をしましょう。
全然関係ないものを消してページが真っ白もあり得ます。
どれだけ自信があってもコピーしてバックアップ、慎重に１行ずつ保存しつつ消していきます。
さて、余談ですが、ブラウザに表示されているホームページ名に注目してください。
ここもやはりネットショップを登録したときの名前になっています。
しかし、ブティックショップ「ハッピー」という店があった場合、
お店を登録したときに店の名前だけだと「ハッピー」と表示されているだけです。
店の名前はページの画像を見たらわかりますし、ショップ名以外の文言を表示させたい場合どうすればいいか解説します。
「世界一の品ぞろえ！」と出る様にすることにします。
どこを書き換えるかというとshopで検索してもらうと
<title>{shop_name} </title>というものが出てきます。
ここの{shop_name}を消し、そこに入れたい文字を入れます。
今回の場合は「世界一の品ぞろえ！」ですね。
更新を押すと、ページの上の部分に「ブティック専門店！」 と表示されます。
ここを書き換えるメリットは、お客さんがお気に入りに入れるときに候補として出ている文字ということです。
名前を変更せずにお気に入りに入れた時に目立つように、さらには何の店かわかるように名前を変更するとリピーターなどに効果的だと思います。
さて、続いてショップページの看板ともいえるロゴを変更します。
簡単設定では変更が楽だったロゴですが、テンプレートの場合は根性で探さないといけません。
難しそうな言い方をしましたが、先ほどと勝手は一緒なので簡単です。(笑)
今度は上の画面ではなく、下のHTML画面をいじります。
ＣＳＳの編集と書かれたところです。
ロゴは画像なのでjpg、png、gifのどれかです。
検索するといくつか出てきます。
ここの編集の難点は、テンプレートによって画像のファイル名が違うところです。
「-----トップロゴ----」と丁寧に書かれているsaleのテンプレートもあれば
#headerと書かれているskatingというテンプレートもあります。
内容はこんな感じ。
background: url(https://cart2.fc2.com/template/skating/image/header2.jpg) #ffffff no-repeat center top;
例に上げているsaleの場合は
background-image:url("https://cart2.fc2.com/template/sale/image/sale_top.gif");
どちらにしても、（）にあるＵＲＬを自分が作った画像のＵＲＬに変更します。
saleのＣＳＳをそのまま書くとこんな感じ。
#rogo{ background-image:url("https://cart2.fc2.com/template/sale/image/sale_top.gif"); background-repeat:no-repeat; margin-bottom:10px; width:900px; height:150px;
赤い部分を見ると画像の縦と横の大きさが分かります。
高さが150ピクセルで横が900ピクセルの画像を作ってネットにアップしましょう。
アップ先は「デザイン設定」→「画像ファイルの管理」で画像をアップできます。
アップできた画像のＵＲＬを貼れば完成！
もちろん画像を小さくしてロゴにすることもできます。
上の画面で<div id="rogo">とＨＴＭＬで呼び出しているのが先ほど編集していたrogoです。
これは消すとややこしいことになるので、ややこしいのが見てみたい人は必ず保存をして消してみてください。
なお、ショッピングカートにあるメニューの一覧の変え方ですが、
上の4つメニューの
「表示設定」「簡単ページ設定」「ＰＣ用テンプレートの設定」「携帯用テンプレートの設定」
のＰＣ用テンプレートの中にある「プラグインの管理」から行えます。
こちらの詳細はまた次回行います。
では、最後にもうひとつおまけを。
{!if item}商品はありません{/!if}
このようなＨＴＭＬであっても中の文章を変えることができます。
この場合、商品がすでに一覧から消えている場合にでるメッセージです。
「商品はありません」より「在庫はありませんが発注できます。お問い合わせください。」に変えたい。
これはホームページタイトルを変えたように
{!if item}在庫はありませんが発注できます。お問い合わせください。 {/!if}
と書き換えれば表示されるようになります。
<h2>おすすめ商品</h2>というＨＴＭＬも、「お値打ち特価」と書き換えるだけでその店の特色が出ると思います。
是非、その店の雰囲気にあった言葉にカスタマイズして集客数をゲットしてください！
次回はもうちょっとだけＨＴＭＬをいじる方法です。
何か質問があればコメントでお書きください。
分かる限り答えさせていただきます。わからなかったらすいません。。。