- 文字サイズ変更
- 小
- 中
- 大
解決済
タグによるフッターの編集方法について
- 相談者：非公開
- 2019/01/20 17:11
https//www.rakuten.ne.jp/gold/SHOP-URL/special_st/template03/footer_03.html
以上のフッターのデザインするにあたりタグを編集したのですが、上手に表示されません。
以下のアドレスを参考したのですがフッターに入力しても
文字のみになりリンク先にあるフッターの吹き出しマークは上手く表示されませんでした。
当店がおこなった手順としまして
http://www.billionplan.com/blog/ec/rakuten-template-footer.html
のサイトから無料のタグをダウンロードした後
以下のタグをフッター部分へ入力しました。
なおCSSのしくみがわからないのですが
<link rel="stylesheet" href="common/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="common/css/footer_03.css" type="text/css" media="all">
のcommon/css/reset.css 及び common/css/footer_03.cssを
楽天ゴールドのどこの位置へおけばいいのでしょうか
当店では楽天ゴールド上のtemplateの場所へダウンロードしたデーターを
上げているのですが間違いないでしょうか。
実は、CSS自体の設定をどのように編集し、どこへデーターを上げてどのように呼び出せばいいのか
がよくわからないんです。
恐れ入りますがご指導いただきますようよろしくお願いいたします
---------------------------------------------------------------------------------------------------------------
以下のデーターをフッターに入力後、
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>コピペで使える楽天フッターテンプレート</title>
<link rel="stylesheet" href="common/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="common/css/footer_03.css" type="text/css" media="all">
</head>
<body>
<footer>
<h1>SHOP INFORMATION</h1>
<div id="wrapper">
<div class="float">
<h2>当店について</h2>
<p>私たちのお店についてご紹介いたします。</p>
<span>私たちは○○をお手頃価格であなたにお届けするお店です。少しでも私たちのことを知って、安心してお買物いただけたら幸いです。</span>
<a href="#">詳しくはこちら</a>
</div>
<div class="float">
<h2>送料について</h2>
<p>送料はどれくらいかかるのかな？</p>
<span>当店では○○円以上は送料は無料です。メール便などで送料を抑えることもできますので、一度詳しくご覧ください。</span>
<a href="#">詳しくはこちら</a>
</div>
<div class="float end">
<h2>配送について</h2>
<p>どこの配送業者なの？どれくらいで届くのかな。</p>
<span>当店では佐川急便、ヤマト運輸を使用しています。メーカー在庫のものなど、商品によってお届けに日にちがかかる場合もありますのでぜひご確認ください。</span>
<a href="#">詳しくはこちら</a>
</div>
<div class="float">
<h2>お支払いについて</h2>
<p>お金はどうやって支払うの？</p>
<span>お支払いはクレジットカード決済、銀行振り込み、代金引換、コンビニ決済がご利用いただけます。また代引き手数料やお振込手数料は別途必要になってまいります。</span>
<a href="#">詳しくはこちら</a>
</div>
<div class="float">
<h2>返品・交換について</h2>
<p>返品したいとき、交換したいときはどうすれば…</p>
<span>返品･交換をご希望のお客様は、商品到着日より7日以内にご連絡ください。そのた細かな規定はページにてご確認をお願いします。</span>
<a href="#">詳しくはこちら</a>
</div>
<div class="float end">
<h2>お問い合わせ</h2>
<p>サイトを見ても分からない…そんな時はご連絡を！</p>
<span>商品についてわからない、もっと詳しく知りたい。そんな時はぜひお気軽にご連絡ください。いつもあなたのご連絡をお待ちしています。</span>
<a href="#">詳しくはこちら</a>
</div>
<br style="clear:both;">
</div>
<div id="bottom">サイト内の全画像・全文章の著作権は ○○○○に属しており無断使用・転載・画像リンクは禁止しております。<br>
Copyright(c) 2015 ○○○○ all right reserved.</div>
</footer>
</body>
</html>
続いて7行目で読み込ませている「footer_03.css」は以下でした。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
@charset "utf-8";
/* CSS Document */
html {
height:100%;
font-family:Century Gothic, Arial, 'メイリオ', 'Meiryo';
}
footer {
background-color:#eee;
padding-bottom:20px;
}
#wrapper {
width:1000px;
margin:0 auto;
padding:0 50px 30px;
background-color:#FFF;
}
.float {
float:left;
width:300px;
margin-right:50px;
}
.end {
margin-right:0;
}
h1 {
color:#333;
text-align:center;
font-size:36px;
font-weight:bold;
line-height:100px;
}
h2 {
text-align:center;
font-weight:bold;
border-top:1px solid #CCC;
border-bottom:1px solid #CCC;
line-height:30px;
margin-top:35px;
margin-bottom:20px;
}
p {
width:160px;
height:140px;
padding:60px 20px 0;
margin:10px auto 20px;
color:#FFF;
font-size:18px;
text-align:center;
background-color:#666;
border-radius:100px;
position:relative;
}
p:after {
top:100%;
left:50%;
border:solid transparent;
content:" ";
height:0;
width:0;
position:absolute;
pointer-events:none;
border-color:rgba(136, 183, 213, 0);
border-top-color:#666;
border-width:30px;
margin-left:-30px;
margin-top:-15px;
}
span {
display:block;
text-align:center;
font-size:12px;
}
a {
font-size:12px;
margin:10px auto 0;
display:block;
text-align:center;
background-color:#542727;
color:#fff;
line-height:48px;
text-decoration:none;
border-radius:14px;
width:150px;
}
a:hover {
opacity:0.5;
}
#bottom {
margin-top:20px;
font-size:10px;
text-align:center;
color:#666;
}
以上のフッターのデザインするにあたりタグを編集したのですが、上手に表示されません。
以下のアドレスを参考したのですがフッターに入力しても
文字のみになりリンク先にあるフッターの吹き出しマークは上手く表示されませんでした。
当店がおこなった手順としまして
http://www.billionplan.com/blog/ec/rakuten-template-footer.html
のサイトから無料のタグをダウンロードした後
以下のタグをフッター部分へ入力しました。
なおCSSのしくみがわからないのですが
<link rel="stylesheet" href="common/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="common/css/footer_03.css" type="text/css" media="all">
のcommon/css/reset.css 及び common/css/footer_03.cssを
楽天ゴールドのどこの位置へおけばいいのでしょうか
当店では楽天ゴールド上のtemplateの場所へダウンロードしたデーターを
上げているのですが間違いないでしょうか。
実は、CSS自体の設定をどのように編集し、どこへデーターを上げてどのように呼び出せばいいのか
がよくわからないんです。
恐れ入りますがご指導いただきますようよろしくお願いいたします
---------------------------------------------------------------------------------------------------------------
以下のデーターをフッターに入力後、
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>コピペで使える楽天フッターテンプレート</title>
<link rel="stylesheet" href="common/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="common/css/footer_03.css" type="text/css" media="all">
</head>
<body>
<footer>
<h1>SHOP INFORMATION</h1>
<div id="wrapper">
<div class="float">
<h2>当店について</h2>
<p>私たちのお店についてご紹介いたします。</p>
<span>私たちは○○をお手頃価格であなたにお届けするお店です。少しでも私たちのことを知って、安心してお買物いただけたら幸いです。</span>
<a href="#">詳しくはこちら</a>
</div>
<div class="float">
<h2>送料について</h2>
<p>送料はどれくらいかかるのかな？</p>
<span>当店では○○円以上は送料は無料です。メール便などで送料を抑えることもできますので、一度詳しくご覧ください。</span>
<a href="#">詳しくはこちら</a>
</div>
<div class="float end">
<h2>配送について</h2>
<p>どこの配送業者なの？どれくらいで届くのかな。</p>
<span>当店では佐川急便、ヤマト運輸を使用しています。メーカー在庫のものなど、商品によってお届けに日にちがかかる場合もありますのでぜひご確認ください。</span>
<a href="#">詳しくはこちら</a>
</div>
<div class="float">
<h2>お支払いについて</h2>
<p>お金はどうやって支払うの？</p>
<span>お支払いはクレジットカード決済、銀行振り込み、代金引換、コンビニ決済がご利用いただけます。また代引き手数料やお振込手数料は別途必要になってまいります。</span>
<a href="#">詳しくはこちら</a>
</div>
<div class="float">
<h2>返品・交換について</h2>
<p>返品したいとき、交換したいときはどうすれば…</p>
<span>返品･交換をご希望のお客様は、商品到着日より7日以内にご連絡ください。そのた細かな規定はページにてご確認をお願いします。</span>
<a href="#">詳しくはこちら</a>
</div>
<div class="float end">
<h2>お問い合わせ</h2>
<p>サイトを見ても分からない…そんな時はご連絡を！</p>
<span>商品についてわからない、もっと詳しく知りたい。そんな時はぜひお気軽にご連絡ください。いつもあなたのご連絡をお待ちしています。</span>
<a href="#">詳しくはこちら</a>
</div>
<br style="clear:both;">
</div>
<div id="bottom">サイト内の全画像・全文章の著作権は ○○○○に属しており無断使用・転載・画像リンクは禁止しております。<br>
Copyright(c) 2015 ○○○○ all right reserved.</div>
</footer>
</body>
</html>
続いて7行目で読み込ませている「footer_03.css」は以下でした。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
@charset "utf-8";
/* CSS Document */
html {
height:100%;
font-family:Century Gothic, Arial, 'メイリオ', 'Meiryo';
}
footer {
background-color:#eee;
padding-bottom:20px;
}
#wrapper {
width:1000px;
margin:0 auto;
padding:0 50px 30px;
background-color:#FFF;
}
.float {
float:left;
width:300px;
margin-right:50px;
}
.end {
margin-right:0;
}
h1 {
color:#333;
text-align:center;
font-size:36px;
font-weight:bold;
line-height:100px;
}
h2 {
text-align:center;
font-weight:bold;
border-top:1px solid #CCC;
border-bottom:1px solid #CCC;
line-height:30px;
margin-top:35px;
margin-bottom:20px;
}
p {
width:160px;
height:140px;
padding:60px 20px 0;
margin:10px auto 20px;
color:#FFF;
font-size:18px;
text-align:center;
background-color:#666;
border-radius:100px;
position:relative;
}
p:after {
top:100%;
left:50%;
border:solid transparent;
content:" ";
height:0;
width:0;
position:absolute;
pointer-events:none;
border-color:rgba(136, 183, 213, 0);
border-top-color:#666;
border-width:30px;
margin-left:-30px;
margin-top:-15px;
}
span {
display:block;
text-align:center;
font-size:12px;
}
a {
font-size:12px;
margin:10px auto 0;
display:block;
text-align:center;
background-color:#542727;
color:#fff;
line-height:48px;
text-decoration:none;
border-radius:14px;
width:150px;
}
a:hover {
opacity:0.5;
}
#bottom {
margin-top:20px;
font-size:10px;
text-align:center;
color:#666;
}
このフォーラムへの質問は終了しました
今気になってる疑問、
セミナーに参加すれば解決するかも！？
セミナーに参加すれば解決するかも！？
日本全国のネットショップ12,000社が参加！
ネットショップでお悩みがある方はまずはオンラインセミナーへGO！
ネットショップでお悩みがある方はまずはオンラインセミナーへGO！
広告０円で楽天の売上アップ続出！
ECマスターズチャンネルをチェック！
ECマスターズチャンネルをチェック！
総視聴回数15万回突破！
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください！
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください！
- 返信者：非公開
- 2019/01/20 18:40
ECマスターズの田中です。
フッターに入力、というのは、
RMSのヘッダー・フッター・レフトナビより
「フッターコンテンツ」にご記載いただいております………（省略）………
フッターに入力、というのは、
RMSのヘッダー・フッター・レフトナビより
「フッターコンテンツ」にご記載いただいております………（省略）………
- 返信者：非公開（質問者）
- 2019/01/21 15:38
ECマスターズの田中様
早急なご返答誠にありがとうございます
>フッターに入力、というのは、
>RMSのヘッダー・フッター・レフトナビより
>「フッ………（省略）………
早急なご返答誠にありがとうございます
>フッターに入力、というのは、
>RMSのヘッダー・フッター・レフトナビより
>「フッ………（省略）………
- 返信者：非公開
- 2019/01/21 17:17
ECマスターズの田中です。
> こちらは間違いなくフッターコンテンツへ記載いたしております
こちらは、本来HTMLファイルの中に記載されているソース………（省略）………
> こちらは間違いなくフッターコンテンツへ記載いたしております
こちらは、本来HTMLファイルの中に記載されているソース………（省略）………
- 返信者：非公開（質問者）
- 2019/01/25 10:46
この度は、ご返信でのご対応誠にありがとうございます。
楽天ゴールド内でのtemplateへfooter_03.css及び編集しましたfooter_03.h………（省略）………
楽天ゴールド内でのtemplateへfooter_03.css及び編集しましたfooter_03.h………（省略）………
- 返信者：非公開
- 2019/01/25 14:53
ECマスターズの田中です。
> 今後カラー変更をするにあたり変更箇所はfooter_01.css及びfooter_01.htmいずれを編集すればいいのでし………（省略）………
> 今後カラー変更をするにあたり変更箇所はfooter_01.css及びfooter_01.htmいずれを編集すればいいのでし………（省略）………
このフォーラムへの質問は終了しました
質問を検索する