スポンサーサイト

上記の広告は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名以上に登っちゃいますよ

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



これが前回までと今回の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;
}
/*--- 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;
}
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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。