イベント告知君のサイズ変更

Question

お世話になっております。
楽天のｈｅａｄｅｒ部分を少しでも短くしようとしておりまして、
イベント告知君と、商品検索を同じラインに配置したいと思っております。現在、検索部分を短くして右にスペースを空けました。
ここに入るサイズ、横395pxにイベント告知君を縮小したいと思っているのですが、サイズ変更は可能でしょうか。
よろしくお願いいたしします。

弊社楽天トップページ
http://www.rakuten.ne.jp/gold/morinoen95/

この会社のように、小さく表示できればと思っています。
http://item.rakuten.co.jp/vanilla/pch7-otms/

よろしくお願いいたします。

Answer

ECマスターズの田中です。

横スクロール型のイベント告知君は、
サイズを変更することができないのですが、
CSS3を使うことで、
イベント告知君全体を縮小して表示することができます。

以下の方法をお試しください。


1. イベント告知君用のタグに、下記CSSの指定を加える。

====== この下の行から ==========
-o-transform: scale(縮小倍率);
-webkit-transform: scale(縮小倍率);
-moz-transform: scale(縮小倍率);
-ms-transform: scale(縮小倍率);
transform: scale(縮小倍率);
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
====== この上の行まで ==========
縮小倍率には、イベント告知君を縮小する倍率を、小数でご記入ください。
510ピクセル→395ピクセルへ縮小する場合、約0.7745となります。

2. 同タグを、タグで囲む。

3. 2.のタグに、下記CSSの指定を加える。

====== この下の行から ==========
overflow: hidden;
width: 表示領域の横幅px;
height: 表示領域の縦幅px;
====== この上の行まで ==========
表示領域の横幅、表示領域の縦幅は、実際の値を半角数字でご記入ください。


たとえば、横395ピクセル、縦50ピクセルに縮小する場合は、
既存のタグを下記のようにご変更ください。




↓

Answer

解決いたしました。
ありがとうございます。