対象読者
- 楽天市場に開店したての人
- 楽天GOLD（FTP）を契約している人
- スマホの商品ページ上部を自由にレイアウトしたい人
つまり
スマホの見た目をこんな風にしたい方向けです。
読み終わった後に得られるもの
- 楽天GOLDでできることが少し分かる
- 楽天商品ページにおいて、CSSのどこをいじれば何がどう変わるかがチョットワカル
- 次のステップに進む準備ができるヒントを得るカモ（バナー以外にも、いろいろ自由にレイアウトを作れる）
説明しないこと
- 楽天GOLDの契約手順
- FTPへのアップロード方法
- HTMLやCSSの基礎
手順
早速説明していきます。
手順と同時に、ソースコードの説明なども適宜挟んでいきます。
あ、ちなみに楽天禁止タグを含む内容なので実施については自己責任でお願いします。
前提
今回は、以下の前提の上に説明を進めます。
- ショップURL & GOLDアカウント名:
myshop
FTPサーバ内のファイル構成
今回はこの様にファイルを構成しました。
myshop/
├── iframe/
│ ├── sp-header.html
│ └── css/
│ ├── sp-header.css
│ └── sp-header-reset.css
└── shop-banner/
├── myshop.jpg
└── cashless.jpg
※ /で終わるものはディレクトリ名（=フォルダ名）です
※ myshop/はFTPのroot（一番上のフォルダ）で、新規作成の必要はありません
GOLD以外に編集するもの
当然ですが、GOLD上にファイルを保存だけではやりたいことができません。先にそちらを済ませてしまいましょう。
RMSメニューの下記ページに飛びます。
店舗設定> 2 デザイン設定> スマートフォンデザイン設定> 商品ページ共通パーツ設定
そうしたら、商品ページ共通説明文の項目に以下を追加しましょう。
<!--sp header --><iframeclass="sp-header"frameborder="0"scrolling="no"src="https://www.rakuten.ne.jp/gold/myshop/iframe/sp-header.html"width="100%"frameborder="0"=""></iframe=""><linkrel="stylesheet"href="https://www.rakuten.ne.jp/gold/myshop/iframe/css/sp-header.css"="">はい。RMSでの設定は以上です。
ここでやっている事はごく単純です。
- 全てのスマホ商品ページ共通で、GOLD上の
iframeとCSSを読み込ませる
商品ページでsp-header.cssを読んで、sp-header.htmlの中でもsp-header.cssを読み込んでいます。1
GOLDで作るもの
iframeに画像を表示してみる
まずはiframeに画像を表示するだけ、というのをしてみます。
ごく普通のHTML5ファイルをGOLD上に置くだけです。
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>myshop sp header</title><linkrel="stylesheet"href="css/sp-header.css"></head><bodyclass="sp-header"><div><div><!-- ショップバナー --><ahref="https://www.rakuten.ne.jp/gold/myshop/"target="_top"><imgsrc="https://www.rakuten.ne.jp/gold/myshop/shop-banner/myshop.jpg"></a><!-- キャッシュレス還元バナー --><ahref="https://event.rakuten.co.jp/campaign/cashless/"target="_top"><imgsrc="https://www.rakuten.ne.jp/gold/myshop/shop-banner/cashless.jpg"></a></div></div></body></html>注意点としては、iframe内のaタグにはtarget属性を付けるのを忘れないことです。
興味のある方はtargetを取り除いてトライしてみてください。リンククリックしたときに妙なことになります。
で、ここで商品ページを見てみるとこうなっています。ちゃんと画面下の方にiframeがありますね。
でも位置がココジャナイですし、画像の縮尺も変です。妙な余白もあります。次はこれをなんとかしていきます。
iframe内の画像を画面幅に合わせ、上部に配置する
画面上部のパーツは図のようになっています。
- ヘッダ部分150px
- ショップ名の高さ45px
- 商品画像スライドショー id="irtemImageSlider"
これを利用して、CSSで次のことを実装します。
- iframeの絶対位置を画面の一番上から150pxに合わせる
- iframeのbodyに付いている余計な余白を取り除く
- iframe内の画像の幅を画面幅に合わせる
- iframeの高さを、iframeの中身の高さに合わせる
- #itemImageSlider の上余白を、iframeの高さと同じだけ開ける
結果、このようになります。
@importurl(sp-header-reset0.css);/* 商品画像スライダーの上隙間を作る */#itemImageSlider{/**
* 100vw * 240 / 750 = ショップバナーの高さ
* 100vw * 120 / 616 = キャッシュレス還元バナーの高さ
* -45px = ショップ名の高さ
*/margin-top:calc(100vw*240/750+100vw*120/616-45px);}/* 作った隙間に iframe を差し込む */iframe.sp-header{height:calc(100vw*240/750+100vw*120/616);position:absolute;top:150px;left:0;width:100%;}/* iframe内 */body.sp-header-body{margin:0;}.sp-header-bodyimg{width:100%;height:auto;vertical-align:bottom;}補足
ショップ名のパーツはバナーがあるから不要だろうということで、iframeで覆い隠しています。
これをしたくない場合は- 45pxを削除して、iframe.sp-header { top: calc(150px + 45px); }としてください。
また、sp-header.cssに書かずに、わざわざsp-header-reset.cssに記述しているのを不思議に思った方もいるでしょう。
もちろん、sp-header.cssに全て書いても同じことができます。その場合sp-header-reset.cssは不要です。
これは、ソースコードの保守性を考えてのことです。
iframeの位置や高さなどの大前提となる記述をsp-header-reset.cssに書き、それ以外のパーツ専用記述をsp-header.cssに書くことで、変更があった時にどのファイルを修正すればよいか分かりやすいでしょう。（分かりやすくないですか...？）
私が1ファイルにいろんな役割を持たせて全部書いちゃう、というスタイルが嫌いだからってのもあります。
無駄に長くなって、修正箇所を探すの面倒じゃないですか。
calc()について
cssにcalc()という記述がありますが、これは計算式を作るためです。
vw(viewport width)という単位は便利なもので、画面幅を100vwとした単位のことです。
これは%とは明確に異なり、%の場合は親要素の幅が100%なので、親要素に左右されます。vwの場合は親要素の幅に関係なく、画面幅を基準にできるのです。
さて、今回用意したショップバナーは幅750px／高さ240pxのものです。
これを画面幅にリサイズすると高さがどうなるか、100vwという数字を使えば計算できますよね。
「iPhoneXの画面幅は375pxだから、高さは半分の120px！ 120pxって書いたろ！」
としてはいけませんよ。スマホというのはiPhoneXだけではなく、いろんな画面幅がありますから。
バナーの数を増やしたい場合
さて、バナーを足したり他のパーツをiframe内に配置したりした時はどうしたらいいでしょうか。
答えはこうです、かんたんですね。
- (sp-header.htmlにバナーを足す)
- iframeの高さを修正する
- #itemImageSlider の上余白を修正する
ちなみに私は「2回読み込むの無駄じゃん！」と思って片方だけで試したことがありますが、デザインが崩れて結局うまくいきませんでした。実際は2回読み込む記述をしてもキャッシュの活用等でダウンロードは1回なのかもしれませんが、釈然としません。誰かスッキリする方法を知っている方はコメント欄にて教えて下さい。 ↩