今回は楽天サイトを一から作る際の足掛かりとして利用できる、
楽天ショップフッターのテンプレートを作ってみました。
ほぼ画像を使用していないのでコピペだけで実装できます。
前回のヘッダーテンプレートの記事/サイドナビテンプレートの記事と合わせて読んでくれるとうれしいですよ！
シンプルなものになりますが、最終的にはこのような形のデザインやこのような形のデザインが実現できるテンプレートの作成方法＆配布までお伝えしようと思います。
Sponsored Link
こんにちはこんにちは、知ってる人はこんにちは、知らない人は初めまして。ぜぇれさんです。
ECサイトでのデザインを担当してます。よろしくお願いします。ぜぇれさんです。
2015年11月28日(土)に「モンスターハンタークロス」が発売ですね。
モンハンは無印からやってるのでめちゃくちゃ楽しみです。
むかしは仲間内でギルドとか作って遊んでました。
さてさて今回は先ほどお伝えしたとおり「楽天ショップのフッターザインテンプレート」を作成してみました。
店舗をオープン、またはリニューアルしたいけども…デザインとかはちょっと苦手だな…
という方の助けになれればとてもとても幸いに思います。
というわけでフッターに必要なものや期待できる効果などを考えて作っていってみましょう。
- 1. 楽天におけるフッターの役割とは
- 2. シンプルにテキストで実現。必要十分な店舗情報を盛り込んだフッターテンプレート。
- 3. カレンダーや画像など、より充実したフッターを実現。
- 4. 伝えたいことを大きく、ゆるく、しっかりと記載したデザインテンプレート。
※一言
楽天GOLD(無料)と契約している必要があります。
すべてに共通してリセットCSSを使用しています。
こちらのCSSを使用してください。
@charset "utf-8";
/* CSS Document */
/*
YUI 3.14.1 (build 63049cb)
Copyright 2013 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote {margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
それではやってみましょう。
1. 楽天におけるフッターの役割とは
僕の持論でしかありませんが、テンプレートを作成するにあたって前提となっている部分を説明します。
商品ページをスクロールしきった際に表示される、つまり…
- サイト・もしくは商品に興味がありページを下まで見終えた。
- 購買意欲はあるが、ご利用案内などのガイドを確認しようと探していた。
- 他の商品のレコメンドなど、他商品への導線を探していた。
というようなことが想定できるのではないでしょうか。
①②の可能性を考えるならば、店舗または商品に対しての興味があるという状態だといえます。
その状態をより確実にするためにも、「店舗への安心感を増長する」ということを目的に
店舗情報やご利用案内系の情報をフッターエリアには盛り込むべきだと考えます。
③に関しては買い回りのバナーなどを設置すべきなのでしょうが、
今回は簡単に実装できるテンプレートということで盛り込んでいません。あしからず！
2. シンプルにテキストで実現。必要十分な店舗情報を盛り込んだフッターテンプレート。
まずはHTML
<!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_01.css" type="text/css" media="all"> </head> <body> <footer> <h1>SHOP INFORMATION</h1> <div id="foot_guide"> <dl class="left"> <dt>お支払いについて</dt> <dd>お支払いはクレジットカード・銀行振込・ゆうちょ銀行・代金引替えがご利用いただけます。</dd> <dt>配送について</dt> <dd>【業者】佐川急便・ヤマト運輸<span>※運送会社の指定はございません。</span></dd> <dd>【送料】全国一律○○円～。</dd> <dd>【代引手数料】全国一律○○円～ご購入の価格帯によって変動します。</dd> <hr> <dt>返品交換について</dt> <dd>返品・交換は、未開封、未使用のものに限らせて頂きます。<br> ご希望の方は必ず、注意点をご確認いただき、商品お受け取り後 １週間以内に当店までご連絡くださいませ。</dd> </dl> <dl class="right"> <dt>お問い合わせ</dt> <dd>【楽天市場】サンプル店舗</dd> <dd>時間 / 11:00～17:00(月～金)</dd> <dd>休業日 / 土曜日 日曜日 ・祝日</dd> <dd> </dd> <dd>住所：〒999-9999<br> ○○県○○市○○町○○ 99-99</dd> <dd>TEL：99-9999-9999</dd> <dd>MAIL：sample@shop.rakuten.co.jp</dd> </dl> <br class="clearfix"> </div> <p>サイト内の全画像・全文章の著作権は ○○○○に属しており無断使用・転載・画像リンクは禁止しております。<br> Copyright(c) 2015 ○○○○ all right reserved.</p> </footer> </body> </html>
続いて7行目で読み込ませている「footer_01.css」がこちら
@charset "utf-8";
/* CSS Document */
html {
height:100%;
font-family: Century Gothic, Arial;
}
body {
background-color:#000;
height:100%;
}
footer {
width:100%;
background-color:#898989;
color:#FFF;
font-size:12px;
}
#foot_guide {
width:1000px;
margin:0 auto;
}
h1 {
padding:20px 0 10px;
text-align:center;
font-size:28px;
font-weight:bold;
}
.left {
width:580px;
float:left
}
.right {
width:300px;
float:right;
}
dt {
font-size:14px;
font-weight:bold;
margin-top:10px;
}
dd {
margin-left:15px;
margin-top:5px;
}
hr {
border: none;
border-top: solid 1px #fff;
margin-top:10px;
}
p {
clear:both;
padding:20px 0;
width:100%;
text-align:center;
font-size:10px;
font-weight:bold;
}
以上でこちらの形が実装できます！
必要十分な店舗情報をテキストのみのデザインで実装しています。
簡単＆シンプル。不足している情報があれば追記も楽々です。
HTML、CSS、画像を一式ダウンロードはこちらから。
Download
3. カレンダーや画像など、より充実したフッターを実現。
まずはHTML
<!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_02.css" type="text/css" media="all"> </head> <body> <footer> <h1>SHOP INFORMATION</h1> <div id="wrapper"> <div class="float"> <h2>送料・配送について</h2> <p>[送料]<br> ○○円以上で送料無料。 </p> <p>[配送業者]<br> 佐川急便、ヤマト運輸。 </p> <p>[配送時間]<br> 下記の時間帯よりお選びいただけます。<br> <img src="img/time.png" width="300"> </p> <a href="#">詳しくはこちら</a> </div> <div class="float"> <h2>お支払いについて</h2> <p>お支払いはクレジットカード決済、銀行振り込み、代金引換、コンビニ決済がご利用いただけます。<br> <img src="img/cash.png" width="300"><br> <span>※代金引換の場合は別途代引き手数料がかかります。<br> ※銀行振り込みの振込手数料はお客様にてご負担いただきますようお願いします。</span> </p> <a href="#">詳しくはこちら</a> <h2>返品・交換・キャンセルについて</h2> <p>返品･交換の可能期間、商品は商品到着日より7日以内の未使用品のみとなります。<br> <span>※ご不明な点はお問い合わせください。メールでのご質問へは翌営業日を目処にお返事をさせていただく様に務めております。</span> </p> <a href="#">詳しくはこちら</a> </div> <div class="float end"> <h2>営業日について</h2> <p> <table> <tr><th class="holi">日</th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th><th class="holi">土</th></tr> <tr><td class="holi">1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td class="holi">7</td></tr> <tr><td class="holi">8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td class="holi">14</td></tr> <tr><td class="holi">15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td class="holi">21</td></tr> <tr><td class="holi">22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td class="holi">28</td></tr> <tr><td class="holi">29</td><td>30</td><td>31</td><td> </td><td> </td><td> </td><td class="holi"> </td></tr> </table> <span>※ご注文は24時間、365日受付しております。</span> </p> <h2>お問い合わせ</h2> <p>【楽天市場】サンプル店舗<br> 時間 / 11:00～17:00(月～金)<br> 休業日 / 土曜日 日曜日 ・祝日<br> 住所：〒999-9999 ○○県○○市○○町○○ 99-99<br> TEL：99-9999-9999<br> MAIL：sample@shop.rakuten.co.jp<br> </div> <br style="clear:both;"> </div> <p id="bottom">サイト内の全画像・全文章の著作権は ○○○○に属しており無断使用・転載・画像リンクは禁止しております。<br> Copyright(c) 2015 ○○○○ all right reserved.</p> </footer> </body> </html>
続いて7行目で読み込ませている「footer_02.css」がこちら
@charset "utf-8";
/* CSS Document */
html {
height:100%;
font-family: Century Gothic, Arial;
}
footer {
background-color:#333;
padding-bottom:20px;
}
#wrapper {
width:1000px;
margin:0 auto;
padding:30px 50px 20px;
background-color:#FFF;
}
.float {
float:left;
width:300px;
margin-right:50px;
}
.end {
margin-right:0;
}
h1 {
color:#fff;
text-align:center;
font-size:36px;
line-height:100px;
}
h2 {
border-bottom:2px solid #333;
font-size:14px;
font-weight:bold;
line-height:28px;
}
p {
margin-top:10px;
font-size:12px;
line-height:22px;
}
span {
font-size:10px;
}
a {
display:block;
font-size:10px;
text-align:right;
margin-bottom:5px;
}
table {
font-size:10px;
display:block;
width:298px;
border:1px solid #CCC;
}
tr {
width:100%;
}
th {
font-weight:bold;
}
th, td {
line-height:22px;
width:42px;
text-align:center;
border-bottom:1px solid #ccc;
}
.holi {
background-color:#FCC;
}
#bottom {
text-align:center;
color:#fff;
}
以上でこちらの形が実装できます！
より多くの情報を盛り込んでいます。
カレンダーもHTMLで作成しているため、テキストの修正のみで更新できますよ。
毎月の更新をお忘れなく！
HTML、CSS、画像を一式ダウンロードはこちらから。
Download
4. 伝えたいことを大きく、ゆるく、しっかりと記載したデザインテンプレート。
まずはHTML
<!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」がこちら
@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;
}
以上でこちらの形が実装できます！
このテンプレートの特徴はテキストとCSSだけで実現できているところです。
ですがよりグラフィカルに、シンプルに、伝えたいことを見せる形を目指しました。
テキストとCSSだけだからコピペですぐに実装できるのも魅力！だと思う。
HTML、CSS、画像を一式ダウンロードはこちらから。
Download
最後に
いかがでしたでしょうか。
フッターはいわばサイトの土台、のようなものだと思います。
この土台の部分でしっかりと店舗の信頼度を上げられるような情報を盛り込むことが大事、かな？
ということでフッターテンプレートを3種類ご紹介しました！
拙い文章ではありますが、皆さんのサイトのクオリティアップの手助けになれれば幸いです。
「MHX」発売までのつなぎでいま「ドラゴンズドグマオンライン」やってます。
ララバイ！！
コピペでOK！楽天サイドナビのテンプレートを作ってみました。縦長解消ですっきりシンプルに！
ショップ運営でお悩みの方へ。
ネット通販やウェブ制作、ECサポート事業を行っている（株）ビリオンプラン・ジャパンが運営しています。楽天やYahoo!ショッピングなど各モールへの出店サポートや、商品撮影からページ制作までの運用提案、海外ローカライズ作業も行っています。
ショップ運営のお悩み、ご相談ください。
ビリオンプラン・ジャパンは日本を拠点に、香港などの海外グループ会社も生かし各種サービスをご提供しています。まずはお気軽にご相談くださいませ。
または、お電話でも承ります。
※ただいま新規ウェブ制作の受付は停止しております
10:00 - 19:00（土日祝休み）
06-6271-7761
ABOUT ME
- 外部デザイナーTwitter:@zeelesan
- 兵庫在住WEBデザイナー。楽天／ヤフーなど、各モール特性を活かしたサイト構築が得意。ショップ・オブ・ザ・イヤー受賞店舗にて制作業務に従事、その後はECに特化した受託制作を手がけている。グランブルーファンタジーが大好き。 →記事一覧
Recent Posts
2016.04.18ECたったの1行！ヤフーでもお買物カゴを外部化！複数のカゴボタンを設置する方法。
2016.04.13EC楽天お買物カゴを外部化！複数のカゴボタンを設置する方法。
2016.02.04EC独自カートで差別化！Yahoo!ストアのカート周りをCSSでデザインする方法。
2016.01.14ECデフォルト表示をデザイン！Yahoo!ストアのヘッダーをCSSでスッキリさせる方法。
空腹時は見ちゃダメ！楽天の参考デザインまとめ、食品ジャンルの素敵サイト13選。
引っ越したんでラグを買いますね。家具・インテリア通販の素敵ECサイトまとめ11選。
![[1/5]お買い物カゴを綺麗に！楽天カート周りのCSSデザイン【カゴボタン編】](https://www.billionplan.com/wp/wp-content/uploads/2015/07/rakuten_cart_css_01-150x150.jpg)
新着記事を配信しています
FacebookやGoogle+で新着記事を配信しています。よろしければ「いいね！」や「フォロー」をお願いします。
お世話になります。
楽天ショップ開店準備中の安里と申します。
こちらでご紹介の方法を試してみたのですが、どうもスタイルシートを読み込んでないようで、サンプルの様なきれいなレイアウトになりません。
ファイルはＧＯＬＤに置いて、
＜link rel=”stylesheet” href=”http://www.rakuten.ne.jp/gold/店舗アカウント/●●●” /＞
で読み込むようにしているのですが、うまくいきません。
（＜＞は、半角で入力）
何か他に設定すべきところがあるのでしょうか？
ご指南いただけましたら幸いです。
安里さんこんにちは。
コメントありがとうございます！
うーん？内容を読むだけでは原因までは分からないので
一度正常に表示されていないページのURLをお教えいただくことは可能でしょうか？
本来は、GOLDへCSSファイルを置きたかったのですが・・・。
他サイトでの指南を見てその通り設定しているつもりなんですが、どうもCSSファイルを読み込んでないようで、レイアウトどおりに表示されません。
現在は、CSSを直接フッターに入力して正常に動作しております。
もう少し探ってみて、自力で対応してみます。
ありがとうございました。
ぜぇれさん、はじめまして。
もみじと申します。
この度楽天ショップを始めることになり、色々調べるうちに、ぜぇれさんのテンプレートにたどり着きました。
素敵なテンプレートなので是非とも私のショップに取り入れたいのですが、どうしても上手くいきません。
問題点：ぜぇれさんのテンプレートをRMSのフッターコンテンツにiframeで読み込んだところ、フッター下部に大きな余白ができてしまいました。
フッターコンレンツには以下のように記述しました。
どのように記述すれば余白を表示させずに読み込むことができますか？
お忙しい中申し訳ありませんが、どうかよろしくお願い致します。
もみじです。
記述例が消えてしまい、申し訳ありません。
＜/td＞
＜/tr＞
＜/table＞
＜/td＞
＜/tr＞
＜/table＞
＜/td＞
＜/tr＞
＜/table＞
＜iframe src=”http://www.rakuten.ne.jp/gold/ueharafarm1915/footer/footer_02.html” width=”100%” height=”100%” frameborder=”0″ scrolling=”no”＞＜/iframe＞
＜table width=”100%” cellspacing=”20″ cellpadding=”0″ border=”0″＞
＜tr＞
＜td align=”center”＞
＜table width=”800″ cellspacing=”0″ cellpadding=”5″ border=”0″＞
＜tr＞
＜td＞＜/td＞
＜/tr＞
＜tr＞
＜td＞＜/td＞
＜/tr＞
＜/table＞
＜table width=”800″ cellspacing=”0″ cellpadding=”0″ border=”0″＞
＜tr＞
＜td＞
＜table width=”100%” cellspacing=”0″ cellpadding=”0″ border=”0″＞
＜tr＞
＜td colspan=”4″＞
もみじさんこんにちは。
コメントありがとうございます！
実際にエラーが発生しているページを確認できれば
クリティカルな解決策をご提示できるかもしれません。
ソースを見たところiframeのheight=”100%”が不味いように思います。
実際のコンテンツ高にあった実数値を記入してみてはいかがでしょうか？
もみじです。
ぜぇれさん、迅速な対応をありがとうございます！
コンテンツの実数値を記入すれば良いのですね。
pxで記入してみましたが、うまくいかず…(>_<)
サイトのURLはこちらになります。
http://www.rakuten.co.jp/ueharafarm1915/
大変申し訳ありませんが、一度ご確認頂いてもよろしいでしょうか？
ページを一番下までスクロールしていただくと、フッター下部に余白があるかと思います。
何度も申訳ありませんが、よろしくお願い致します。
以下のようにしてみていただけますか？
＜/td＞
＜/tr＞
＜/table＞
＜/td＞
＜/tr＞
＜/table＞
＜/td＞
＜/tr＞
＜/table＞
＜iframe src=”http://www.rakuten.ne.jp/gold/ueharafarm1915/footer/footer_02.html” width=”100%” height=”740” frameborder=”0″ scrolling=”no”＞＜/iframe＞
＜table width=”100%” cellspacing=”0″ cellpadding=”0″ border=”0″＞
＜tr＞
＜td align=”center”＞
＜table width=”800″ cellspacing=”0″ cellpadding=”0″ border=”0″＞
＜tr＞
＜td＞＜/td＞
＜/tr＞
＜tr＞
＜td＞＜/td＞
＜/tr＞
＜/table＞
＜table width=”800″ cellspacing=”0″ cellpadding=”0″ border=”0″＞
＜tr＞
＜td＞
＜table width=”100%” cellspacing=”0″ cellpadding=”0″ border=”0″＞
＜tr＞
＜td colspan=”4″＞
もみじです。
ありがとうございます！綺麗に表示されました！
違いを見比べてしっかり勉強したいと思います。
次はヘッダーに挑戦してみます！
お忙しい中、本当に有難うございました(^o^)
お忙しい中ありがとうございました！(^^)
ぜぇれさんです。
いえいえお役に立てて光栄です。
楽天の店舗構築は奥が深いので
何か実現したいこと、こんな事出来るのかな？
みたいなことがございましたらお気軽にお問い合わせください！
もみじです。
困った時は相談させて頂きます。有難うございました(^^)
初めまして。現在楽天ショップをオープンして間もない完全なる初心者です。
RMSでのページ構築よりさらに良いページにしたいと思い、このサイトにたどり着きました。
このようなサイト構築にしたいのですが、初心者なのでどこからやっていいのかわからず困っています…
現状としては楽天GOLDには登録してあります。
そこでお聞きしたいのですが、文中にある
「すべてに共通してリセットCSSを使用しています。 こちら
のCSSを使用してください」
とありますが、どこにどう使用したらいいのでしょうか？
初歩的な質問で申し訳ないですがお願いします。
KKKさん
初めましてこんにちは。
ブラウザにはそれぞれに異なった仕様が施されていますので、
それらを一旦リセットするためのCSSとなります。
リセットCSSを楽天GOLDに配置し、
それをデザイン設定のヘッダーなどから読み込ませて使用します！
ご参考にしてください。
返信いただきありがとうございます！
GOLDにアップロードしたものを反映されるには、RMSのヘッダーに＜link rel=”stylesheet” href=”http://www.rakuten.ne.jp/gold/店舗アカウント/●●●” /＞を置けばいいと見たのですが、●●●には何を入れるのでしょうか？
あと各項目にリンクを張る場合はどこにどう入れたらいいのでしょうか？
初歩的な質問で申し訳ございません。
KKKさんこんにちは。
＜link rel=”stylesheet” href=”http://www.rakuten.ne.jp/gold/店舗アカウント/●●●” /＞
こちらはGOLDへアップロードしたCSSのファイル名を入れる形になります。
リンクというと、どういうことでしょうか？
リンクは＜a href=”リンク先URL”＞リンク先＜/a＞
というタグを用いて設定しますよ。
リンクの件はできました！
ただRMSのヘッダー部分に＜link rel=”stylesheet” href=”http://www.rakuten.ne.jp/gold/店舗アカウント/●●●” /＞を貼っても反映されません….
ぜぇれさんのトップヘッダー、コンテンツ、フッダーを今の所GOLDにアップロードしてあるのですが….
KKKさんこんにちは。
外部CSSの読み込みについてはこちらの記事など参考にしていただけますでしょうか？
http://wp-p.info/tpl_rep.php?cat=css-biginner&fl=r6
恐らく店舗運営を開始したばかり右も左も、という状況かと思いますが
HTMLやCSSのイロハをここで説明しきるのはなかなかむつかしいというのが正直なところです（汗
返信ありがとうございます。
そうなんです。
右も左もわからず試行錯誤しながらやってます(･･;)
ただぜぇれさんのこの記事がとても見やすくやりたいレイアウトなので…
ご親切にありがとうございます！
これを見てやってみます！