楽天 スマホ コピペで簡単!css裏ワザテクニック(看板画像・共通バナー)編

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

楽天のスマートフォンページを作成していて、
「不便だな、改善したいな」とお悩みの事ありませんか?

そんなあなたに、楽天のスマートフォンページを
更新するときに使用している、簡単にコピペで出来る!
裏ワザテクニックをご紹介します。

 


 

1.カテゴリ・商品詳細に看板画像(店舗ロゴ)を挿入する

楽天スマホテクニック

商品ページにも「お店」をアピール

楽天市場を運営していて、
「スマートフォンのトップには、看板画像が登録出来るのに、カテゴリページ(商品一覧ページ)や商品詳細ページのヘッダーには、ショップの看板画像が表示できない!」
と考えた方いらっしゃいませんか?

たしかに楽天市場では、ショップのトップページよりも
ユーザーの流入が多いといわれるカテゴリページ・商品詳細ページに
ロゴを設置できないというのは、ショップのアピールがイマイチです。

ヘッダーに看板画像を置く方法は他にもありますが、htmlを追加せず、
cssのみの追加で済みますので簡単です。ぜひ一度お試しください。

変更方法

[css] ※楽天GOLDにCSSファイルを作成後、以下を追加


/* 店舗ロゴ挿入(カテゴリ・商品詳細) */
.ctgTtl h1 a, #shopName a {
	display: block;
	height: 0;
	background: url(設置したい画像のurl) no-repeat left top #f7eae4;
	background-size: contain;
	padding-top: 00.00%; /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
	margin: 0;
	text-indent: -9999px;
}
/* ショップ名のタイトルバー削除 */
.shopname-info .itemtitle{
	display:none;
}

※こちらは楽天公式のものではなく、楽天の仕様変更により、不具合が生じる場合がございます。

ここで注意して欲しいのは、設置したい画像のサイズによって
上記のコードの7行目のpadding-top: 00.00%;
の値が変わることです。

(例)看板画像が(幅)640px(高さ)80pxの場合
80 ÷ 640 × 100 = 12.5%

※もし上手く割りきれない場合は、小数点第四位くらいで切り捨てても問題ないです。
特別表示の崩れはないかと思います。

[html] ※RMSの商品ページ共通説明文などにGOLD領域の作成したCSSを読みこませる


<link ="" rel="stylesheet" href="http://www.rakuten.ne.jp/gold/ショップID/任意のファイル場所.css">

2.共通バナー(大バナー・小バナー)を使いやすくカスタマイズ

PCのバナーをスマートフォンにも使いたい

ネットショップの運営は、日々忙しく更新が大変です。
出来れば、PCで使用したバナーはスマートフォンにも使いまわしたいと
感じることありませんか。

ですが、共通バナー(大バナー・小バナー)には推奨サイズが設定してあり、
そのままPCのバナーを使用すると、推奨サイズの縦横比から大きく外れた場合、
画像が大きく歪んでしまいます。

種別 実際の表示サイズ 推奨登録サイズ
大バナー (横)308px ×(縦)60px (横)616px ×(縦)120px
小バナー (横)133px ×(縦)55px (横)266px ×(縦)110px

楽天スマホテクニック

こんな画像の歪みを、ちょっとしたcssの追加で解決します。

変更方法

[html] ※RMSの商品ページ共通説明文などにGOLD領域の作成したCSSを読みこませる


<link ="" rel="stylesheet" href="http://www.rakuten.ne.jp/gold/ショップID/任意のファイル場所.css">

以下は、その読み込ませた上記のcssに追加してください。
また、大バナー・小バナーにはフリック型と一覧型があり、
それぞれで修正方法が違います。

フリック型の場合

まず、このcssを追加した場合、設置するバナーが全て同じサイズ(縦横比)に
しないと、綺麗に表示されません。

また、【トップページ・カテゴリページ】と【商品ページ】
に使用する大バナーの種類が異なり、別々の方法をとります。

【トップページ・カテゴリページ】

楽天スマホテクニック

今回のcssを入れた場合、
大バナーの場合⇒横が310pxに固定
小バナーの場合⇒横が135pxに固定
になり、高さを横幅に合わせて計算して、指定します。

■画像サイズ計算機
http://www.n1-sitemaker.com/resize/

(例)横380px 縦200pxバナーを使用する場合
■大バナーの場合
⇒(横310px)高さ163pxに指定
■小バナーの場合
⇒(横135px)高さ71pxに指定


/* 大バナー */
.rstBigBnr li img {
	width: 100%;
	height: 000px; /* ←上記で計算した任意の高さを指定する */
	max-width: none !important;
	max-height: none !important;
}
/* 小バナー */
.rstSmallBnr .smtBannerItem03 img {
	width: 100%;
	height: 000px; /* ←上記で計算した任意の高さを指定する */
	max-width: none !important;
	max-height: none !important;
}
【商品ページ】

楽天スマホテクニック

商品ページの方は、高さの計算が不要です。


/* 大バナー */
#shopInfoSliderLarge .bannerImageFrame img {
	max-height: none !important;
}
/* 小バナー */
#shopInfoSliderSmall img {
	max-height: none !important;
}

一覧型の場合

一覧型の方は非常に簡単です。

また、一覧型(大バナー)はバナーのサイズを気にせず、
縦に並べてバナーを設置できるので、非常に使いやすいです。

楽天スマホテクニック

※小バナーの方は、このcssを追加した場合、
設置するバナーが全て同じサイズ(縦横比)にしないと、
表示が崩れる場合があります。


/* 大バナー(トップページ・カテゴリページ用) */
.rstGeneralLargeBnr img {
	height: auto;
}
/* 大バナー(商品ページ用) */
#shopInformation .shopInfoBannerWrap.bannerLarge img {
	max-height: none !important;
}
/* 小バナー(トップページ・カテゴリページ用) */
.rstGeneralBnr img {
	height: auto;
}
/* 小バナー(商品ページ用) */
#shopInformation .shopInfoBannerWrap.bannerSmall img {
	max-height: none !important;
}

まとめ

いかがでしたでしょうか?

今回紹介したものは、地味ですが個人的にはかなり役に立つものだと思います。
ぜひお試しください!

みなさまのお役に立てばいいなと思います!

【楽天スマホまとめ】
[第1回]フローティングバナー設置編
[第2回]カテゴリページ(商品一覧ページ)をカスタマイズ編
[第3回]css裏ワザテクニック(看板画像・共通バナー)編 ←今ここ
[第4回]疑似要素「:before」「:after」を使ったcss裏技テクニック
[第5回]楽天スマートフォン施策まとめ 編

 
 

▼サイト無料診断もしていますので気になる方はぜひコチラから▼

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

SNSでもご購読できます。

コメント

コメントを残す