【楽天スマホヘッダーカスタマイズ】 デフォルトのヘッダーを隠さずに独自のヘッダーを出す

   2017/10/15

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

楽天の共通パーツ禁止

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

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

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

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

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

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

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

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

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

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

今回はこのイーザッカマニアさんのオリジナルヘッダー風のカスタマイズ方法を解説します。

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

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

CSSの中身はこんな感じに

必要になるのはCSSファイルが一つのみ。

もしある程度複雑にしたいならiframeにするhtmlファイルも用意するといいでしょう。

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

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

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

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

.sample{
     position: absolute; /* ③sampleクラスのdivボックスやiframeパーツをページ全体から相対位置指定 */
     top: 150px; /* ④店舗独自ヘッダーの画面トップからの距離を指定 */
     left: 0;
     width: 100%; /* iframeの場合横幅をwidthで指定すれば不要 */
     }

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

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

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

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

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

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

そして、この隙間にショップ独自ヘッダーを組み込むわけです。

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

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

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

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

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

150pxで楽天固有ヘッダー分、今回のカスタマイズで入れるヘッダーを下に下げるってなわけです。

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

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

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

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

配置するdivボックスや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="https://www.rakuten.ne.jp/gold/○○○/sample.css"> <!-- CSSの読み込みタグ -->
<iframe class="sample" frameborder="0" scrolling="no" src="https://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のバナーの部分。

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

例えばDEALを消してしまうのはデメリットのようにも感じますが、基本的に検索画面などにはDEALやポイント倍率などは表記されますから、大して問題にはならないかと。

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

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

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

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

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

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

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

20170629現在のイーザッカマニアストアーズさん_楽天デフォルトヘッダーから全体検索窓を消している

6月29日現在のイーザッカマニアさんの楽天スマホヘッダーの状態

※2017年6月29日追記

6月29日現在、イーザッカマニアさん、しれっと楽天デフォルトヘッダーの中から全体検索窓消してますね…

さすがにそれはグレーどころか完全にブラック、規約違反ですけど…

7月いっぱいはこれでいくつもりなのかもしれません。

※2017年8月14日追記

8月14日現在、イーザッカマニアさん全体検索元に戻したようです。

一応デフォルトで出てくる楽天全体検索窓の部分、ショップ内検索にも切り替えられるようになりましたし。

それでも楽天全体検索の方がデフォルトになっているのはちょっと…ですけど。

※2017年8月24日追記

コメント欄にて実装できないとご指摘を受け、コードを全般的に見直しました。

私のケアレスミスが原因でした。大変失礼いたしました。<(_ _)>

ちなみに、結局スマホヘッダー罰則の件、楽天さんから特に指摘なく現状この状態で特に問題なく運営できております。

いろいろ隠しまくっていた以前に比べれば断然改善したのでとりあえず多少のカスタマイズは目をつむってくれているようです。

ここでご紹介している方法だと基本的に楽天共通というよりはお店にごと出てくるものしか隠していないのでセーフという認識なのかも?

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

コメント一覧

  1. 北川 より:

    初めまして、いつも 楽天運営の為参考にさせていただいております。
    ありがとうございます。

    「楽天ヘッダーの下に独自ヘッダー 」を試しているのですが、 どうしても、ヘッダー下の空白スペースにifreamで作った内容が表示されず、「商品ページ共通説明文」欄の一番したに表示されてしまいます。

    お手数をお掛け致しますが、方法をお教えいただけますでしょうか。

    • 管理人 より:

      北川 様

      id=”originalHeader” は途中で class=”sample” に変えたのに、この部分だけ書き換え忘れていました。

      class=”sample” をヘッダーのパーツとなる iframeかdivに入れればかかりますです。

      本文も書き替えてますので再度ご確認ください。

      ししし失礼しました。

  2. NA より:

    参考にさせていただいております。
    id=”originalHeader”
    部分には何を入れれば良いでしょうか?

    • 管理人 より:

      NA様

      id=”originalHeader” は途中で class=”sample” に変えたのに、この部分だけ書き換え忘れていた模様です。

      class=”sample” をヘッダーのパーツとなる iframeかdivに入れればかかるはず…です。

      本文も書き替えました。

      申し訳ないです。

  3. 管理人 より:

    コメントくださった皆さま、なんだか記事が色々崩れてしまっていたので、一旦整理して個別に返信申し上げます。

  4. yuta より:

    いつも拝見させて頂いております。

    id=”originalHeader” は途中で class=”sample” に変えたのに、この部分だけ書き換え忘れていた模様です。

    class=”sample” をヘッダーのパーツとなる iframeかdivに入れればかかるはず…です。

    とございますが、classのsamleをどのようにすれば上部に表示されるのでしょうか?
    ちょっとまだまだ勉強不足でわかってないのですが・・・よろしくお願いします!

  5. yuta より:

    たびたびすいません。
    どうも上記の方と同じで上の部分はheightがきいてスペースが空いておりますがページは一番下で表示しているようです。
    ご教授頂けたら嬉しく思います!

    • 管理人 より:

      一つ心当たりが出ました。
      大変申し訳ないのですが、全コードを直しましたので再度最初から作業してみて頂いてもよろしいでしょうか?
      解説用のコメントアウトを別の言語のクセで『 // 』にしてしまったのが原因のようです。
      あと一部誤字らしきものを直したのでもう一度コピペし直していただければと思います。

  6. TANAKA より:

    こんにちは。
    初めまして。利用させて頂いております。
    ありがとうございます。

    さて、似た質問になってしまって申し訳ないのですが、
    こちらの記載のページの方法で独自ヘッダー入れ込みを試しているのですが、
    「商品ページ共通説明文」欄の下部分に表示されてしまいます。

    ちなみに
    id=sample で統一されています。

    Iフレームの入れ込みで行っているのですが、
    Iフレームの中にも記述が必要、という事でしょうか。

    初歩的な質問で申し訳ありません。
    お手すきの際にご返答お待ちしております。

    • 管理人 より:

      他の方への返信と全く同じ内容で申し訳ないですが…(こんな横着者だからミスる)

      一つ心当たりが出ました。
      大変申し訳ないのですが、全コードを直しましたので再度最初から作業してみて頂いてもよろしいでしょうか?
      解説用のコメントアウトを別の言語のクセで『 // 』にしてしまったのが原因のようです。
      あと一部誤字らしきものを直したのでもう一度コピペし直していただければと思います。

  7. フジタ より:

    はじめまして、大変興味深く参考にさせて頂いております。
    北川様同様、私もヘッダー下のスペースに入らず、下に表示されてしまいます。

    class=”sample”で指定しているのですが、どうにも指定位置にカスタマイズできず・・・

    アドバイス頂ければ幸いです。

    • 管理人 より:

      他の方への返信と全く同じ内容で申し訳ないですが…(こんな横着者だからミスるのですが)

      一つ心当たりが出ました。
      大変申し訳ないのですが、全コードを直しましたので再度最初から作業してみて頂いてもよろしいでしょうか?
      解説用のコメントアウトを別の言語のクセで『 // 』にしてしまったのが原因のようです。
      あと一部誤字らしきものを直したのでもう一度コピペし直していただければと思います。

  8. 管理人 より:

    2017年8月24日
    皆様ご迷惑をおかけしております。
    おそらく私が解説用につけたコメントアウトタグが別言語になってしまったいたのが原因のようです。
    大変恐縮ですが、コード全般を直しましたので再度お試し頂いたうえでご確認いただければと。

    お手数かとは思いますが、問題なく実装できた場合でもご一報いただけると嬉しい限りです。
    (またダメだった場合はご遠慮なくお叱りください。再度見直します。)

  9. ogura より:

    スマホの商品ページに固定のボタンを設置してみたのですが、
    ランキングや目玉商品が消えてしまいました。

    cssに下記を追加してもダメなようで、
    何か解決策をご存知ないでしょうか?

    #rnkInShopPartsArea {
    display:block !important;
    }

    突然のご連絡で誠に申し訳ございませんが、
    どうぞよろしくお願い致します。

    • 管理人 より:

      ogura様

      CSSには詳細度と呼ばれる優先順位があるので、消しているCSSの指定が

      #rnkInShopPartsArea {
      display:block !important;
      }

      よりも詳細度の高い記述になっていると無効化されて効きません。

      もしくは、rnkInShopPartsAreaは非表示にされておらずrnkInShopPartsAreaを包んでいるタグ(親要素)が非表示にされている可能性もあるかと。

      その場合は rnkInShopPartsAreaにいくらdisplay: block;をかけても関係ないです。その親要素に display: block; をかけるなりで表示させないといけません。

      あまりCSSを見たりするのが得意ではないようでしたら、その固定ボタン関連CSSの中で display: none; や display: hidden; を一つずつ display: block; に変えてみて原因を特定されるのが一番確実です。

      (場合によっては非表示にするのではなく表示位置を画面外に飛ばして見せない方法もあったりしますけど。)

      まずは原因を特定した方がよいかと。

      もしもう原因を特定されているようでしたら、その原因をご教示いただければすぐ対処方がわかるかと思います。

  10. しょーえい より:

    はじめまして!
    この記事を読ませていただいて、すごく便利でありがたいと思い、いろいろ試しているのですがなかなかうまくできません。

    コピペでやっているのですが、初心者だからか、うまくできないのでしょうか。

    お忙しいところ大変申し訳ございませんが、ご教示いただけたら幸いでございます。

    何卒宜しくお願い申し上げます。

    • 管理人 より:

      飯野 様

      このコードで僕の方でただコピペして大丈夫だったので、恐らく普通にいけるかと思います。

      問題があるとしたら他のCSSなどが噛んでいる可能性が高いかなと。

      ちなみにうまくいかないとはどのような状況でしょう?

  11. めい より:

    はじめまして。
    こちらの記事を参考にして実装していました。
    大変役に立ちました。ありがとうございます。
    しかし、本日から急に「許可されていないURLの記載があります。」と出てはじかれるようになりました…
    これは楽天側がなんらかの処置をしたのでしょうか…

    • 管理人 より:

      めい様

      確認しました。RMSの商品ページ 共通パーツ設定とカテゴリページ 共通パーツ設定に入力する際に、URLをhttp://で入力すると弾かれるなので、恐らくこれではないかと。
      楽天GOLD上にあるファイルを読み込む際は全てhttp://をhttps://にしてください。
      少し前にhttps化が行われ、過渡期としてhttpで入力してもリダイレクト(転送)がかかっていたはずですが、このリダイレクト措置が終わったのかもしれません。

      もしhttps://にしてもダメな場合はまたお申し付けください。

      (その際は入力しているコードを頂きたいので、仰っていただければコメント時に頂いているメールアドレスへこちらからメールいたします。)

  12. yu- より:

    いつも拝見させて頂いております。
    以前に質問して表示することができたのですがその後
    本日RMSにてスマホ共通ページのiframeのheightの変更をしようと思ったら間違ったソースがありますと出て最初からいれてたソースも登録ができなくなったのですが楽天側でなにか対応があったのでしょうか?
    もしその際に変更箇所などあり対応できるのであればご教授お願い致します。

    • 管理人 より:

      yu-様

      めい様への返信でも書かせていただきましたが、RMS上に書きこむ楽天のURLがhttp://www.rakuten.com などhttp://になっていると弾かれるようになったものと思われます。
      https://に書き替えてお使いになってみてください。

      もしダメな場合はまたお申し付け下さい。コードを頂いて確認してみます。

      その時はコメント時に頂いておりますメールアドレスへメール致しますので、返信という形でお送り頂ければと思います。

  13. po より:

    こんにちは。
    タグの詳細、大変わかりやすく利用させて頂いております。

    上記コメントされている方々と同様なのですが、
    カテゴリページにてiframeが、裏技など全て試しましたがどうやっても反映されなくなりました。(e-zakkaさん含め反映されている店舗さんのものをコピペしてもNGでした…)

    https:// でも出来ず、楽天の仕様変更かなと思うのですが
    管理人様の環境ではどうかなと思いご質問させていただきました。

    • 管理人 より:

      po様
      私も本日、記事上のタグを使って再度試してみましたが、特に問題なくタグが入りました。
      楽天市場のプランによるのかなと思いスタンダードプラン、メガショッププランの両方で試してみるも問題なく…

      私の方から紹介しているタグの他にも何か入れていらっしゃるようでしたら、そちらの方が問題かもしれません。
      タグを見せていただいたほうが早いかと思いコメント時に頂いたアドレスへメールをお送りしたところ、メールアドレスが存在しないとのことで返って来ました…

      もし差し支えなければコメント時にメールアドレスをいただければと思います。

  14. K より:

    いつも拝見させていただいております。

    ありがとうございます。
    こちらを試しているのですが、カテゴリのパンくずリストのリンクが機能しなくなってしまいます。

    対策がありましたら お教えいただけますでしょうか。
    よろしくお願いします。

    • 管理人 より:

      K様
      カテゴリーページでのお話でしょうか?
      私が使っている限りそのような現象は確認されておりません。

      情報が少ないので推測ですが、カテゴリーのリンクの上に独自ヘッダーが透明の状態で重なってしまっているために、クリックができなくなっているように思えます。

      .ctgTtlと#itemImageSliderとであけた隙間のサイズと実際に実装したヘッダータグの縦幅(高さ)が一致しているか、ご確認ください。

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

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

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