タグによるフッターの編集方法について

Question

https://www.rakuten.ne.jp/gold/float/special_st/template03/footer_03.html
以上のフッターのデザインするにあたりタグを編集したのですが、上手に表示されません。

以下のアドレスを参考したのですがフッターに入力しても
文字のみになりリンク先にあるフッターの吹き出しマークは上手く表示されませんでした。

当店がおこなった手順としまして
http://www.billionplan.com/blog/ec/rakuten-template-footer.html
のサイトから無料のタグをダウンロードした後
以下のタグをフッター部分へ入力しました。

なおCSSのしくみがわからないのですが



のcommon/css/reset.css　　及び　common/css/footer_03.cssを
楽天ゴールドのどこの位置へおけばいいのでしょうか

当店では楽天ゴールド上のtemplateの場所へダウンロードしたデーターを
上げているのですが間違いないでしょうか。

実は、CSS自体の設定をどのように編集し、どこへデーターを上げてどのように呼び出せばいいのか
がよくわからないんです。
恐れ入りますがご指導いただきますようよろしくお願いいたします

---------------------------------------------------------------------------------------------------------------

以下のデーターをフッターに入力後、





コピペで使える楽天フッターテンプレート


 


 

SHOP INFORMATION
 

 

当店について
 
私たちのお店についてご紹介いたします。
私たちは○○をお手頃価格であなたにお届けするお店です。少しでも私たちのことを知って、安心してお買物いただけたら幸いです。
 
詳しくはこちら
 

 

送料について
 
送料はどれくらいかかるのかな？
当店では○○円以上は送料は無料です。メール便などで送料を抑えることもできますので、一度詳しくご覧ください。
 
詳しくはこちら
 

 
 

配送について
 
どこの配送業者なの？どれくらいで届くのかな。
当店では佐川急便、ヤマト運輸を使用しています。メーカー在庫のものなど、商品によってお届けに日にちがかかる場合もありますのでぜひご確認ください。
 
詳しくはこちら
 

 

お支払いについて
 
お金はどうやって支払うの？
お支払いはクレジットカード決済、銀行振り込み、代金引換、コンビニ決済がご利用いただけます。また代引き手数料やお振込手数料は別途必要になってまいります。
 
詳しくはこちら
 

 

返品・交換について
 
返品したいとき、交換したいときはどうすれば…
返品･交換をご希望のお客様は、商品到着日より7日以内にご連絡ください。そのた細かな規定はページにてご確認をお願いします。
 
詳しくはこちら
 

 
 

お問い合わせ
 
サイトを見ても分からない…そんな時はご連絡を！
商品についてわからない、もっと詳しく知りたい。そんな時はぜひお気軽にご連絡ください。いつもあなたのご連絡をお待ちしています。
 
詳しくはこちら
 

 
 

 

 
サイト内の全画像・全文章の著作権は ○○○○に属しており無断使用・転載・画像リンクは禁止しております。
Copyright(c) 2015 ○○○○ all right reserved.
 

 




続いて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;
}

Accepted Answer

ECマスターズの田中です。

> 今後カラー変更をするにあたり変更箇所はfooter_01.css及びfooter_01.htmいずれを編集すればいいのでしょうか。またもし変更するならどの部分のカラーコードを変更すればいいのでしょうか。

footer_01.cssの、footerに対する規則にて、
背景は background-color を（16行目）、
文字色は color を（17行目）、
それぞれご変更いただきますようお願いします。

> 以下のショップのフッターのような画面の左右まで広げることは、
> 現在のタグに追加することも可能でしょうか。

可能ではありますが、
楽天の想定したレイアウトをわざと崩す方法が必要となるため、
仕組みをご理解いただいていないと、
今後内容の更新を行われた際に、ページ全体の構造が大きく崩れる可能性がございます。

下記URLはヘッダーの例のため、タグをそのまま使うことはできませんが、
考え方自体は今回と同じですので、
参考までにご一読くださいませ。
https://forum.ec-masters.net/post_view.php?id=5755

Answer

ECマスターズの田中です。

フッターに入力、というのは、
RMSのヘッダー・フッター・レフトナビより
「フッターコンテンツ」にご記載いただいておりますでしょうか。

いただいたページで解説されている方法では、
楽天GOLD内で、HTMLやCSSなど、
内容の表示部分すべてを作っており、
それをiframeタグでフッターコンテンツ内に埋め込む構造になっております。
（いただいたページの中で、iframeについての解説はされていないようです）

タウンさんのGOLDには、必要なファイルがアップロードされていないようですので、
まずは、ご希望のテンプレートの一番下にある
「HTML、CSS、画像を一式ダウンロードはこちらから。」
の下の「Download」リンクより、zipファイルをダウンロードしていただき、
その中身を楽天GOLDのご希望の位置（templateディレクトリなど）に
アップロードしていただきますようお願いします。

zipファイルの中身をGOLDにそのままアップロードしていただければ、
CSSの場所などは特に意識する必要のない構造となっております。

アップロードができましたら、
HTMLファイルのURLに直接アクセスし、書き換える部分をご確認の上、
PCにあるHTMLファイルの必要な部分を書き換えて
再度アップロードしてください。

再びHTMLファイルのURLに直接アクセスの上、
表示に問題がないようでしたら、
ヘッダー・フッター・レフトナビのフッターコンテンツに



上記のように記載して、ご設置いただきますようお願いします。

駆け足でご説明差し上げたため、不明な点などあるかと思いますので、
その際はご返信ください。

Answer

ECマスターズの田中様
早急なご返答誠にありがとうございます

>フッターに入力、というのは、
>RMSのヘッダー・フッター・レフトナビより
>「フッターコンテンツ」にご記載いただいておりますでしょうか。

こちらは間違いなくフッターコンテンツへ記載いたしております


>タウンさんのGOLDには、必要なファイルがアップロードされていないようですので、
>まずは、ご希望のテンプレートの一番下にある
>「HTML、CSS、画像を一式ダウンロードはこちらから。」
>の下の「Download」リンクより、zipファイルをダウンロードしていただき、
>その中身を楽天GOLDのご希望の位置（templateディレクトリなど）に
>アップロードしていただきますようお願いします。
>zipファイルの中身をGOLDにそのままアップロードしていただければ、
>CSSの場所などは特に意識する必要のない構造となっております。

当店ではすでに楽天ゴールド上のtemplateの場所へダウンロードしたデーターを
アップロード済みです。

現在以上までは対応ずみなのですが、以下の内容が不明です。

>HTMLファイルのURLに直接アクセスし、書き換える部分をご確認の上、
>PCにあるHTMLファイルの必要な部分を書き換えて
>再度アップロードしてください。

なおインラインフレームのしくみは理解しているので
アップロードするHTMLファイルのURLはどこにあるのか、またどう変更すればいいのかを
ご教示くださいますようよろしくお願い致します。

Answer

ECマスターズの田中です。

> こちらは間違いなくフッターコンテンツへ記載いたしております

こちらは、本来HTMLファイルの中に記載されているソースですので、
フッターコンテンツへご記載いただく必要はございません。
フッターコンテンツには、iframeタグのみをご記載いただく必要がございます。

> 当店ではすでに楽天ゴールド上のtemplateの場所へダウンロードしたデーターを
> アップロード済みです。

とのことなのですが、HTMLファイルが、あるはずの場所に見つかりませんでした。

先に、楽天GOLDのURLの仕組みについてご説明いたしますと、
一番上のフォルダ、つまり楽天GOLDに接続した直後に見えるフォルダには
https://www.rakuten.ne.jp/gold/ショップURL/
というURLが割り当てられており、
それにフォルダ名を/区切りでつなげたり、ファイル名をつなげることで
各ファイルのURLを特定することができます。

たとえば、
楽天GOLDに接続して「test.html」というファイルをアップロードすると
そのHTMLファイルのURLは
https://www.rakuten.ne.jp/gold/ショップURL/test.html
となり、
楽天GOLDに「sample」フォルダを作り、その中に「test.html」をアップロードすると
そのHTMLファイルのURLは
https://www.rakuten.ne.jp/gold/ショップURL/sample/test.html
となります。

このような仕組みになっておりますので、
おっしゃる通り、templateの場所にアップロードしていただいたのであれば、
HTMLのファイルは
https://www.rakuten.ne.jp/gold/ショップURL/template/footer_01.html
https://www.rakuten.ne.jp/gold/ショップURL/template/footer_02.html
https://www.rakuten.ne.jp/gold/ショップURL/template/footer_03.html
のいずれかになるはずなのですが、
実際にアクセスしていただければおわかりいただける通り、
いずれも、ページが表示できない旨のエラーが発生します（つまり、ファイルがありません）。

お手数ですが今一度、アップロードの方法をご確認願います。
もし、ページ中の濃緑背景部分のソースをコピー＆貼り付けて保存などされている場合は、
改めて「HTML、CSS、画像を一式ダウンロードはこちらから。」より
ダウンロード、およびGOLDへのアップロードをお願いします。

Answer

この度は、ご返信でのご対応誠にありがとうございます。

楽天ゴールド内でのtemplateへfooter_03.css及び編集しましたfooter_03.htmlを
きちんとあげずにcommonフォルダごとアップしていたのが原因であると
教えていただき誠にありがとうございます。
無事解決致しました。改めましてありがとうございます。


なお、追加のご質問がございます。

現在のフッターデーターは,footer_01.css及びfooter_01.htmを
編集後アップしているのですが、背景カラーはグレー及びフォントカラーがホワイトになっています。

今後カラー変更をするにあたり変更箇所はfooter_01.css及びfooter_01.htmいずれを編集すればいいのでしょうか。またもし変更するならどの部分のカラーコードを変更すればいいのでしょうか。

また以下のショップのフッターのような画面の左右まで広げることは、
現在のタグに追加することも可能でしょうか。

ショップ名：soulberry
アドレス：https://www.rakuten.ne.jp/gold/soulberry

再度ご教示いただきますようよろしくお願い致します。