楽天PC版トップページのレイアウト変更と、看板画像の左右を全画面いっぱいにする方法

Question

PＣ版トップページのイメージをガラッと変えてみたいと思っています。こんなイメージに変えたいんです。例）https://www.rakuten.ne.jp/gold/koubo-panettone/現状）https://www.rakuten.co.jp/komekopan/1）看板画像を、画像が左右いっぱいまできて、上下も大きめにしたいです。このように配置する場合はRSM内の看板デザインのところで画像を選ぶだけではだめなのでしょうか。２）あと、現在のデザインだと看板の下に初期設定の　店舗TOP/企業概要/決済～/買い物かご/楽天市場TOP　と初期設定のまま並んでいます。これを、例のお店のように看板尾上に上げることはできますか？３）左上にロゴがきているのもいい感じですのでマネをしたいです。このようなトップページにするためには、どのようにすればいいのか、方向性を教えていただけないでしょうか？

Accepted Answer

ECマスターズの伊藤です。> １．結合で2段にしてみたのですが、参考店舗さんのデザインのように、上の段のバナーを右隅におきたいです。> を入れてみるなどのトライもしたのですが、デザインが崩れてしまいうまくいきませんでした。参考店舗さんのように、バナーと、文字の上下をギュッとくっつけて配置したいです。> 可能でしょうか？セルの分割が、下記の通りの方がよろしいかと思いますので、こちらをお試しくださいませ。看｜　　　　　　　　　　3,980円以上で～板｜文字｜文字｜文字｜文字｜文字 |となります。

看板	3,980円以上で～
看板	文字	文字	文字	文字	文字

> ２．参考店舗さんは右上に表示されている店舗紹介文などを削除されているような感じがあります。> 当社のページも、ヘッダーを上に詰められるのであれば、店舗紹介文の掲示は不要です。> 消して上の余白をなくすことはできますでしょうか？参考店舗さんですが、トップページは、GOLDでの作成頂いているページのため、自由にレイアウトを行うことができます。カテゴリページは、Kanakoのさんの店舗同様、上部にスペースが表示されています。https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/#比較のスクリーンショットhttps://ec-masters.gyazo.com/308fbeeed6d65439eb8545f088617f73

Answer

ECマスターズの伊藤です。いただいたご質問ですが、確認いたしますので、恐れ入りますが、ご回答まで今しばらくお待ちくださいますようお願いいたします。

Answer

ECマスターズの伊藤です。> 1）看板画像を、画像が左右いっぱいまできて、上下も大きめにしたいです。このように配置する場合はRSM内の看板デザインのところで画像を選ぶだけではだめなのでしょうか。店舗設定＞デザイン設定＞共通テンプレート設定＞ヘッダー・フッター・レフトナビ・ヘッダーコンテンツに、下記のタグを入れていただくことで、ご対応いただけます。しかしながら、楽天の標準のレイアウトを大きく崩す方法となり、こちらが原因で発生した不具合や、下記タグを編集した際のサポートができかねますので、ご了承の上、ご利用くださいませ。

看板	3,980円以上で～
看板	文字	文字	文字	文字	文字

> ２）あと、現在のデザインだと看板の下に初期設定の　店舗TOP/企業概要/決済～/買い物かご/楽天市場TOP　と初期設定のまま並んでいます。> これを、例のお店のように看板尾上に上げることはできますか？ご自身で、タグを入れていただくようになります。(1)のここに横幅いっぱいに表示したい内容を記述の箇所に、メニューヘッダー画像といった形で、設定をお願い致します。メニューの部分は、tableタグをご利用いただくことで、ご対応いただけると思います。デザインレシピ複数の画像を横に並べる方法https://club.ec-masters.net/index.php?design_page3テーブルタグ作成ツールhttps://www.tagindex.com/tool/table.html> ３）左上にロゴがきているのもいい感じですのでマネをしたいです。tableタグの中に含めていただくことで、ご対応いただくことができます。例えば、tableを4カラムにしていただきロゴ | メニュー1 | メニュー2 | メニュー3といった形になります。

Answer

1のタグでまず画面いっぱいの画像を入れてみたところ、下に続くトップページ本体の配置がだいぶ右の方にずれてしまい、うまく直すことができなかったです。また、レスポンシブではなかったので、ウェブ画面を小さくするとサイズが収縮せず切れてしまってかっこ悪かったので、とりあえずもとに戻しました。元々看板の登録はスケッチページで行っていたのですが、今回幅が1500ｐｘある画像をＲＭＳから登録してみたところ結構大きくなりましたので、とりあえず今回はこれでいこうと思います。そのうえで、現在の看板の上に　会社ロゴを左側、右側にナビボタンを並べたいのですが、ヘッダーではなく、RMSの看板登録から登録した看板の上にそのように配置することは可能でしょうか？

Answer

ECマスターズの伊藤です。> そのうえで、現在の看板の上に　> 会社ロゴを左側、右側にナビボタンを並べたいのですが、ヘッダーではなく、RMSの看板登録から登録した看板の上にそのように配置することは可能でしょうか？ざんねんながら、看板の上にコンテンツを表示することはできないため、ヘッダー部分（看板下）に登録いただくようになります。ですが、看板と同様の内容を、ヘッダーに記述することができますので、

もっちり米粉パン工房ピーターパン：創業120年の老舗パン屋。常温保存で日持ちするロングライフ米粉パンが定番

をヘッダーに記述いただき、同様の表示となるか、ご確認ください。問題がなければ、上記コードの上に先日お伝えしております方法にて、メニューを作成いただくことで、設置可能となります。

Answer

伊藤さんご回答ありがとうございます。かなりやりたかったことに近づいてまいりました。助言ありがとうございます。よければ現状ご確認ください。https://www.rakuten.co.jp/SHOP-URL/今のままだとなんだか余白がポロポロあって間延びして見えます。もう少しこの店舗さんくらいキュッと見やすくまとまった感じにしたいです。https://www.rakuten.ne.jp/gold/koubo-panettone/いろいろと希望があるのですが、やれそうなものがあればぜひ教えていただけませんか？１．中央に寄せながらも、左側のロゴと、右側のカテゴリリンクの間に少しだけ余白を入れたい。＜イメージ図＞左　ロゴ画像　　　　文字　文字　文字　文字　文字　右※現状間をあけるため、トップページへの文字の左側に余白をたくさん入れています。２．ロゴ画像と文字の下辺の位置を揃えたい。できれば看板画像の上のライン上に一直線に下を揃えて並べたい。３．右側の文字のところに、例の店舗さんがやられているような小さな検索窓をテーブルの中に入れたい４．右側の文字の上あたりに3,980円以上で～のようなバナーを例の店舗さんのように隙間なく入れることはできますか？５．現状RMSから登録する「看板」と「ナビボタン」は未登録の状態ですが、なんだか本来その２つがある位置に無駄な余白があいています。一番右上のグレーの文字と、ヘッダーの間をもっとつめることはできますか？今回ヘッダーに追加したタグ↓-----------------------

看板	3,980円以上で～
看板	文字	文字	文字	文字	文字

------------------------------

Answer

あともう一つ質問があるのですが、PCのTOPページのヘッダー下の中身の部分が、右にずれてしまいました。
今までは綺麗にサイドバーの横に沿って並んでいました。 ………（省略）………

Answer

ECマスターズの伊藤です。> １．中央に寄せながらも、左側のロゴと、右側のカテゴリリンクの間に少しだけ余白を入れたい。> ＜イメージ図＞> 左　ロゴ画像　　　　文字　文字　文字　文字　文字　右> ※現状間をあけるため、トップページへの文字の左側に余白をたくさん入れています。| 余白のセル(でサイズを指定) | ロゴ・・・| 余白のセル | のように、余白のセルを入れていただくか、tableの横幅を狭めていただき、tableをcenterタグで囲ってください。:

> ２．ロゴ画像と文字の下辺の位置を揃えたい。できれば看板画像の上のライン上に一直線に下を揃えて並べたい。tdに valign="bottom" の指定をお願いします。> ４．右側の文字の上あたりに3,980円以上で～のようなバナーを例の店舗さんのように隙間なく入れることはできますか？tableのセルを結合させることができますので、・ロゴの部分のセルを、上下で結合・3,980円以上で～のセルを左右で結合としていただくことで、実現できます。結合については、下記をご参照ください。https://www.tagindex.com/html_tag/table/td_span.html> ５．現状RMSから登録する「看板」と「ナビボタン」は未登録の状態ですが、なんだか本来その２つがある位置に無駄な余白があいています。> 一番右上のグレーの文字と、ヘッダーの間をもっとつめることはできますか？残念ながら、こちらの余白は詰める事ができません。> あともう一つ質問があるのですが、PCのTOPページのヘッダー下の中身の部分が、右にずれてしまいました。> 今までは綺麗にサイドバーの横に沿って並んでいました。> 直し方がわかりますでしょうか？大変失礼しました、こちらヘッダーに大きな画像を入れることで枠を押し広げているのが原因となります。https://ec-masters.gyazo.com/c4a2989710d4530c2d01583e8d525112そのため、先にお伝えしていた、ヘッダーに大きな画像を入れると、こちらの状態となてしまうため、・一番最初にお伝えした方法に再度トライしていただく・看板でご対応いただく（上部にメニューは出せない）・横幅いっぱいのレイアウトを諦めていただく・現在のレイアウトでご利用いただくの、いずれかでご対応をお願いいたします。

Answer

アドバイスありがとうございます。かなりいい感じになってきました！ファーストビューでまだまだ余白がありもったいない気がしています。上にギュッと寄せたいです。トップページの内容が右にずれてしまうので、看板の横幅を1200まで下げて少し調整しました。１．結合で2段にしてみたのですが、参考店舗さんのデザインのように、上の段のバナーを右隅におきたいです。を入れてみるなどのトライもしたのですが、デザインが崩れてしまいうまくいきませんでした。参考店舗さんのように、バナーと、文字の上下をギュッとくっつけて配置したいです。可能でしょうか？２．参考店舗さんは右上に表示されている店舗紹介文などを削除されているような感じがあります。当社のページも、ヘッダーを上に詰められるのであれば、店舗紹介文の掲示は不要です。消して上の余白をなくすことはできますでしょうか？現在のタグ↓

Answer

伊藤さん長らくのお付き合いどうもありがとうございました。こちらにて、やりかったデザインを作ることができました！本当にありがとうございます。またよろしくお願いいたします。

楽天PC版トップページのレイアウト変更と、看板画像の左右を全画面いっぱいにする方法

カテゴリーから探す