楽天画像とsyopify、amazon画像について（その２）

Question

いつもお世話になっております。

・2022/04/21 22:01「楽天画像とsyopify、amazon画像について」でご相談させていただいた際の確認です。一番最後の部分

HTMLについては、
デザインレシピ
https://club.ec-masters.net/index.php?design_top
でもご案内しておりますので、ぜひご活用くださいませ。

といただいております。そこで今、「カテゴリページのリンクの見やすくする方法」を試してみようと思ったのですが、CSSをダウンロードして楽天GOLDにアップするとあります。エンパワーメントプランですと不可でしょうか？

・RMSでhtmlを使って細々と商品ページ作りを行っています。画像はamazonとshopifyで共用できるように正方形に統一しています。最近、SKUプロジェクトでいろいろ変わって来ている事もあり、やり方が大丈夫か確認したいです。

例えばこの商品について、
https://item.rakuten.co.jp/tsukutsuku/c101/

「PC用商品説明文」と「スマートフォン用商品説明文」に全く同じhtmlを入れてメンテナンスを楽にして、「PC用販売説明文」には何も入れず、スマホではフリックする商品画像を、パソコン画面では大きめに設定しました。どこで設定するのか忘れてしまいましたが…

昨日のライブで、スマホ対策に画像をズラズラ並べている、とおっしゃっていました。なるほどフリックしていただくよりもズラズラ並べる方が見やすそうです。となると、パソコン画面には「PC用販売説明文」に、スマホ画面では「スマートフォン用商品説明文」に画像をズラズラ並べると良いのだな、と思いました。

この時の画像は、正方形のまんまの同じ画像を並べるのはやはり無理があるでしょうか。なんだかPC商品ページのカスタマイズが終了とかもあるので、やはり横長のズラズラ並べるための画像を準備した方が良いのか、それとも縦長画像が良いのか、その画像の横幅はやはり楽天の場合は700ピクセルが良いのか、わからなくなりました。

現在の商品ページは下部の、おすすめ商品の部分が右にずれておりますが、ずれの原因が何なのか、動画が入っているからなのか、PC商品ページの左下の画像は２００ピクセルだかに直した方がいいのか、教えていただけますでしょうか。

Answer

ECマスターズの北原です。

>「カテゴリページのリンクの見やすくする方法」を試してみようと思ったのですが、CSSをダウンロードして楽天GOLDにアップするとあります。エンパワーメントプランですと不可でしょうか？

エンパワーメントプランでは楽天GOLDを
使用することができません。
しかし、ダウンロードしたCSSファイルをGOLDへ
アップロードする方法以外にも、
タグを使ってデザインを変えることが可能です。

下記のタグを、ヘッダー・フッター・レフトナビの
いずれかに記述することでご利用いただけます。


/* ▼▼▼ ボタンの背景色・文字色を変更したい場合はここを修正してください ▼▼▼ */
a.subcategory_list,
.block_introduction a{
	background: #f5f5f5 !important; /* 背景色 */
	color: #333 !important; /* 文字の色 */
}

/* ▼▼▼ 以下編集不要 ▼▼▼ */
span.subcategory_list {
	display: none !important;
}
  
  a.subcategory_list {
	padding: 12px 6px !important;
	margin: 0 0 5px 0 !important;
	display: block !important;
	font-size: 14px !important;
	text-align: center !important;
	text-decoration: none !important;
  }
  
  a.subcategory_list img {
	vertical-align: middle;
  }
  
  .block_introduction {
	padding: 16px;
  }
  
  .block_introduction li {
	width: auto;
	margin: 10px 10px 10px 0;
	padding: 0;
  }
  
  .block_introduction a {
	padding: 8px 16px;
	text-decoration: none;
  }


>この時の画像は、正方形のまんまの同じ画像を並べるのはやはり無理があるでしょうか。

正方形画像のままでも問題ございません。
それぞれの商品説明文に下記のような、
タグを利用して表示いただければと思います。



width（横幅）の指定ですがSPは基本的に『100%』を
指定していただければ問題ないかと存じます。

PCの場合は100%ですと大きすぎる場合もございますので、
『300px』など適時変更いただければと思います。

＞現在の商品ページは下部の、おすすめ商品の部分が右にずれておりますが、ずれの原因が何なのか、動画が入っているからなのか、PC商品ページの左下の画像は２００ピクセルだかに直した方がいいのか、教えていただけますでしょうか。

こちらは目玉商品のテンプレートを
使用しているかと存じます。
目玉商品テンプレートの編集画面にて
画像サイズの横幅、商品名の横幅を
それぞれ200などに調整いただくことで
修正できますので、お試しください。

https://ec-masters.gyazo.com/267755a971dc2a7c40152e28546e0025

なお、目玉商品のテンプレートは
カテゴリページにも表示されているかと思いますので、
それぞれ確認しながら調整いただければと思います。