項目選択肢のカスタマイズ　スマホ

Question

いつもお世話になっております。


　項目選択肢のカスタマイズについて、過去質問にありました下記をPCのヘッダーに設定いたしましたが、
項目選択肢の回答部分「了承しました」の文字の大きさを変えることが出来ませんでした。


申し訳ございませんが、プルダウンの部分の文字の大きさを変える方法をお教え願います。

また、これはPCのみの設定になりますでしょうか。

スマホの項目選択肢をカスタマイズすることは可能なのでしょうか？

他店でPC画面をカスタマイズしていてもスマホを見ると何もされていないようなのですが、
出来ないということでしょうか。

よろしくお願いいたします。


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
 以下のタグを、ヘッダー（またはフッター、レフトナビ、共通説明文（大））にご記載ください。

=====これより下の行から=================
 
 /* 項目選択肢、名前部分の背景色と文字色、大きさを変更 */
div#rakutenLimitedId_aroundCart table tr td span.choice {
 display: block;
 font-size: 16px; /* 文字の大きさ */
font-weight: bold; /* 文字を太字にする */
color: #fff; /* 文字色 */
background-color: #a80404; /* 背景色 */
text-indent: 5px; /* 行頭に入れるスペースの幅 */
width: 300px; /* 全体（背景色が適用される部分）の幅 */
margin: 15px 0 0 0; /* 周りの要素との間隔（上・右・下・左方向） */
padding: 4px 0; /* 内側の余白の幅（上下方向・左右方向） */
 }
 
 =====これより上の行まで=================

それぞれの行に含まれる、数字や色の指定を変更することで、
デザインを変更することができます。

Answer

ECマスターズの田中です。

＞プルダウンの部分の文字の大きさを変える方法をお教え願います。
下記styleタグを、
ヘッダー・フッター・レフトナビ、もしくは共通説明文（大）に入れて
ご利用ください。

===== この下の行から ================

/* 項目選択肢、プルダウンの文字の大きさ、横幅を変更 */
div#rakutenLimitedId_aroundCart table tr td select {
font-size: 16px !important; /* 文字の大きさ */
font-weight: bold !important; /* 文字を太字にする */
width: 300px; /* 横幅 */
}

===== この上の行まで ================
※font-size, font-weightは、他の箇所で作成されている規則を上書きするために、
「!important」の記述が必要となります。

属性の内容を変更したり、属性を追加することで
さらにカスタマイズが可能です。
下記ページをご参照の上、属性を追加・編集してください。
http://www.htmq.com/style/

なお、macOSなど、
一部の環境でスタイルシートを適用するには、
事前に見た目のリセットが必要です。
詳しくは、下記ページをご参照ください。
https://edge.sincar.jp/web/selectbox-appearance-customize/


＞また、これはPCのみの設定になりますでしょうか。

はい、PCのみの設定なので、
スマートフォン用ページでカスタマイズするには、
別途設定が必要となります。

※
楽天RMSの、禁止タグを入力できるバグを利用した方法ですので、
今後、RMSの改修により、使用できなくなる可能性があります。

商品ページ共通説明文を利用して、
外部スタイルシートを読みこませることで
カスタマイズできます。

外部スタイルシートファイルは、
中身はテキストファイルなので、
メモ帳で作成して、ファイル名末尾に「.css」をつけて
保存していただくことで作ることができます。

項目選択肢のプルダウンの見た目を変える場合は、
下記の内容で外部スタイルシートファイルを作成してください。
===== この下の行から ================
body #itemCart select.itemChoiceSelect {
font-size: 20pt;
}
===== この上の行まで ================
{ と } の中に属性を加えていくことで、
さらにカスタマイズが可能です。

作成できましたら、楽天GOLDにアップロードしていただき、
商品ページ共通説明文に
下記のHTMLタグを貼り付けて読み込ませる、という流れになります。
===== この下の行から ============

===== この上の行まで ============
※外部スタイルシートファイルのURLは、実際のURLにご変更ください。

Answer

田中様

いつもお世話になっております。

詳しい説明ありがとうございます。

PCは出来ました。
スマホの方も早速試してみます。
ありがとうございました。

Answer

田中様

　お世話になっております。

スマホの方もやってみたのですが、変わりませんでした。

手順としては
下記をmeryでkoumokusentakushi_sumaho.cssの名前で保存し、

body #itemCart select.itemChoiceSelect {color: #000000;
 background-color: #99cc00
 font-size: 20pt;
 }




libralyにup

カテゴリページ共通説明文に
下記のHTMLタグを貼り付け



したのですが、何か違うでしょうか？


お手数をおかけいたしますがよろしくお願い申し上げます。

Answer

ECマスターズの田中です。

background-color: #99cc00

の末尾に ; が不足しておりますので、
追記して再度アップロードしていただきますようお願いします。

Answer

田中様

お世話になっております。

ありがとうございます！

一点確認なのですが、

>カテゴリページ共通説明文に
>下記のHTMLタグを貼り付けて読み込ませる

→「商品ページ共通説明文」ではないのでしょうか？

カテゴリー共通説明文では何も変わらなかったのですが、
商品ページ共通説明文に貼り付けたら変わったのですが・・・

お手数をおかけいたしますがよろしくご確認願います。

Answer

ECマスターズの田中です。

＞>カテゴリページ共通説明文に
＞>下記のHTMLタグを貼り付けて読み込ませる
＞
＞→「商品ページ共通説明文」ではないのでしょうか？

大変失礼いたしました、
商品ページ共通説明文が正しいです。
原文も修正を行わせていただきます。
ご指摘いただきましてありがとうございました。

Answer

田中様

　いえいえ、いつもありがとうございます。

なるべく自分で解決するようにしたいのですが、お手数をおかけして申し訳ありません。

ありがとうございました。

項目選択肢のカスタマイズ スマホ

項目選択肢のカスタマイズ　スマホ