スポンサーサイト

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

売れないネットショップどうすれば! 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」広報部よりしっかりお知らせでした





これが前回までと今回の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;
}
/*--- 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;
}
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%;
}









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

コメントの投稿

非公開コメント

flower-digiclock

decoboko.jp

プロフィール

michiworkstaff

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

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

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

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

タグクラウドとサーチ

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

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

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