[戻る]
No.5010

ラジオボタンの色・オプション項目名のコピー・カート内の色 ・配送指定

むにさん  投稿日:2021/01/12(Tue) 18:36
key

?@ラジオボタンの色について

ラジオボタンの選択肢の左横の◯の色に合わせて
選択したら水色になる枠の色を変えたいです。

?Aオプション項目名のコピー

オプション項目名の中の選択肢が
コピーできるのはわかったのですが、
青色部分のオプション項目名自体を
コピーする機能をつけて欲しいです。
16色の選択肢を毎回作るのが手間なので
お願いしたいと思いました。

?Bショッピングカート内の色の変更

(元々の色)→(変更したい色)

【ショッピングカート】
・(青色)→(濃いグレー) 商品名
・(水色)→(薄いグレー) 合計金額の背景
・(紺色)→(黒) 合計金額
・(薄緑)→(濃いグレー) (10%対象\〇〇円)
・(グレー)→(白) 黒枠のレジへ進むを囲む背景

【情報入力】
・(薄い青)→(グレー) お客様情報などの横広のバー

?Cカート内の配送指定

配送が一択なのですが、配送方法の横に【必須】と書いているので選択できないのに、選択しなければならないように表記されてしまいます。

・【必須】なくす方法
・配送指定の項目自体をなくす方法

以上、長文になりましたが教えて頂けると嬉しいです。今まで使ってきたどのECサイトよりも自由度が高く、とても使いやすいのでこれからもお世話になります。よろしくお願いします。

Re: ラジオボタンの色・オプション項目名のコピー・カート内の色 ・配送指定

おたすけマイショップさん  2021/01/13(Wed) 15:43 No.5014
key

お問い合わせについてインラインにて失礼いたします。

>?@ラジオボタンの色について

オーダーメイド機能利用時のラジオボタンを選択時の○内の色変更(中央の水色の点部分の色変更)の
認識にて回答いたします。
※オーダーメイドは有料プラン限定機能です。

専用の機能がございませんため、下記スタイルの追加での対応をお願いいたします。
※【○の色指定】部分にカラーコード等を入れてご利用ください。

<style>
@media (min-width: 1px) {
.label input[type=radio] + .label_icon:after {
background: 【○の色指定】;
}
}
</style>

余白なく色を指定する(ラジオボタン選択時の中央の水色の点部分と周りの〇部分)場合は以下の追加もお願いいたします。
<style>
@media (min-width: 1px) {
.label input[type=radio]:checked + .label_icon, .label input[type=checkbox]:checked + .label_icon {
background-color: 【○の色指定】;
border-color: 【○の色指定】;
}
}
</style>


スタイルの追加方法は下記リンクをご参照ください。

 ページに<style>を追加する
 https://emshelp.easy-myshop.jp/c-item-detail?ic=add-style

[スタイル追加に関するご注意]
 スタイルを適用した内容は視覚的には非表示となりますが、HTMLコード上では表示されていますので
 検索サイトなどでページの情報として取得される可能性がございます。
 標準で提供する機能及び設定ではございませんので今後のバージョンアップにて上記スタイルが正常に適用されない場合がございます。
 上記内容をご了承頂いた上でスタイルの追加を行って下さい。


お問い合わせと回答の認識が異なる場合は、お手数ですが具体例を踏まえ再度お問い合わせください。

>?Aオプション項目名のコピー

オーダーメイド機能のオプション項目については選択肢を「リンク専用商品」として登録することで、
他のオーダーメイド商品でも使用できるオプション項目として使用できます。

設定方法に関しては下記リンクをご参照ください。

 複数のオーダーメイド項目で使用する「リンク商品」の登録
 https://emshelp.easy-myshop.jp/c-item-detail?ic=common-ordermade


>ショッピングカート内の色の変更

専用の変更機能がございませんため、下記スタイルの追加での対応をお願いいたします。
※【カラーコード】欄に色を指定してご利用ください。

■商品名
<style>
.list_item_name{
color:【カラーコード】;
}
</style>

■合計金額の背景
<style>
.grid tfoot tr{
background:【カラーコード】;
}
</style>

■合計金額
<style>
.buy_total_val{
color:【カラーコード】;
}
</style>

■(10%対象\〇〇円)
<style>
.tax_diff_info{
color:【カラーコード】;
}
</style>

■黒枠のレジへ進むを囲む背景
<style>
.login_select .individual_section{
background:【カラーコード】;
}
</style>

■お客様情報などの横広のバー
<style>
.pane_regi .grid_input_body .section_ttl{
background:【カラーコード】;
}
</style>

なお、ショップページデザインの変更は基本的に「design.css」に記載されております。

イージーマイショップにて生成するページには細かくclassを充てておりますので、その他の箇所で
スタイルを変更する場合の各要素のclassの確認はブラウザの機能をご利用ください。

GoogleChromeであれば対象の場所を右クリックして「検証」、InternetExplorerであれば「要素の検査」にてご確認いただけます。


>・【必須】なくす方法
 ・配送指定の項目自体をなくす方法

配送指定を未選択または非表示とする機能はございませんが、開店設定>配送設定の上部「配送方法の選択:」の[変更]より
「自動」を選択いただくことで、購入する商品で共通して利用できる配送方法が自動で決定されます。
※基本送料の表示順が上位のものが優先されます。
※商品に対し配送方法の制限をかけている場合など利用できる配送方法が存在しない場合、注文手続きが行えませんのでご注意ください。

また、配送方法の説明文や項目自体を含め全て非表示にする場合は専用の設定がございませんので
以下のスタイルの追加にてご対応をお願いいたします。

※こちらのスタイルを追加すると(設定されていても)配送時間帯指定等ができなくなることや
 配送方法に関する説明文が非表示となる、適用される配送方法が表示されなくなりますのでお勧めいたしません。
 非表示にする場合は、これらを踏まえご検討ください。

<style>
.regi_flow1 .trans_info_body {
display: none;
}
</style>

スタイルの追加方法は前述のヘルプ内容と同じ手順です。


Re: ラジオボタンの色・オプション項目名のコピー・カート内の色 ・配送指定

むにさん  2021/01/13(Wed) 15:47 No.5015
key

ありがとうございます!

伝え方が悪くて申し訳ございません。
◯の枠だけでなく、ラジオボタンの◯と選択肢を囲う大きな枠の色の変え方、選択された時に変わる全体の色の変え方について知りたいです。


Re: ラジオボタンの色・オプション項目名のコピー・カート内の色 ・配送指定

おたすけマイショップさん  2021/01/13(Wed) 17:52 No.5018
key

恐れ入りますが、先程の案内に一部不備がございました。

先ほど案内の下記スタイルはご希望のオーダーメイドのラジオボタン選択時の中央の水色の点部分の色変更となります。

<style>
@media (min-width: 1px) {
.label input[type=radio] + .label_icon:after {
background: 【○の色指定】;
}
}
</style>

※オーダーメイドのラジオボタン選択時の中央の水色の点部分と周りの〇部分の色を指定する場合は
 以下の追加もお願いいたします。

<style>
@media (min-width: 1px) {
.label input[type=radio]:checked + .label_icon, .label
input[type=checkbox]:checked + .label_icon {
background-color: 【○の色指定】;
border-color: 【○の色指定】;
}
}
</style>

この度は大変失礼いたしました。


続いてその他の部分の色変更について案内いたします。

恐れ入りますが専用の機能がございませんため、下記スタイルの追加での対応をお願いいたします。
※【色指定】部分にカラーコード等を入れてご利用ください。

■オーダーメイド項目のラジオボタン未選択時の○枠の色変更
<style>
.ordermade_radio_child .label input[type=radio] + .label_icon{
border: 1px solid 【色指定】;
}
</style>

■選択肢を囲う大きな枠の色の変え方(未選択時)
※拡張設定>アドイン(機能追加・設定・削除)のオーダーメイド・
 セット商品の[設定]にて「オーダーメイドオプション選択フォーム」
 の「style3」選択時の設定となります。
<style>
.ordermade_area.layout3 .ordermade_option_group .label_value{ border:1px
solid 【色指定】;
}
</style>

■オプション項目選択時の選択肢内の色の変え方(選択時)
※拡張設定>アドイン(機能追加・設定・削除)のオーダーメイド・
 セット商品の[設定]にて「オーダーメイドオプション選択フォーム」
 の「style3」選択時の設定となります。
<style>
.ordermade_area.layout3 .ordermade_option_group .label input:checked
~ .label_value {
background:【色指定】;
}
</style>

なお、オプション項目選択時の選択枠色は下記スタイルの追加で可能です。
<style>
.ordermade_area.layout3 .ordermade_option_group .label input:checked
~ .label_value {
border-color:【色指定】;
box-shadow: 0 0 0 1px 【色指定】 inset;
}
</style>

スタイルの追加方法は下記リンクをご参照ください。

 ページに<style>を追加する
 https://emshelp.easy-myshop.jp/c-item-detail?ic=add-style

[スタイル追加に関するご注意]
 スタイルを適用した内容は視覚的には非表示となりますが、
 HTMLコード上では表示されていますので検索サイトなどでページの
 情報として取得される可能性がございます。
 標準で提供する機能及び設定ではございませんので今後のバージョン
 アップにて上記スタイルが正常に適用されない場合がございます。
 上記内容をご了承頂いた上でスタイルの追加を行って下さい。


Re: ラジオボタンの色・オプション項目名のコピー・カート内の色 ・配送指定

むにさん  2021/01/14(Thu) 20:37 No.5022
key


GoogleChromeの検証を見てみて試行錯誤したのですが、あまり分からなかったので再度追加で質問させて頂きます。

ーーーーーーーーーーー

ショッピングカートの

・「合計金額」の文字

カートの「3ご注文内容確認」の商品の
下に表示される

・「送料」
・具体的な送料
・「手数料(コンビニ振り込みなど)」
・具体的な手数料
・「合計」

の文字の色の変え方を教えて欲しいです
現在は紺色で表示されています。

ーーーーーーーーーーー

スマホに表示される右下の◯の中に↑がある(押すとページのトップに飛ぶ)ボタンのサイズを変えたいです。

ーーーーーーーーーーー

スマホのタブの上部、ページ名の左横にある正方形の青背景に白いカートの画像部分を変えることはできますか?

【ショップロゴ】は全て登録済みです。

ーーーーーーーーーーー

よろしくお願い致します。


Re: ラジオボタンの色・オプション項目名のコピー・カート内の色 ・配送指定

おたすけマイショップさん  2021/01/15(Fri) 16:15 No.5025
key

お問い合わせについてインラインにて失礼いたします。

色を変更する専用の設定はございませんので、スタイルの追加での対応をお願いいたします。

■ショッピングカートの「商品合計」の文字色
<style>
.cart_info_total_tr .buy_item_totaltext_val,
.cart_info_total_tr .regi_totaltext,
.cart_info_item_total_tr .buy_item_totaltext_val,
.cart_info_item_total_tr .regi1_totaltext,
.cart_info_item_total_tr .regi2_totaltext{
color:【カラーコード】;
}
</style>


カートボタン押下後の「ご注文内容確認」ページは下記スタイルとなります。

■「送料」項目名
<style>
.cart_info_postage_tr .regi2_totaltext {
color:【カラーコード】;
}
</style>

■送料額
<style>
.cart_info_postage_tr .regi2_totalvalue {
color:【カラーコード】;
}
</style>

■手数料項目名
<style>
.cart_info_codfee_tr .regi2_totaltext {
color:【カラーコード】;
}
</style>

■手数料額
<style>
.cart_info_codfee_tr .regi2_totalvalue {
color:【カラーコード】;
}
</style>

■「合計」項目
<style>
.cart_info_total_tr .regi2_totaltext {
color:【カラーコード】;
}
</style>


>スマホに表示される右下の◯の中に↑がある(押すとページのトップに飛ぶ)ボタンのサイズを変えたいです。

対象のclassは以下となります。
 page_top_link
 page_top_link:before
サイズの指定は様々な調整が必要となりますのでご注意ください。
以下に1/2のサイズにするサンプルを案内いたします。
※色を変更する場合は各色コード(サンプル内の#555や#fff)を入れてご指定ください。

<style>
.page_top_link {
width: 40px;
height: 40px;
right: 6px;
background: #555;
}

.page_top_link:before {
width: 11px;
height: 11px;
margin: 0 auto;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
}
</style>

ボタンクリック後に1/2のサイズにするサンプルスタイルは下記となります。
<style>
.page_top_link.page_top_link_show:hover {
width: 45px;
height: 45px;
}
</style>

スタイルの追加方法は下記リンクをご参照ください。
 ページに<style>を追加する
 https://emshelp.easy-myshop.jp/c-item-detail?ic=add-style

[スタイル追加に関するご注意]
 スタイルを適用した内容は視覚的には非表示となりますが、HTMLコード上では表示されていますので
 検索サイトなどでページの情報として取得される可能性がございます。
 標準で提供する機能及び設定ではございませんので今後のバージョンアップにて上記スタイルが正常に適用されない場合がございます。
 上記内容をご了承頂いた上でスタイルの追加を行って下さい。


>スマホのタブの上部、ページ名の左横にある正方形の青背景に白いカートの画像部分を変えることはできますか?

こちらはファビコン画像に登録されている画像が反映されます。
※開店設定>ショップ設定の「ショップ基本情報」内、「ショップロゴ画像」の[設定]クリック後の、「ファビコン(favicon.ico)
 (お気に入りアイコン)」欄の画像。
※スマートフォン版とパソコン版で設定は共通です。

上記変更直後にショップページ側で反映が確認できない場合はブラウザ側の機能であるキャッシュが影響している場合がございます。

 キャッシュ
 2回目以降の表示を早くするために端末内に一時的に保存されている情報

その場合は以下の方法でページを最新の情報にしてご確認ください。

・ページを更新する
⇒ブラウザの更新をしてください。

・キャッシュをクリアしてページを更新する
⇒キャッシュの削除を行いページ更新を行ってください。

・ブラウザを再起動する

・パソコンなど別の端末で確認する

・別のブラウザを立ち上げて確認
⇒別の種類のブラウザ(Chromeを利用されている場合はInternetExplorer等を利用)でご確認ください。



返信
*おなまえ
*email (回答通知用。公開されません)
*タイトル
*内容
ショップURL
*key (修正の際に使用します)

無料で本格的なネットショップ開業できるのは『イージーマイショップ』