スポンサーサイト

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

売れないネットショップどうすれば! 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さんは出店されますよ

宣伝もちゃっかりと


これが初期段階のcustomテンプレートのCSSコードです。



/* custam */
/*-----���{------*/
* {
margin:0;
padding:0;
}
body{
background-color:#d3d3d3;
text-align:center;
margin:0 auto;
padding:0;
}
#baseblock{
font-family:"Verdana", "ヒラギノ角ゴ Pro W3", "MS Pゴシック", Osaka;
font-size:12px;
color:#333333;
background-image:url("https://cart-imgs.fc2.com/template/custam/image/custam_bg.gif");
background-repeat:repeat-y;
margin:0 auto;
padding:0;
width:900px;
}
a:link{
color:#000099;
text-decoration:none;
}
a:visited{
color:#0000ff;
text-decoration:none;
}
a:hover{
color:#ffffff;
text-decoration:none;
background-color:#000099;
}
a:active{
color:#ffff99;
text-decoration:none;
}
a img{
border:0px;
text-decoration :none;
}
h1{
font-size:18px;
line-height:30px;
margin:0px auto;
}
h2{
background-image: url("https://cart-imgs.fc2.com/template/custam/image/custam_title.gif");
background-repeat:no-repeat;
font-size:16px;
height:34px;
line-height: 34px;
margin-bottom:10px;
width:500px;
}
h3{
background-image: url("https://cart-imgs.fc2.com/template/custam/image/custam_menu.gif");
background-repeat:no-repeat;
font-size:12px;
height:34px;
line-height:30px;
margin: 0 auto 10px;
width:180px;
}
li{
list-style:none;}
#baseleft{
width:700px;
float:left;
overflow:hidden;
}
#baseright{
width:200px;
float:right;
overflow:hidden;
}
.line{
border-top:dotted #666666 1px;
margin:3px auto;
width:450px;
}
/*--- CSSセレクタ 「#rogo」の領域です 画像サイズ 900×150で作成 ---*/
#rogo{
background-image:url("https://cart-imgs.fc2.com/template/custam/image/custam_top.gif");
background-repeat:no-repeat;
width:900px;
height:150px;
}
/*----------����C��---------------*/
#mainbox{
width:500px;
float:right;
overflow:hidden;
}
/*--�����e�i���X--*/
.maintenance{
background-color:#ffffff;
border:solid 1px;
border-color:#a9a9a9;
width:400px;
height:auto;
padding:20px;
margin-top:30px;
margin-bottom:30px;
margin-left:auto;
margin-right:auto;
}
/*--�y�[�W�����N���-*/
.pagelink{
font-size:8px;
margin:0 auto 10px;
}
/*--�j���[�X--*/
.news{
width:400px;
text-align:left;
margin-left:20px;
margin-right:auto;
margin-top:10px;
margin-bottom:30px;
list-style: none;
}
/*--���[�U�[�y�[�W--*/
.userpage{
width:450px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
margin-bottom:30px;
}
/*--�i���--*/
.sort{
border-bottom:1px dotted #CCC;
margin: 0 auto 5px;
text-align:left;
width:480px;
}
.sort a{
margin:0px 10px;
}
.pagelinks{
border-bottom:1px solid #CCC;
margin: 0 auto 10px;
padding-bottom: 5px;
width:480px;
}
.pagelinks .a{
border-bottom:1px dotted #CCCCCC;
padding-bottom:5px;
text-align:left;
}
.pagelinks .b{
width:460px;
margin-top:3px;
}
.pagelinks .b .ahead{
width:20%;
float:left;
}
.pagelinks .b .pageno{
width:60%;
float:left;
}
.pagelinks .b .next{
width:20%;
float:right;
}
.item_list{
float:left;
width:33%;
padding-left:0px;
}
.item{
width:130px;
text-align:center;
overflow:hidden;
padding-left:20px;
}
.item a img{
border:solid #dcdcdc 1px;
}
.item .name{
text-align:left;
margin:3px;
}
.item .comment{
text-align:left;
margin:3px;
}
.item .other{
margin:3px;
text-align:right;
}
/*--�i��-*/
.item_detail{
text-align: center;
font-size: 12px;
width: 480px;
}
.item_detail .thumb{
float:left;
margin-top:10px;
width:33%;
}
.item_detail .thumb img{
border:solid #dcdcdc 1px;
padding:0px;
margin:0px;
}
.item_detail .thumb a img {
background-color:none;
display:block;
}
.item_detail .img-comment{
padding:3px;
}
.item_detail .comment{
padding:3px;
text-align:left;
}
.item_detail .about{
text-align:right;
}
.item_detail .about .other{
padding:3px;
}
/*--�`�F�b�N--*/
#subtitle{
background-image:url("https://cart-imgs.fc2.com/template/custam/image/custam_subtitle.gif");
background-repeat: no-repeat;
height:34px;
margin:10px auto;
}
.check{
margin:0;
padding:0 0 30px;
width:452px;
}
.pickupbase
{
font-size:10px;
font-family:Osaka, Verdana, "MS Pゴシック";
margin-right:15px;
padding-bottom:15px;
width:130px;
float:left;
overflow:hidden;
}
.pickupbase a img{
border:solid #dcdcdc 1px;
padding:0px;
margin:0px;
}
.pickupname
{
font-weight:bold;
text-align:center;
padding-bottom:3px;
overflow:hidden;
}
.pickupprice
{
text-align:center;
padding-top:5px;
overflow:hidden;
}
/*--�e�[�u���g--*/
.table1{
font-size:10px;
width:460px;
margin:15px auto;
}
.table1 td{
padding:3px;
border-top:1px solid #CCCCCC;
border-right:1px solid #666666;
border-bottom: 1px solid #666666;
border-left: 1px solid #CCCCCC;
}
.table1 .td1{
background-color:#666666;
color:#FFFFFF;
font-size:12px;
text-align:left;
line-height:20px;
}
.table1 .td2{
background-color:#EEEEEE;
text-align:center;
}
.table1 .td3{
background-color:#FFFFFF;
}
.table1 .td4{
background-color:#FFFFFF;
font-size:12px;
}
.table1 #left1{
text-align:left;
}
.table1 #nonitem{
text-align:center;
line-height:30px;
font-size:12px;
}
.table1 #right1{
text-align:right;
}
.over{
overflow:hidden;
}
/*----------�T�C�h�o�[�[-------------*/
.menucontent{
margin-bottom:10ox;
text-align:left;
}
/*--��T�C�h�o�[�[--*/
#menuleft{
width:200px;
float:left;
overflow:hidden;
}
/*--���j���[�E�J�e�S��--*/
.menucontent ul{
padding-right:0px;
padding-left:0px;
list-style:none outside;
margin-left:25px;
}
#menu a:link.Top , #category a:link.Top , #menu a:visited.Top , #category a:visited.Top
{
display:block;
padding-top:3px;
padding-bottom:3px;
padding-left:25px;
}
#menu a:hover.Top , #category a:hover.Top
{
display:block;
padding-top:3px;
padding-bottom:3px;
padding-left:25px;
}
#menu a:link.Main , #category a:link.Main , #menu a:visited.Main , #category a:visited.Main
{
display:block;
padding-top:3px;
padding-bottom:3px;
padding-left:25px;
}
#menu a:hover.Main , #category a:hover.Main
{
display:block;
padding-top:3px;
padding-bottom:3px;
padding-left:25px;
}
#category a.Sub
{
display:block;
padding-top:3px;
padding-bottom:3px;
padding-left:40px;
}
#category a:hover.Sub
{
display:block;
padding-top:3px;
padding-bottom:3px;
padding-left:40px;
}
.cartin{
padding-left:5px;
}
/*--����E���O�C��--*/
p.plugin-search
{
text-align:center;
margin:0 auto;
padding:5px 0;
width:90%;
}
p.plugin-search input
{
color:#6e625c;
font-size:12px;
margin:0;
padding:0;
}
p.plugin-freearea
{
line-height:145%;
margin:0;
padding:0;
}
.menuTextL p.plugin-freearea
{
line-height:145%;
margin:0;
padding:0 10px 0 15px;
}

/*--�J�[�g����g--*/
.cartin
{
color:#6e625c;
margin:10px;
padding:5px;
border:double 3px #e7e2e0;
overflow:hidden;
}
.cartin_item
{
padding-bottom:2px;
border-bottom:1px solid #e7e2e0;
}
.cartin .name
{
text-align:left;
padding:3px;
}
.cartin .price
{
text-align:right;
padding:2px;
}
.cartin .subtotal
{
text-align:right;
padding:2px;
}
.cartin .total
{
font-weight:bold;
text-align:right;
padding:3px;
}
.cartin .submit
{
text-align:right;
margin:0;
padding:5px 0 0;
border-width:0;
}
.cartin a:link , .cartin a:visited
{
color:#e74b7b;
text-decoration:none;
border-width:0;
}
.cartin a:hover
{
color:#29a8a8;
text-decoration:none;
background-color:transparent;
}
/*----------��t�b�^�[-------------*/
#footblock_a{
color:#565656;
font-size:10px;
font-family:Verdana;
text-aligen:center;
margin:0px;
padding:0px;
width:900px;
height:40px;
clear:both;
}
#footblock_b{
background-image:url("https://cart-imgs.fc2.com/template/custam/image/custam_foot.gif");
background-repeat:no-repeat;
text-align:center;
width:900px;
height:100px;
clear:both;
}

.variation_width {
width:100%;
}




今回はわかりやすくロゴ画像をはめてみましたよ

84行目~86行目に注目ですよ!!




関連記事
スポンサーサイト

コメントの投稿

非公開コメント

flower-digiclock

decoboko.jp

プロフィール

michiworkstaff

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

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

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

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

タグクラウドとサーチ

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

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

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