【イーザッカマニアストアーズ風】 楽天固有のヘッダーを隠さずに独自のヘッダーを出す

   2017/05/17

楽天固有のヘッダーを隠すのは罰点加点対象

楽天の共通パーツ禁止

スマホページで独自ヘッダー使ってるお店は注意!

楽天の商品ページやカテゴリーページのスマホ表示時、オリジナルヘッダーを設置して楽天のヘッダーを隠しているお店も多いかと思います。

もともと規約違反だったのですが、ついに罰点加点の対象にすることに。

その猶予期間が2017年4月30日までだったのか、4月27日に2017年7月31日までに延長されました。

とはいえお店独自のヘッダーを出したいお店さんもいらっしゃるでしょうから、その制作担当の方のために一つ提案をば。

イーザッカマニアさんのヘッダーが素敵!

イーザッカマニアさんのスマホ版新ヘッダー

イーザッカマニアさんの解決策が素敵です

そんなわけで、楽天のスマホヘッダーを出しつつ自ショップのヘッダーも出してオシャレに両立させたイーザッカマニアさんのデザインをご紹介。(※2017年5月現在)

楽天固有のナビパーツをしつつ、しっかりとイーザッカマニアさんの個性的なヘッダー&ナビを実装しています。

今回はこのイーザッカマニアさんのオリジナルヘッダーの実装方法をご紹介します。

もともとあるヘッダーを隠すのに比べ簡単なので、ヘッダー隠しができていたショップさんならすぐに実装できるかと思います。

楽天ヘッダーの下に独自ヘッダー 実装方法

CSSの中身はこんな感じに

必要になるのはCSSファイルが一つと、もしある程度複雑にしたいならiframeにするhtmlファイルが一つだけで済みます。

まずCSSファイルから。

(ファイル名は任意で構いませんが、本ページでは仮にsample.html、sample.cssとしておきます)

まずsample.cssの中に必須になるのは、下記のコードです。

#itemImageSlider{
     margin-top: 180px;// 1.商品ページのコンテンツを下にズラす
     }

.ctgTtl{
     margin-top: 180px; // 2.カテゴリーページのコンテンツを下にズラす
     }

.sample{
     position: absolute; // 3.sampleクラスのdivボックスやiframeパーツをページ全体から相対位置指定
     top: 150px; // 4.店舗独自ヘッダーの画面トップからの距離を指定
     left: 0;
     witdh: 100%;
     }

.itemtitle,#campaignText,#itemFestival{
     display: none; // 5.商品ページの店名、商品変倍表示、楽天スーパーDEALの表示を非表示に
     }

順を追って解説していきましょう。

まず、1 の#itemImageSliderと2 の.ctgTtlのスタイルは下記のようにきいてくれます。

CSSでスマホ版楽天商品ページ・カテゴリーページのヘッダー部分に隙間を作る

独自ヘッダーを入れるための隙間ができた

これは要は楽天のヘッダーとコンテンツの間に隙間を空けるためのコード。

そして、この隙間にショップ独自ヘッダーを表示させるわけです。

なお、この180pxは管理人が適当につけただけの数値。

自身でお作りになるスマホ用ヘッダーのサイズに合わせてサイズを変えてください。

ヘッダーの中身(divボックスやiframeパーツ)を作成する

3の sampleクラス のスタイル指定が1&2で作った隙間へ独自ヘッダーを配置するためのポイント。

一応解説しておくと、sampleクラスはpositionをabsolute指定にすることで画面上端からの相対指定にし、topで上から150pxの位置に配置しています。

スマホ版楽天商品ページ・カテゴリーページ_独自ヘッダーパーツをCSSで配置する

positionとtopの指定により画面上端から150pxの場所に独自ヘッダーを配置

これによって1&2で作った隙間にヘッダーを配置できるってなわけです。

あとはヘッダーの中身をdivボックスに入れるもよし、別途HTMLファイルで作ってiframeで読み込むもよし。

ただし、必ずこのsampleクラスをつけましょう。

そして1&2で作った隙間の180pxの部分はヘッダーの隙間と同じ数値にしちゃってください。

なお、sampleクラスも管理人が適当につけた名前なので、spNavでもspHeaderでも好きなクラス名をつけてあげてください。

ちなみに管理人としてはiframeの方がオススメです。

Java ScriptでもjQueryでもCSS好きなだけ読み込んで自由に作れますし、更新もRMS抜きで楽天GOLD領域を使ってできるので楽です。

いずれにしても、上記で作ったsample.cssは読み込んでおきましょう。

後ほどRMS領域にも読み込むコードは入れますが、あとでこっちはきく、こっちはきかないなどで崩れてしまうといやなので、念のため両方に入れておくとよいでしょう。

「 無駄な読み込みが増えるとページ速度が… 」と気にする方もいらっしゃるかもしれませんが、正直楽天である時点で、更にいえばiframe使ってる時点でもうすでに手遅れです。

RMSスマホデザインの商品ページ、カテゴリーページ部分のコーディング

あとはRMS上に今回作ったsample.htmlのiframeとsample.cssを読み込むコードを書きこみます。

RMSにログイン

1-2 デザイン設定

2 スマートフォンデザイン設定内の商品ページ 共通パーツ設定カテゴリページ 共通パーツ設定

のそれぞれに読み込みのコードを入れて行きます。

本来この入力欄ではiframeやCSSの読み込みコードは書けないのですが、下記のようにすれば制限を回避して読み込んでくれます。

<link rel="stylesheet" ="" href="http://www.rakuten.ne.jp/gold/○○○/sample.css"> /* CSSの読み込みタグ */
<iframe id="originalHeader" frameborder="0" scrolling="no" src="http://www.rakuten.ne.jp/gold/○○○/sample.html" width="100%" height="200px" frameborder="0" =""></iframe ="">

それぞれsample.cssとsample.htmlを読み込むタグです。

それぞれのタグ内に入っている =”” が楽天のタグ制限を突破するためのポイント。

他にもうまくやれば本来使えないはずのclass=””タグも使えたりJavascriptファイルの読み込みも可能。

詳しくは別途解説していますので、下記関連記事よりご覧ください。

なお、『 確認画面へ進む 』をクリックしたあと一番下まで行って『 登録する 』ボタンをクリックしないと反映されないので注意。

店名やポイント表示などのパーツは非表示に

商品ポイントアップや楽天スーパーDEALのパーツによって全体がずれてします

5では.itemtitle、#campaignText、#itemFestivalを非表示にしています。

itemtitleは商品ページ上の店名、campaignTextはポイント倍率表示(変倍をかけていた場合のみ)、itemFestivalは楽天スーパーDEALのバナーの部分。

今回実装したヘッダーは画面上端から一定距離上に設置する形なので、これらのパーツを表示させっぱなしだとその下にくるコンテンツの位置がズレてしまいます。

楽天固有のヘッダーを隠さずに独自のヘッダーを出す まとめ

もうお気づきかもしれませんが、結局一部楽天デフォルトのパーツを非表示にしてしまっているわけです。

規約的にはグレーなところではありますが、楽天共通のヘッダー自体は非表示にせず、お店の中のパーツを非表示にしているだけなのでOK…なんて勝手な解釈。

なんにしてもイーザッカマニアさんがこの状態を維持しているうちは(もしくは7月31日までは)、しばらくこのままいこうかな、と思っています。

タグ規制突破裏技でJavaScriptも使えますし、やろうと思えば非表示にしているパーツを非表示にせず、うまいことできないこともないはず。

気が向いたらブラッシュアップするかもしれません。

その時はこちらのエントリーからもリンクを張ります。

  • このエントリーをはてなブックマークに追加
  • Pocket

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。