月商100万円を達成するヒント満載!楽天市場・Yahooショッピング・ECサイト運営のマニュアル

プロが教える楽天市場スマートフォンページにRMSからコピペで簡単に固定ヘッダーテクニック

こんにちは、奥平です。えっ!?若干ご無沙汰じゃないのかって?

そうですね、ブログは裏方として企画や解析を行っていたのですがやはり私も書きたい!という欲求が湧いてきました。

弊社のブログ「ECサイト運営まとめ」を初めて約1年半が経過しました。Google Analyticsで人気記事とその傾向を紐解くとやはり、楽天市場の制作関係の記事に人気が集中していますね。私もクライアントの制作の際には様々なワードで検索して目的を達成しようとするのでテクニカルな記事が人気になるには納得です。

さて、本日は記事タイトルにあるように楽天市場のスマートフォンページで固定ヘッダーを配置するテクニックです。特に難しいことがないように完全にコピペで行うことが出来る上に2018年2月現在の楽天市場のガイドライン的にも問題ない仕様のものです。

それではいきなりですが仕上がりを。

 

楽天で買物をしているとたまに固定ヘッダーを配置している店舗さんを発見しますね、あれを作っていきます。

今回はリンク先などはRMS内で加工できるようにスマホページで使用できるタグだけを使用して組み立てて行きます。しかし、配置にはCSSが必要になりますのでGOLDにアップする作業は別途必要になります。「楽天GOLDって何?」というかたはこちらをご覧ください。

楽天GOLD(ゴールド)とは? メリット&デメリット

それでは早速作っていきましょう。

  1. ロゴを配置する
  2. ナビゲーションメニューを作る
  3. CSSでレイアウトする
  4. ガイドライン遵守用にデフォルトのパーツを調節する
  5. 実際にRMSの画面で設置してみる
  6. まとめ

ロゴを配置する

さて、上から順番に作っていくのですが、まずはロゴの配置ですね、店舗の設定で既にロゴマークは作っていると思いますのでそれを流用したいと思います。

普段はあまり使わないフォルダですので収納場所がわかりにくいのですが、ユーザーフォルダの上にロゴ画像が格納されています。

その中から長方形ロゴを選んでそのURLをコピーして下さい。

https://cabinet.rms.rakuten.co.jp/shops/店舗URL/logo/logo2.jpg

店舗URLは各店舗に応じて変更してくださいね。ロゴを押した時のリンク先は店舗TOPページとします。

<a href="https://www.rakuten.co.jp/店舗URL/"><img src="https://cabinet.rms.rakuten.co.jp/shops/店舗URL/logo/logo2.jpg" alt="店舗名"></a>

ナビゲーションメニューを作る

次にメニューバーを作っていきます。今回は4つで作りますが、お好みに応じて変更することも可能です。あまり数を多くするとタップしにくいので注意して下さい。


<a href="#">メニュー1</a>
<a href="#">メニュー2</a>
<a href="#">メニュー3</a>
<a href="#">メニュー4</a>

CSSでレイアウトする

さて、このままでは全然機能しないのでCSSで装飾していきます、セレクタを作る必要があるので今回のパーツ全体をtableタグで囲います。


<table>

<tr>

<td><a href="https://www.rakuten.co.jp/店舗URL/"><img src="https://cabinet.rms.rakuten.co.jp/shops/店舗URL/logo/logo2.jpg" alt="店舗名"></a><a href="#">メニュー1</a><a href="#">メニュー2</a><a href="#">メニュー3</a><a href="#">メニュー4</a></td>

</tr>

</table>

さらに、セレクタを付与するためにtableをbgcolor=”#fefcfd”とします。

これはCSSのセレクタで一定の属性の中の特定の値を持っているものだけに適応するというものを使用するためです。他と重複しない値であればなんでも大丈夫なのですがRMSのレギュレーションに適合できるようにするために行っています。


<table bgcolor="#fefcfd"> 

<tr>

<td>
<a href="https://www.rakuten.co.jp/店舗URL/"><img src="https://cabinet.rms.rakuten.co.jp/shops/店舗URL/logo/logo2.jpg" alt="店舗名"></a>
<a href="#">メニュー1</a>
<a href="#">メニュー2</a>
<a href="#">メニュー3</a>
<a href="#">メニュー4</a>
</td>

 </tr>

</table>

さて、それではCSSのカスタマイズを行っていきましょう。

table[bgcolor="#fefcfd"] * {
margin: 0;
padding: 0;
}
table[bgcolor="#fefcfd"] {
background: none;
position: fixed;
top: 0;
box-shadow: 0px 0 10px rgba(0,0,0,0.7);
left: 0;
}
/*ロゴ画像のサイズ調整*/
table[bgcolor="#fefcfd"] a:first-child {
display: block;
background: #fff;
}
table[bgcolor="#fefcfd"] a:first-child img {
display: block;
width: 60%;/*ロゴ画像に応じて変更*/
margin: 0 auto;
}
table[bgcolor="#fefcfd"] p {
background: rgba(255,255,255,0.8);/*メニューの透過*/
display: flex;
}
table[bgcolor="#fefcfd"] p a {
width: 25%;/*メニュー数に応じて調整*/
text-align: center;
text-decoration: none;
border-right: 1px solid #999;
color: #333;
font-size: 12px;
letter-spacing: 1px;
padding: 10px 0;
}
table[bgcolor="#fefcfd"] p a:last-child {
border-right: none;
}

ここまで完成した物のデモはこちら

【スマートフォンページ用固定ヘッダーサンプル】

ガイドライン遵守用にデフォルトのパーツを調節する

最後に楽天のガイドラインで既存のパーツを隠すことは禁止されていますので調節していきます。

これはCSSだけなので上記のCSSと合わせて記述しておくとメンテナンス性が高くなります。

/*既存ヘッダーの調節*/
#shopName ,/*ショップ名部分*/
#rstTopSearch ,/*検索バー*/
#ipnsh-header ,/*最上部のヘッダー*/
#topFuncShopPopup/*5個並びの部分*/
{
position: relative;
z-index: 10000;
background: #ffffff;
}

これで既存のヘッダーの下レイヤーに固定ヘッダーメニューを設置することが出来ます。完成したCSSを任意の名前で保存します。ここではfixedheader.cssという名前で保存しています。z-indexを調節することで既存の楽天メニューが無くなると表示されるという構造になります。

これをFTPを使ってGOLDサーバーに上げておきます。

実際にRMSの画面で設置してみる

それでは完成たものをRMSで設置していきましょう。

CSSの設置には少しコツがいるのでこちらの記事を確認して下さい。

楽天市場のスマートフォンページカスタマイズ裏ワザ

デザイン設定> スマートフォン デザイン設定 >商品ページ共通パーツ設定 >商品ページ共通説明文

先程のhtmlをCSSのリンクも合わせて全て挿入します。


<table bgcolor="#fefcfd">

<tr>

<td>
<a href="https://www.rakuten.co.jp/店舗URL/"><img src="logo.jpg" alt="店舗名" ></a>
 <a href="#">メニュー1</a><a href="#">メニュー2</a><a href="#">メニュー3</a><a href="#">メニュー4</a>
</td>

</tr>

</table>

<!--▼css▼-->
<link ="" href="https://www.rakuten.ne.jp/gold/店舗URL/css/fixedheader.css" rel="stylesheet" type="text/css">

※メニューなどリンク先を調整してください。

これで設置作業は完了です。

TOPページやカテゴリページのも同じ流れで設置すること出来ます。

まとめ

いかがでしたでしょうか?店舗URLとリンク先のURLを編集するだけのコピペで使える固定ヘッダーシリーズでした。

2018年2月現在の動作は確認していますが、今後のアップデートで使用できなくなるかもしれませんので情報のアンテナは高くしていてください。また、ガイドラインの更新によっても使用できなくなることも有りますのでご利用の際はその点にご注意ください。

by
株式会社松平商会の社長です。経営者として組織のマネジメントをするのが仕事ですが、デザイナー上がりなので制作全般を楽しんで仕事しています。初級~中級程度の制作のテクニックと写真撮影、経営の記事を中心に執筆しています。
SNSでフォローする