スポンサーサイト

上記の広告は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」広報部よりしっかりお知らせでした





続きを読む

フリーソフトを紹介してくれるところのご案内 いろいろと

再び「staff」です。

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

FC2ショッピングカートのcustomテンプレートの

画像のアップロードとショップロゴの設置方法をご紹介しましたがちょうどこの部分ですね


FC2カートcustom009-03



きっと中にはパソコンで絵がかけるのとかどうやってショップロゴ作るのとか

それはそれはいろんなこと思われたかたがいると思います


簡単なものならWindow標準の「ペイント」でもいけますし

ワードだってエクセルだってパワーポイントだってショップロゴ作れますよ


プロの方は業界標準といわれる「Adobe」の製品をお使いでしょう

きっと定番の「Photoshop」「Illustrator」「Fireworks」といったところでしょうか

商用ベースのすごく高機能なソフトでお仕事されてると思います

その分パソコンのパワーは入りますよ

中には3Dソフトを使われたりCADソフトなどもうパソコンで絵を描く方法は様々・・・・

それにスキャナでお店の画像を取り込んだり

デジカメやスマホなどでも画像を取り込めますし何でもありですよ


でも初心者の方におすすめなのが

取急ぎになりますがフリーソフトがとても便利ですよ

ちょっとフリーソフトを紹介しているホームページをご紹介しておきましょうね


検索エンジンで「フリーソフト紹介サイト」と打っただけでもものすごい量です

ほんと20年くらいまえはこんなになかったんですほとんど有料ソフトだらね

今はただでほんと高機能で使えるフリーソフトが沢山でいい時代になりましたね


Vector

k本的に無料ソフト・フリーソフト

フリーソフト100

窓の杜

などなど多数あります


ちょっとマニアな方へは

ワールドソフト

ソフトアンテナ

filehippo.com


などなどありすぎるくらいありますよ

本屋さんでもフリーソフトの本が多数あります。


でも僕のBlogにも取り上げたんですが

えぇ!! あの高嶺の花のフォトショップやイラストレーターが無料に!!」が

ちょとバージョンは昔のCS2ですが基本操作はムチャクチャ変わってません

もしお使いのパソコンで動くのならこれからプロを目指す方にはお勧めです

ほんと使いこなせないくらいの高機能ですから



使い方は検索エンジンで「○○の使い方」でもたくさん出ますし

youtube」や「動画マニュアル.com」などで使い方教えてくれますからね

一番使いやすい自分とパソコンにあったソフト使ってみて下さいね



ただしソフト同士の相性により喧嘩(コンフリクト)なども発生するので入れ過ぎにはご用心を


これでパソコンをメーカーに調子が悪いとか立ち上がらないとかで

修理に出すとほぼ強制的に「ソフトの不具合」として処理されて

お金を取られる上リカバリされてパソコン初期化帰ってきちゃうんですから


「staff」はそんなお仕事してたからほんとですよこれ信じられます


日頃から大事なデータ音楽や動画などは著作権がとか言われるし

特に思いでの写真やご自分で作られた書類などは必ずバックアップして下さいね


そんな時にはweb上で写真を加工してくれるサイトサービスもありますよ

例えば

画像加工の無料サイト:写真加工.com

無料画像加工サイト::もじまる

などなど


他にもNAVER まとめなどにもこんな特集が

使ってみたよ!無料写真・画像加工サイトのリンク集

とにかくショップロゴ作れる環境はたくさんあるのでお好きなものをどうぞ



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

みなさんおはようございます「staff」です

とうとう世間の3連休終わっちゃいましたねしかも今朝はまた寒い


こうやってBlog打ってる指がちべたいちべたい

僕のパソコンの前は現在7℃もうすぐ冷蔵庫でございます

そんなちょっぴり悲しい日常に戻りましたが今日はちょっと興味深いやつを


FC2ショッピングカートのcustomテンプレートでネットショップを立ち上げたら

まずみなさんがやりたいことと言えば

ズバリみなさんのショップのロゴをかがげたいのではないでしょうか?


今回はFC2ショッピングカートのcustomテンプレートを使ったロゴの設置方法をいきましょうね

残念ながら今回からはCSSとの戦いが始まりますが頑張りましょうね


ちょっと「CSS」なに

どこをどうやってと思われる方いますよね

大丈夫ですよここからはいきなりチンプンカンプンになるところですからね

こちらで復習をしてみましょうね

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

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

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

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

早くも回数と番号の不一致が出てますが!!


少しいじくり回して練習してからのスタートにしましょう


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




FC2カートcustom009-02





そして事前にショップのロゴを 画像サイズ 900×150で作成しておいて下さい

ちょっとそこのお話が抜けてたので画像の作成は

フリーソフトを紹介してくれるところのご案内 いろいろと」にて

いろいろとあるフリーソフトを初回してくれるサイトをご紹介してますよ

ソフトの使い方を装画で紹介してくれるサイトも載せてみましたのでご参考にどうぞ


今回はショップロゴが画像サイズ 900×150あること前提でいきますね

そして前準備としてショップロゴをカートの画像ファイルにアップロードしておきましょう


手順1)サイドバー左の「デザイン設定」→「画像ファイルの管理」をクリックして下さい



FC2カートcustomアップ001


手順2)そして「選択ボタン」をクリックして下さい


FC2カートcustomアップ002



手順3)画像サイズ 900×150で作成したショップのロゴを選択して「開く」ボタンで決定して下さい




FC2カートcustomアップ003


手順4)そして「登録」ボタンをで画像のアップロードスタートです

このようにばっちりショップのロゴアップロード出来ましたか?
サイズ制限があるのでNGが出たら再度トライして下さいね

このアンダーラインの部分の画像のありか(url)を後で使うのでしっかりコピペなどして
テキストなどにメモしといて下さいね


FC2カートcustomアップ004

しっかりメモできましたか?

それでは続き行きますからね



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

customテンプレートの初期の全CSSを載せてますからね


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

/*--- CSSセレクタ 「#rogo」の領域です 画像サイズ 900×150で作成 ---*/

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

#rogo{


   }

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

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

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

#rogo{
  background-image:url("https://cart-imgs.fc2.com/template/custam/image/custam_top.gif");
  ・・・・・
  ・・・・・
  ・・・・・             
   }

こんな感じですかねもうほかわ見ないで下さいわからなくなりますからとにかくここだけ

background-image:url("https://・・・・・")の

("https://・・・・・")内に手順4)の先ほど画像をアップロードした「url」ををコピペして下さい


そしてしっかり「売れないネットショップどうすれば! FC2ショッピングカート その8 カスタマイズ No003」でお勉強した一番下のわかりにくいところにある「登録」ボタンを押して下さいよ!!

はいお疲れさまでしたこれにてショップのロゴ設置は完了です

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



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


ex)michiworのネットショップの場合

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

michiworkのショップロゴのurlは「https://cart-imgs.fc2.com/upfile/michiwork/FC2cartlogo.fw.png」です。

#rogo{
  background-image:url("https://cart-imgs.fc2.com/template/custam/image/custam_top.gif");
  ・・・・・
  ・・・・・
  ・・・・・             
   }

86行目の("https://・・・・・")の中にmichiworkのショップロゴのurl「https://cart-imgs.fc2.com/upfile/michiwork/FC2cartlogo.fw.png」を入れると

86行目はbackground-image:url("https://cart-imgs.fc2.com/upfile/michiwork/FC2cartlogo.fw.png");こうなりますね

実物はこんな感じです




/*--- CSSセレクタ 「#rogo」の領域です 画像サイズ 900×150で作成 ---*/
#rogo{
background-image:url("https://cart-imgs.fc2.com/upfile/michiwork/FC2cartlogo.fw.png");
background-repeat:no-repeat;
width:900px;
height:150px;
}



これをこのままコピペしちゃうと「michiwork」のショップロゴになっちゃいますから気をつけて下さいね


今回はFC2ショッピングカートのcustomテンプレートの

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


「CSS」が何者か知らなくっても大丈夫ですよ

これができるとFC2ショッピングカートのcustomに色を付けるところまではいけますからね


要は初期段階のcustomテンプレートのCSSコードの86行目にショップロゴの「url」を貼り付けたら終わりですからね

ぜひみなさんもチャレンジして下さいね

またわかりにくい方は質問を受けつけてますのでお気軽にお問い合わせして下さい


以上 

手作り家具と雑貨のお店「michiwork」のFC2ショッピングカートカスタマイズでした。

2月17日は 「大阪府箕面市のにこにこ雑貨市」に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なんてよくわかってないんですから

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


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





flower-digiclock

decoboko.jp

プロフィール

michiworkstaff

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

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

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

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

タグクラウドとサーチ

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

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

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