商品詳細ページのレイアウトの調整をしたいのですが、方法を教えてください。
1.メイン画像とサムネイルの左端を揃える
←現在、どちらも左端の設定にしているのですが、ずれています。メイン画像のマージンが多い?
2.商品名のフォントを少し小さくしたい
3.商品価格のフォントを少し小さくしたい
4.種類のプルダウンの下に、選んだものが「種類 ◯◯」と出ますが、これを削除したい
(選んだものがプルダウン上に残っているのでわかるため)
5.「この商品について問い合わせる」をもう少し上にあげたい
(全体的に上ツメになっているので、このスペースの各項目のマージンを調整したいです)
6.「種類」を設定すると、数量(プルダウン)と「カートに入れるボタン」が横に並んでしまい、カートボタンが切れます。
この修正方法を教えてください。
以上です。
こまかいカスタマイズになると思うのですが、どこにこの設定があるのかわからなかったので、
よろしくお願いいたします。
お問い合わせいただきました内容のほとんどはご不便をおかけしますが専用の設定がございません。
内容によっては案内するスタイルを追加したご対応をお願いいたします。
> 1.メイン画像とサムネイルの左端を揃える
> ←現在、どちらも左端の設定にしているのですが、ずれています。メイン画像
> のマージンが多い?
ご認識の通り、メイン画像には左右余白30pxがございます。
こちらを不要とする場合は以下のスタイルを追加してください。
<style>
.item_detail .item_image_block {
padding: 0;
}
</style>
スタイルは以下の方法で追加してください。
1. 店長ナビトップ > デザイン設定 > [レイアウト]タブ でページレイアウト管理を表示
2. スクリーンの設定ボタン(ギアアイコン)をクリック
3. [<head>追加]内に内容を追記して「保存」をクリック
[スタイル追加に関するご注意]
標準で提供する機能及び設定ではございませんので今後のバージョン
アップにて上記スタイルが正常に適用されない場合がございます。
上記内容をご了承頂いた上でスタイルの追加を行ってください。
> 2.商品名のフォントを少し小さくしたい
以下のスタイルの数値(19px)を変更して追加してください。
<style>
.item_detail .item_name {
font-size: 19px;
}
</style>
スタイルの追加方法は前述と同様です。
> 3.商品価格のフォントを少し小さくしたい
以下のスタイルの数値(28px)を変更して追加してください。
<style>
.item_detail .normal_price_val.item_price_val {
font-size: 28px;
}
</style>
スタイルの追加方法は前述と同様です。
> 4.種類のプルダウンの下に、選んだものが「種類 ◯◯」と出ますが、これを削
> 除したい
> (選んだものがプルダウン上に残っているのでわかるため)
以下のスタイルを追加してください。
<style>
.item_detail .item_name_full {
display: none;
}
</style>
スタイルの追加方法は前述と同様です。
> 5.「この商品について問い合わせる」をもう少し上にあげたい
> (全体的に上ツメになっているので、このスペースの各項目のマージンを調整した
> いです)
以下のスタイルを追加してください。
<style>
.ordermade_area.inline{
margin: 2ex 0;
padding: 0;
}
.item_law_list > li {
margin: 0 0 10px 20px;
padding: 0;
}
.item_detail .item_small_info_block {
overflow: visible;
}
.item_contact {
margin: 0;
}
</style>
その後、デザイン設定(店長ナビ>拡張設定)を開き適用中テンプレートの[ ボタン画像]リンク>[カートへ入れるボタン]の[編集]ボタンを押して表示される css内の以下の部分で位置を調整してください。
.cart_button.in {
margin: 30px 0 30px; ←最後の「30px」を調整してください。
}
> 6.「種類」を設定すると、数量(プルダウン)と「カートに入れるボタン」が横
> に並んでしまい、カートボタンが切れます。
> この修正方法を教えてください。
システム側にて指定するCSSにて一部不要なスタイルがあり、その影響でボタンが切れていました。
先程修正いたしましたので現在は正常に表示されます。
ページを更新してご確認くださいますようお願いいたします。
案内は以上です。