「買い物かごに入れる」ボタンを大きくすると崩れる、トップページの楽天ヘッダーを修正する方法

崩れた楽天ヘッダー

こんにちは、楽天で気になった商品は即お買物かごにストックする癖がある、オガリア中村です。
おかげでお買物かごに入っている商品数、98。楽天のドロップ率を上げているという心苦しさを感じながら、100を目指している自分がいます。

さて、先日投稿した「楽天商品ページの『買い物かごに入れる』ボタンを大きくする方法」ですが、ブラウザによってはトップページ最上部にある楽天ヘッダーが崩れる為、回避方法をご案内します。

楽天ヘッダーが崩れた状態、とは?

それはつまり・・・なんと言ったら良いのか・・・とても難しい!そもそも、「崩れた」の定義は?良く見たら崩って漢字、めちゃくちゃ崩れそうだし・・・!

と、ご説明が難しかったので、体現してみる事にしました。子供の頃よく遊んで笑い転げた「お多福ゲーム」を用意します。

もちろん「お多福ゲーム」は手元に無いので、自分の顔を切りぬいてそれっぽくします。後は、目・鼻・口のパーツを、目を閉じながらマウスで当て込んでいくと・・・


どうですか?これが”崩れる”という事なんです。
自信満々の表情に見えますね。

楽天のヘッダーで言うと、こういう状態の事です。

キャプチャを貼れば一瞬でご案内できました、良かった良かった。

回避方法

原因は、お買物かごを大きくするCSSが、楽天ヘッダー内にある検索窓にも影響している為です。

店舗トップページ(http://www.rakuten.co.jp/******/)のみ影響が出、HTMLやCSSの記述でこれを防ぐ事は出来ないので、『買い物かごに入れる』ボタンを大きくするCSSを店舗トップページに反映させないRMS設定をご案内します。
 

  1. RMS内、デザイン設定 > 共通説明文(大)の編集画面にて、「お買物かごボタンを大きくさせる為のCSS」が入っていないテンプレートを新しく作ります。
  2. RMS、トップページ設定 > トップページ編集 より編集画面を開きます。
  3. 共通説明文(大) に現在設定されているテンプレートを、(1)で作成したテンプレートに変更します。

 
以上にて崩れが修正できるはずです!如何でしょうか?
ご不明な点はオガリア中村(ogaria@ogaland.com)までお問合せくださいませ!

以上、オガリア中村でした。
 
 

  1. コメントはまだありません。

  1. トラックバックはまだありません。