スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

売れないネットショップどうすれば! FC2ショッピングカート その12 カスタマイズ No007

再び「staff」ですよ

もうおっさん出てくるなと言われそうですが出てきてしまいました


前回「売れないネットショップどうすれば! FC2ショッピングカート その11 カスタマイズ No006」にて

「h2」部分の画像はめ込み方法をご紹介しましたが実は連続で出てきたのにはわけがありまして

今回お伝えしたい「h3」部分の画像はめ込み方法も実は全くおんなじなんです

ですから勢いつけとこうと思った次第なんです


前回の「h2」部分の画像はめ込んだ状態です。



FC2カートcustom009-05



そいて今回は左右のサイドバーにある

CSSセレクタ「h3」の領域に画像を貼り付けてみましょうね

ほんと全くおんなじ方法ですから



でもその前にお約束の下準備として画像サイズ 180×34で作成して

さらにお手数ですが「h3」部分の画像はアップロードしておいて下さいね

画像のアップロード方法の詳細については

こちら「売れないネットショップどうすれば! FC2ショッピングカート その10 カスタマイズ No005」にて


今回はサイドバーのこの部分ですよ



FC2カートcustom009-06




折りたたんでいますがちょっとお手数ですが下の「続きを読む」を開いてみて下さい

customテンプレートの前回いじった部分と今回のCSSソースコードを載せてます

でもソースコードを表示させるため「SyntaxHighlighter」を導入してBlogが重くなってすみません



その中で59行目のコメント

/*--- CSSセレクタ 「h3」の領域です 画像サイズ 180×34で作成 ---*/

その下の60行目にこんなh3と書かれていて囲まれてる{・・・・・}の部分これがキモです

 h3{


   }

これが今回やっつけるターゲット

しっかり敵を補足して下さいね


そしてよく見て下さい61行目のbackground-image:url(・・・・・)の部分にご注目

h3{
  background-image: url("https://cart-imgs.fc2.com/template/custam/image/custam_menu.gif");
background-repeat:no-repeat;
  ・・・・・
  ・・・・・
  ・・・・・             
   }

前回と全くおんなじですよ「background-image:url("https://・・・・・")」のなかの

("・・・・・・・・・")に画像をアップロードした「url」をコピペして下さい

そしてしっかり一番下のわかりにくいところにある「登録」ボタンを押して下さいよ

もう打つこともおんなじくらい全くいっしょの作業になります


はい以上お疲れさまでした

左上の方にあるオレンジ色の「カートプレビュー」ボタンで確認してみましょう

ほかは全く見ないで下さいわからなくなりますからとにかくここだけに注目ですよ




-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-


ex)いつの間にか恒例のmichiworのネットショップの場合いってみましょう

では「michiworkのショップ」の場合の例をここで上げておきますね


実物はこんな感じです





/*--- CSSセレクタ 「h3」の領域です 画像サイズ 180×34で作成 ---*/
h3{
background-image: url(https://cart-imgs.fc2.com/upfile/michiwork/FC2cartmenu180.png);
 background-repeat:no-repeat;
 font-size:12px;
 height:34px;
 line-height:30px;
 margin: 0 auto 10px;
 width:180px;
}



「michiworkのショップ」の場合は「h3」画像のurlは「https://cart-imgs.fc2.com/upfile/michiwork/FC2cartmenu180.png」なので

("・・・・・・・・・")に「https://cart-imgs.fc2.com/upfile/michiwork/FC2cartmenu180.png」をコピペしただけですよ

michiworkのショップ」の場合こんな感じになりました






FC2カートcustom009-07



さらに実際のもっとリアルな状態はこんな感じでしょうか

あともうひと息でとりあえず全体に個性が出そうな所まで来てますよ


FC2カートcustom009-08



次回はcustomテンプレートの全体の色づけといったところでしょうか?

でもこれが一番スタッフも「いったいどれだって」考えたところですから

お見逃しなくですよみなさん





そしてまたしっかりと宣伝をしておかなくては

3月3日(sun.)おひな祭り

滋賀県大津市恒例の「 フォレオこだわり手作りマーケット 」 10~16時 開催ですよ

フォレオこだわり手作りマーケットは毎月第1日曜日開催です♪



なんでも今まで第1日曜日だけだった約100名の作家さんが集う「 フォレオこだわり手作りマーケット 」が

なんとなんと4月から第1土曜日と日曜日の2日間の開催になっちゃいます

両日合わせると作家さんだけで軽く100名以上に登っちゃいますよ

ますますすごい盛り上がりを見せる「 フォレオこだわり手作りマーケット 」です



続きを読む

スポンサーサイト

売れないネットショップどうすれば! FC2ショッピングカート その11 カスタマイズ No006

みなさんこんにちは

手作り家具と雑貨のお店「michiwork」の「staff」がおくる

FC2ショッピングカートのcustomテンプレートのカスタマイズ情報です。


ちょっとまってまだそこまでって方は少しこちらで復習をしてみましょうね

回数と番号の不一致が出て「staff」の性格が出てますがこちらです↓

売れないネットショップどうすれば! FC2ショッピングカート その7 カスタマイズ No001

売れないネットショップどうすれば! FC2ショッピングカート その8 カスタマイズ No002

売れないネットショップどうすれば! FC2ショッピングカート その8 カスタマイズ No003

売れないネットショップどうすれば! FC2ショッピングカート その9 カスタマイズ No004


前回「売れないネットショップどうすれば! FC2ショッピングカート その10 カスタマイズ No005」にて

画像のアップロードとショップロゴの設置方法までをご紹介しましたよ。

前回までうまくできてたらこんな感じになってると思います



FC2カートcustom009-03



本格的な「CSS」なるわけのわかんいソースコードも触り始めていますので

ちょっと過去の記事ちらりとのぞいてみて下さいね



そして今回はちょうどcustomテンプレートの真ん中の少し上の部分ですよ

CSSセレクタ「h2」の領域に画像を貼り付けてみましょう

でもその前に下準備として画像サイズ 500×34で作成して

さらにお手数ですが「h2」部分の画像はアップロードしておいて下さいね


今回のいじる箇所はこの部分になります




FC2カートcustom009-04



折りたたんでいますがちょっとお手数ですが下の「続きを読む」を開いてみて下さい

customテンプレートの前回いじった部分と今回のCSSソースコードを載せてますからね


その中で49行目のコメント

/*--- CSSセレクタ 「h2」の領域です 画像サイズ 500×34で作成 ---*/

その下の50行目にこんなh2と書かれていて囲まれてる{・・・・・}の部分これがキモです

 h2{


   }

これが今回やっつけるターゲット

しっかり敵を補足して下さいね


そしてよく見て下さい51行目のbackground-image:url(・・・・・)の部分にご注目

h2{
  background-image:url("https://cart-imgs.fc2.com/template/custam/image/custam_title.gif");
background-repeat:no-repeat;
  ・・・・・
  ・・・・・
  ・・・・・             
   }

前回と全くおんなじですよ「background-image:url("https://・・・・・")」のなかの

("・・・・・・・・・")に画像をアップロードした「url」をコピペして下さい

そしてしっかり一番下のわかりにくいところにある「登録」ボタンを押して下さいよ


はい以上お疲れさまでした

左上の方にあるオレンジ色の「カートプレビュー」ボタンで確認してみましょう

ほかは全く見ないで下さいわからなくなりますからとにかくここだけに注目ですよ



-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-


ex)いつの間にか恒例のmichiworのネットショップの場合

では「michiworkのショップ」の場合の例をここで上げておきますね


実物はこんな感じです





/*--- CSSセレクタ 「h2」の領域です 画像サイズ 500×34で作成 ---*/
h2{
background-image: url(https://cart-imgs.fc2.com/upfile/michiwork/FC2cartmenu500.fw.png);
background-repeat: no-repeat;
font-size: 16px;
height: 34px;
line-height: 34px;
margin-bottom: 10px;
width: 580px;
}



「michiworkのショップ」の場合は「h2」画像のurlは「https://cart-imgs.fc2.com/upfile/michiwork/FC2cartmenu500.fw.png」なので

("・・・・・・・・・")に「https://cart-imgs.fc2.com/upfile/michiwork/FC2cartmenu500.fw.png」をコピペしただけですよ

michiworkのショップ」の場合こんな感じになりました



FC2カートcustom009-05




みなさんはうまくいきましたか?

前回の「売れないネットショップどうすれば! FC2ショッピングカート その10 カスタマイズ No005」にて

ご紹介させていただいた方法と全くおんなじですよ(^^)

「CSS」が何者か知らなくっても大丈夫ですよわかりにくい方はご質問お待ちしていますからね


ということで実は意外に簡単な「h2」部分の画像はめ込み方法でした


そうそう次回の「michiwork」さんの出店情報は

おひな祭りの    3月3日(sun.)10~16時「 フォレオこだわり手作りマーケット 」 ですよ

フォレオこだわり手作りマーケットは毎月第1日曜日開催です♪



みなさまのお越しをお待ちしております

以上 「michiwork」広報部よりしっかりお知らせでした





続きを読む

売れないネットショップどうすれば! FC2ショッピングカート その9 カスタマイズ No004

さてみなさん

前回記念すべき100投稿が終わったばっかりの「staff」です。

今回は101回めの投稿ということで真面目なお話にしときましょうね


売れないネットショップどうすれば! FC2ショッピングカート その8 カスタマイズ No003」の続きということで

ずばりFC2ショッピングカートのcustomテンプレートの配置の謎について迫ります

前回まではほんの余興みたいなもんですが今回はズバリになりますよ

あくまでも素人の範囲のカスタマイズになりますがね


それではご覧くださいこれがFC2ショッピングカートのcustomテンプレートの配置です

もうカスタマイズのやり方でこんな画像ないんですから

「michiwork」のネットショップのレイアウトなので、みなさんのショップとは違うと思いますがご興味ある方は必見かと思います

ほんと悪どい業者さんなんてこれだけでもお金取られちゃう怖い世の中です



FC2カートcustom009-01



ご覧のとおりこの構造を見られただけでもかなり「そうか!」とお分かりになるすごい方もおられると思います。

今回は特別にちょっと頑張って書いてみました(綺麗にじゃないんですが))

FC2ショッピングカートのcustomテンプレートを当てただけの状態がこちらです。



FC2カートcustom008



上と下の画像を重ね合わせると

michiworkネットショップ003



ちょっと立てに3枚の画像を並べるとわかりにくいかもしれませんが

レイヤー機能のグラフィックソフトをお持ちの方はレイヤーで重ね合わせるとわかりやすいですね

性格上の問題でちょっと縮尺スケールがあってないのは許してあげて下さいね


このFC2ショッピングカートのcustomテンプレートの構造が

実は「staff」もさっぱりわからなかったのです


コードをいじくっているうちにやっとこの全貌が見えてきたので

今回は101回目ということで特別公開です。


これがわかれば「CSS」がわからない人も

どこをどうレイアウトしていけばおおよその検討がつきやすいと思いますので

後はCSSコードとの壮絶な戦いですね

とにかくcustomテンプレートのカスタマイズはCSSがほとんど


でも大丈夫ですよみなさん「staff」はCSSなんてよくわかってないんですから

それでも一応ここまでできたんですから為せば成るってやつですよ


わかりにくい方はご質問お待ちしてますね





売れないネットショップどうすれば! FC2ショッピングカート その8 カスタマイズ No003


そうそう書き忘れてました

オッチョコチョイの「staff」です


「売れないネットショップどうすれば! FC2ショッピングカート その8 カスタマイズ No002」で

「custom」テンプレートの適用方法をお伝えしたんですが

実際の「FC2ショッピングカート」のテンプレートを「HTML」や「CSS」コードを編集した時

どうやって保存方法すればいいかお伝えしてなかったですね


ここもわかってらっしゃる方は読み飛ばして下さい!!


それではテンプレート編集時の保存方法を早速スタートしましょう


手順1)「デザイン設定」画面の「PC設定」ボタンよりのスタートになりますが

わかりにくい方は前回の「売れないネットショップどうすれば! FC2ショッピングカート その8 カスタマイズ No002」を参照してみて下さい

「PCテンプレート設定」画面を出してみると「staff」のパソコンはこのようになっています。

「テンプレートを適用する」場合はこのボタンです。



FC2カートcustom003-2




手順2)「HTML」や「CSS」コードを編集する場合はこちらの「編集」ボタンになります。

押してみるといきなり意味不明な英語たくさん出て来ましたね

この画像で見えてる範囲が「HTML」のソースコードを編集するところです。



FC2カートcustom003




手順3)そしてその下の欄が「CSS」コードを編集する場所になりますが。

一番下に「HTML」「CSS」共通の「登録」ボタンがありますね。

これはかなり大事なボタンなので「HTML」「CSS」コードを編集したら必ず押して下さい

押し忘れたらあとでかなり苦労しますからね


FC2カートcustom005



<ちょっと小技になりますが>

このように「custom」テンプレートを予め2つ追加しておいて

下側をカスタマイズ途中のバックアップと使っても効果高いですよ


「staff」は途中で思いついたんですが何度救われたことかそれだけにお勧めです

(ちょっと保存する手間は増えちゃうんですが大惨事を考えるとやっといたほうが良かったです)



FC2カートcustom010



この先はもう本番

「HTML」「CSS」コードを編集したら保存してプレビューで確認

キモになる部分に入っていきますからバックアップを取りながらが重要になります


でもバックアップさえとっといたら後はどうにでもなりますから

そんなに構えないでも大丈夫ですからね

手間だけはおしまないようにして行きましょうねみなさん


それでは次回辺り早速コードをいじって行きましょうかね

でもコードが長すぎてどうやって伝えましょうか


いいアイディアがあったらぜひ教えて下さいねみなさん

ぜひお待ちしていますのでよろしくお願いします。






売れないネットショップどうすれば! FC2ショッピングカート その8 カスタマイズ No002

みなさんお待たせしました

(誰も待ってないってそんな~

そう言わずにもう少しお付き合いを「staff」のまた登場ですよ


前回は「売れないネットショップどうすれば! FC2ショッピングカート その7 カスタマイズ No001」

ということでバカバカしいと思われた方も多かったことと思いますが

「staff」はほんと丸2日間悩んでしまった「custom」テンプレートのありかについてでした。

「custom」テンプレートはどこって方は是非前回の記事をご確認下さいね



それでは「FC2ショッピングカート」 カスタマイズ 第2回目は

ズバリ「custom」テンプレートの適用方法です。

もうお分かりの方はこの記事はほんとに読み飛ばして下さいね


でもバカバカしいですかねでもこれをできないとカスタマイズできませんよ!!



それでは行きましょう

「FC2ショッピングカート」テンプレートの適用方法スタートです。


手順1)まずは前回の「custom」テンプレートを追加して下さい。

「custom」のありかがわかってれば簡単ですね。

右側の追加ボタンを押して下さいね



FC2カートcustom002





手順2)すると「デザイン設定」画面の「PC設定」ボタンより

「PCテンプレート設定」画面を出してみると「staff」のパソコンはこのようになっています。

そして下側「custom」の「テンプレートを適用する」ボタンを押してみましょう




FC2カートcustom003-2




手順3)「テンプレートを適用する」ボタンを押して「custom」テンプレートが適用できたら

左上の便利なカートプレビューボタンを押して実際の今の状態を確認してみて下さい




FC2カートcustom003-3




手順4)するとなんじゃこら~!!

もうこれめちゃくちゃになっちゃってます

ほんとにこれでいいのか思わず「staff」は不安におちいってしまいました




FC2カートcustom006



<※> ちょっとわかりやすくするためにリンク先の画像があったので適用してみましょう

ちょうど左サイドバーの左上にプラグインの順番を変えて「staff」はリンク画像をを入れてます。



FC2カートcustom008


そうですあとの残りの部分すべて何かしないととても見れるものではないのです。

これが「custom」テンプレートの全貌です!!


これをどうにかするためには90%は「CSS」との戦いです。


でも大丈夫ですよみなさん

頭の良くない「staff」ができたんですからこんなふうに




michiworkネットショップ003



まだちょっとサイズなど微調整しないといけませんが

一度興味ある方はmichiworkのネットショップへ遊びに来ませんか?


まだ悲しいかな売れたことないのでお土産がてらにないかお買げいただけると

「staff」非常にうれしいのですがそんな我がままどなたか聞いていただけたらうれしいのですが

こんなこと言ってるようじゃ全然ダメなんでしょうけど


というのも実際まだ売れたことがないのでどんな流れでお客様とやり取りしていくか

マニュアル上はわかってるんですが実際のテストが出来てなかったんです

そんなちょっと可哀想な「michiwork」のネットショップでした

チャンチャン♪


デザイン苦労して変えた分少しはご購入いただいて苦労が報われるとうれしいのですが

みなさまよろしくお願いします。


木の温かい風合いを生かした素朴でナチュラルな

手作りと雑貨のお店「michiwork」ほんとに全部michiworkさんの手作りですから


flower-digiclock

decoboko.jp

プロフィール

michiworkstaff

Author:michiworkstaff
代表の「michiwork」さんと全く違う情報発信していく手作り家具と雑貨のお店「michiwork」のstaffによるBlogです。

でも誤字脱字は気にしないで下さいねみなさん!!

カテゴリ
michiworkへのリンク
staffのTwitter
最新記事
ナチュラル家具と雑貨のお店 Welcome! 「michiwork 」

マウスで見る方向変えられます

タグクラウドとサーチ

最新トラックバック
月別アーカイブ
検索フォーム
RSSリンクの表示
てんとう虫がうろちょろするよ(Twitter連携してます!!)

てんとう虫がうろちょろします

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。