【楽天スマホヘッダーカスタマイズ】 デフォルトのヘッダーを隠さずに独自のヘッダーを出す
楽天固有のヘッダーを隠すのは罰点加点対象
スマホページで独自ヘッダー使ってるお店は要注意！
楽天の商品ページやカテゴリーページのスマホ表示時、オリジナルヘッダーを設置して楽天のヘッダーを隠しているお店も多いかと思います。
もともと規約違反だったがついに罰点加点の対象に。
その猶予期間が2017年4月30日までだったのか、4月27日に2017年7月31日までに延長されました。
とはいえお店独自のヘッダーを出したいお店さんもいらっしゃるでしょうから、その制作担当の方のために一つ提案をば。
イーザッカマニアさんのヘッダーが素敵！
イーザッカマニアさんの解決策が素敵です
そんなわけで、楽天のスマホヘッダーを出しつつ自ショップのヘッダーも出してオシャレに両立させたイーザッカマニアさんのデザインをご紹介。（※2017年5月現在）
楽天固有のナビパーツをしつつ、しっかりとイーザッカマニアさんの個性的なヘッダー＆ナビを実装しています。
今回はこのイーザッカマニアさんのオリジナルヘッダー風のカスタマイズ方法を解説します。
もともとあるヘッダーを隠すのに比べ簡単なので、ヘッダー隠しができていたショップさんならすぐに実装できるかと思います。
楽天ヘッダーの下に独自ヘッダー 実装方法
CSSの中身はこんな感じに
必要になるのはCSSファイルが一つのみ。
もしある程度複雑にしたいならiframeにするhtmlファイルも用意するといいでしょう。
まずsample.cssの中に必須になるのは、下記のコードです。
（ファイル名は任意で構いませんが、本ページでは仮にsample.html、sample.cssとしておきます）
[css]#itemImageSlider{
margin-top: 180px; /* ①商品ページのコンテンツを下にズラす */
}
.ctgTtl{
margin-top: 180px; /* ②カテゴリーページのコンテンツを下にズラす */
}
.sample{
position: absolute; /* ③sampleクラスのdivボックスやiframeパーツをページ全体から相対位置指定 */
top: 150px; /* ④店舗独自ヘッダーの画面トップからの距離を指定 */
left: 0;
width: 100%; /* iframeの場合横幅をwidthで指定すれば不要 */
}
.itemtitle,.ctgTtl1,#campaignText,#itemFestival{
display: none; /* 5.通常商品ページ＆定期購入ページの店名、カテゴリページの店名、商品変倍表示、楽天スーパーDEALの表示を非表示に */
}
[/css]
順を追って解説していきましょう。
まず、1 の#itemImageSliderと2 の.ctgTtlのスタイルは下記のようにきいてくれます。
独自ヘッダーを入れるための隙間ができた
要は楽天のヘッダーとコンテンツの間に隙間を空けるためのコード。
そして、この隙間にショップ独自ヘッダーを組み込むわけです。
なお、この180pxは管理人が適当につけただけの数値。
自身でお作りになるスマホ用ヘッダーのサイズに合わせてサイズを変えてください。
ヘッダーの中身（divボックスやiframeパーツ）を作成する
3の sampleクラス のスタイル指定が1＆2で作った隙間へ独自ヘッダーを配置するためのポイント。
一応解説しておくと、sampleクラスはpositionをabsolute指定にすることで画面上端からの相対指定にし、topで上から150pxの位置に配置しています。
150pxで楽天固有ヘッダー分、今回のカスタマイズで入れるヘッダーを下に下げるってなわけです。
positionとtopの指定により画面上端から150pxの場所に独自ヘッダーを配置
これによって1＆2で作った隙間にヘッダーを配置できます。
あとはヘッダーの中身をdivボックスに入れるもよし、別途HTMLファイルで作ってiframeで読み込むもよし。
配置するdivボックスやiframe自体にsampleクラスさえついていれば、楽天固有ヘッダーの下に配置されるはずです。
そして1＆2で作った隙間の180pxの部分はヘッダーの隙間と同じ数値にしちゃってください。
なお、sampleクラスも管理人が適当につけた名前なので、spNavでもspHeaderでも好きなクラス名をつけてあげてください。
ちなみに管理人としてはヘッダーパーツを格納するのはdivよりもiframeの方がオススメです。
Java ScriptでもjQueryでもCSSでも好きなだけ読み込んで自由に作れますし、更新もRMS抜きで楽天GOLD領域を使ってできるので楽です。
いずれにしても、上記で作ったsample.cssは読み込んでおきましょう。
後ほどRMS領域にも読み込むコードは入れますが、あとでこっちはきく、こっちはきかないなどで崩れてしまうといやなので、念のため両方に入れておくとよいでしょう。
「 無駄な読み込みが増えるとページ速度が…… 」と気になる方もいらっしゃるかもしれません。が、楽天市場なうえ無理矢理カスタマイズしている時点で、更にいえばiframe使ってる時点でもうすでに手遅れです。
RMSスマホデザインの商品ページ、カテゴリーページ部分のコーディング
あとはRMS上に今回作ったsample.htmlのiframeとsample.cssを読み込むコードを書きこみます。
- RMSにログイン
- 1-2 デザイン設定
- 2 スマートフォンデザイン設定内の商品ページ 共通パーツ設定＆カテゴリページ 共通パーツ設定
のそれぞれに読み込みのコードを入れて行きます。
本来この入力欄ではiframeやCSSの読み込みコードは書けないのですが、下記のようにすれば制限を回避して読み込んでくれます。
[html]
<link rel="stylesheet" ="" href="https://www.rakuten.ne.jp/gold/【ショップURL】/sample.css"><!– CSSの読み込みタグ –>
<iframe class="sample" frameborder="0" scrolling="no" src="https://www.rakuten.ne.jp/gold/【ショップURL】/sample.html" width="100%" height="200px" frameborder="0" =""></iframe ="">
[/html]
作成してアップロードしたsample.cssとsample.htmlを読み込むタグです。
【ショップURL】の部分も含め、呼び出しパスはアップロードしたフォルダとファイル名に合わせて適宜書き換えてください。
なお、それぞれのタグ内に入っている ="" が楽天のタグ制限を突破するための裏技です。本当はCSSの読み込みもclassタグもここではできないのですが、このように記述することで制限を突破できます。
他にもうまくやればJavascriptファイルの読み込みも可能。制限突破に関して詳しくは別途解説していますので、下記関連記事よりご覧ください。
なお、「 確認画面へ進む 」をクリックしたあと一番下まで行って「 登録する 」ボタンをクリックしないと反映されないので注意。
店名やポイント表示などのパーツは非表示に
5では.itemtitle、.ctgTtl1、#campaignText、#itemFestivalを非表示にしています。
itemtitleは商品ページ上の店名、ctgTtl1はカテゴリページ上の店名、campaignTextはポイント倍率表示、itemFestivalは楽天スーパーDEALのバナーの部分。
ポイント倍率表示は店舗別に書けていた場合、楽天スーパーDEALは対象だった場合のみに表示されるものです。
今回実装したヘッダーは画面上端から一定距離上に設置する形なので、これらのパーツを表示させっぱなしだとその下にくるコンテンツの位置がズレてしまいます。
例えばDEALを消してしまうのはデメリットのようにも感じますが、基本的に検索画面などにはDEALやポイント倍率などは表記されますから、大して問題にはならないかと。
iframeを入れたとき、左右の余白が気になる方
質問が多いので追記します。ヘッダーにiframeを入れたとき左右の余白が気になる方が多いようです。
widthを100%指定にしていても消えない場合は、iframeパーツとなるhtmlファイルの<body>タグを下記のどちらかに置き換えてください。
[html]
<body style="margin:0;padding:0;"><!– 上下余白も消す –>
<body style="margin:auto 0;padding:auto 0;"><!– 左右余白だけ消す –>
[/html]
なぜwidthを100%指定にしていても余白ができてしまうのか、なぜ上記タグで余白が消えるのかなどは割愛。
うまく消えない方、詳しく知りたい勉強熱心な方は下記リンクをご参照ください。
楽天固有のヘッダーを隠さずに独自のヘッダーを出す まとめ
もうお気づきかもしれませんが、結局一部楽天デフォルトのパーツを非表示にしてしまっているわけです。
規約的にはグレーなところではあります。しかし楽天共通のヘッダー自体は非表示にせず、お店の中のパーツを非表示にしているだけなのでOK……なんて勝手な解釈。
なんにしてもイーザッカマニアさんがこの状態を維持しているうちは、しばらくこのままいこうかな、と思っています。
タグ規制突破裏技でJavaScriptも使えますし、やろうと思えば非表示にしているパーツを非表示にせず、うまいことできないこともないはず。
気が向いたらブラッシュアップするかもしれません。その時はこちらのエントリーからもリンクを張ります。
追記：レスポンシブ対応版できました
要望の多かったレスポンシブ対応版ができました。横幅サイズによって高さが自動的に変わる仕様になっています。
スマホの横幅によって高さが変わる設計のヘッダーだと、本記事のカスタマイズではサムネイル画像にヘッダーがかぶったり隙間ができたりします。
（iPhoneSEなど横幅が狭ければ隙間ができ、iPhone8Plusなど横幅が大きいとヘッダーと画像が近づき場合によってはかぶる）
すでに本記事のカスタマイズを導入している方では横幅の大きいデバイスに合わせて作り、横幅の狭いデバイスは隙間ができても仕方ないと妥協していることが多いかと。
新しい記事のカスタマイズではデバイスの横幅が変わっても高さが自動で変わってヘッダーとサムネイル画像間の距離が一定になるので、気になる方は差し替えちゃってください。
本記事用に作ったiframeパーツも使いまわせます。ただし、スマホの横幅サイズが変わっても横に伸びるだけで高さが変わらない構造の場合は新しい記事のは使えません。
（っていうかそういう仕様なら本記事のカスタマイズで問題ないはずですし）
レスポンシブ対応版は下記リンクよりどうぞ。
（広義では本記事のもレスポンシブっちゃレスポンシブだし、狭義には新しい記事のも本記事のもレスポンシブとはいえない気がするけど、そこはご愛敬）