DTP→ほそぼそとWeb業界のカタスミでお仕事しています・・・

fc2カートのテンプレートをカスタマイズしてみる(2)

前回の続きで・・・
fc2のカートにスライドショーを入れようと思います。

準備として・・・
スライドショー用の画像をfc2カートにアップロードしておく
※対応形式:JPEG/GIF/PNG/SWF形式 対応サイズ:1MB以下まで
※ファイル名は半角文字のみ。それ以外の文字は削除されます。
2016-11-fc2-cart-27.gif


そしてそして、これはたぶんこうしないとムズカシイ
fc2カートでファイルのアップロードできそうな部分がなかったので
fc2のサーバー(無料)にスライドショー用の
Javascriptをアップしておく&URLを控えておく。
サーバーの申込はずいぶん前にしてしまったので
きゃぷちゃがないのが残念ですねー。
http://fc2.com/
2016-11-fc2-cart-28.gif

2016-11-fc2-cart-29.gif

スライドショー用のファイルの読み込みは、fc2無料サーバーにアップしたものを使用
2016-11-fc2-cart-31.gif

スライドショー部分の記述はheader(サイト名)の下にしてみました
2016-11-fc2-cart-30.gif

スライドショーができました
2016-11-fc2-cart-32.jpg

ついでに、サイト名をロゴに変更してみました
<h1><a href="{top_url}"><!--{shop_name}--><img src="https://cart-imgs.fc2.com/upfile/memo352/headLogo.png" /></a></h1>

fc2カートのテンプレートをカスタマイズしてみる(1)

気ままに作業してしまったので・・・ページ内もくじ
▼独自タグ一覧を探す
▼テンプレート名を変更(もとはおいとく)
▼Chromeの開発者ツールで見てみた
▼横道にそれ、お知らせを入れてみた
▼スライドショー用の画像をアップロード


fc2カートを入れたので
テンプレートをちょっとカスタマイズしてみようかな。

こういう時に、チラ見するために
↓独自タグの一覧を探しておきます。
テンプレートカスタマイズ用マニュアル
http://cart.fc2.com/tpl_var.php


失敗してもいいように、もとのテンプレートと同じものを
もう一度追加しておいて(複製がなかったので)
名前を変更して「登録」

↓今回、こちらを使用
2016-11-fc2-cart-18.gif

2016-11-fc2-cart-19.gif

テンプレートがちゃんと適用されているか、確認。
2016-11-fc2-cart-21.gif

今回、スライドショーを入れてみたいので
トップページがどうなっているのか、Chromeの開発者ツールで見てみた。
(Windows は「F12」、Mac は「command」+「alt」+「I」)
2016-11-fc2-cart-20.gif
「お知らせ」を発見。

ちょっと「お知らせ」を入れてみようかな。
2016-11-fc2-cart-22.gif

2016-11-fc2-cart-23.gif

2016-11-fc2-cart-24.gif

このお知らせの上にスライドショーをいれることにしよう。
と、いうことは head の下かしらん。

でも先に、カートの方にスライドショー用の画像を
アップロードしておかないと、いけないのでした。
2016-11-fc2-cart-25.gif

2016-11-fc2-cart-26.gif

今回、スライドショーは「Flickity」を使おうと思っています。
↓参考サイト コリス
[JS]ユーザーが快適に操作できることにこだわった、タッチデバイスにも対応のスライダーを実装するスクリプト -Flickity
http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-flickity.html


・・・長くなったので、続きはまた~(って、見ている人がいるのかはナゾ)(^^;)

fc2カートを入れてみた(2) 商品登録画面

先日の続きで・・・ホントのネット通販の場合は
特定商取引法に基づく表示」を入れないといけなかったり
送料決めるとか、決済方法決めるとかあるんですけど
学校で先輩の先生に聞くと
「商品登録などして、ネットショップのまねごとをするんです」
と言っていたので、商品登録をしてみた。

2016-11-fc2-cart-07.gif

↓登録した内容はこんな感じ
2016-11-fc2-cart-08.gif
余談ですがPro版は「どこでもカート」があるんですね。LP作るときに便利そうです。
Pro版のSEO対策は description と keywords のメタタグが入れれるようです。

↓表示はこんな感じ(▼テンプレート設定してみました
いわゆる トップページの画面
2016-11-fc2-cart-09.jpg

↓商品名にリンクしてある商品詳細ページ
2016-11-fc2-cart-10.jpg
ぱんくずリストもあるし、なかなか良い感じ。

↓しかも lightbox 入ってます!
2016-11-fc2-cart-11.jpg

ちなみに、テンプレートはここから設定してみました
2016-11-fc2-cart-12.gif

2016-11-fc2-cart-13.gif

2016-11-fc2-cart-14.gif

2016-11-fc2-cart-15.gif

テンプレート一覧から好みのものを探します
2016-11-fc2-cart-16.gif

これが良さそげ「追加」
2016-11-fc2-cart-18.gif

2016-11-fc2-cart-17.gif

fc2カートを入れてみた(1)

最近バイトに行き出した職業訓練学校では
ネットショップ販売科というのがあります。
聞いてみると無料の「fc2カート」を授業で使っているそうな。

と、いうわけで入れてみた。
http://fc2.com/
2016-11-fc2-cart-01.gif

2016-11-fc2-cart-02.gif

あとは見たままの感じで・・・
2016-11-fc2-cart-03.jpg

2016-11-fc2-cart-04.gif

2016-11-fc2-cart-05.gif

2016-11-fc2-cart-06.gif

設定しようと思ったら、仕事の電話がかかってきたので中断(^^;)
余談ですが、私の数少ないクライアントさんはカラーミーとおちやのこネットです。
カラーミーは自分でやりましたが、おちゃのこネットは、ベテランの一望様に制作をお願いしました。
カラーミーとおちゃのこネット、どちらも有料のカートなので、授業では残念ながら使えないです。
ちなみに 一望様 は「おちゃのこネット」のほかにも「楽天」と「アマゾン」でのネットショップ運営のご経験もあり! ・・・ 一望様 が「ネットショップ販売科」の講師したらいいのにねーってことで、学校に打診してみた。
訓練生さんのことを考えると、実務経験豊富な人が講師してくれるほうが、良いのではないかしらん。