![見出し画像](https://assets.st-note.com/production/uploads/images/135826984/rectangle_large_type_2_31d2078017de0c91950b65b1549656a8.png?width=800)
設定で変えられない!?CSSならできるんです!
ネットショップ支援室カスタマーサクセスチームです。
サイト作成中「どうしても変えたいのに設定項目がない…!」「せっかく最高のサイトを作ったのにここだけが気に入らない!!!」そんな風に思ったことはありませんか?
今日は、楽楽リピート・楽楽B2Bの設定では変更不可でもCSSならできる裏技をご紹介します!
【CSSとは?】
文字色や大きさ、コンテンツの配置など見た目(スタイル)に関する定義を行う言語です。
ページを構成する各要素に「class」や「id」をふりグルーピングすることでスタイルを適用させる箇所を特定したり、まとめてスタイルを適用したりすることが可能です。
楽楽リピート・楽楽B2Bで用意されているページの各要素にもclassやidが定義されています。よくあるご質問の中からピックアップしてclass名をご紹介します!
1)MYページの購入履歴一覧にお届け日を表示したくない
![](https://assets.st-note.com/img/1711687855436-cJdtgWobpb.png?width=800)
お届け日は"raku2_mypage_order_list_shipping_date_label"のclassが定義されています。このclassに対し非表示の記述を行うと…
![](https://assets.st-note.com/img/1711689751409-Pz2VqYpaOn.png?width=800)
お届け日の表示が消えました!
/* サンプル(設定状況に合わせて記述はご変更ください) */
.raku2_mypage_order_list_shipping_date_label{
display:none;
}
2)商品ページに表示価格を表示したい
![](https://assets.st-note.com/img/1711690053871-Zagr1Zq83F.png?width=800)
商品ページが新UIの場合、デフォルトでは通常価格の表示をしていません。
通常価格は”raku2_normal_price normal_price"のclassが定義されています。このclassに対し表示の記述を行うと…
![](https://assets.st-note.com/img/1711692007644-8zvgUEjIEX.png?width=800)
通常価格が表示されました!
/* サンプル(設定状況に合わせて記述はご変更ください) */
div.raku2_normal_price.normal_price{
display:block !important;
}
3)商品詳細ページの「送料無料」の文言を変更したい
![](https://assets.st-note.com/img/1711692611407-qO5ZstiSEF.png?width=800)
送料無料は"raku2_deliv_fee"のclassが定義されています。このclassに対し表示内容の変更の記述を行うと…
![](https://assets.st-note.com/img/1711692639447-1YG27IJvfN.png?width=800)
「送料無料」が「送料当社負担」に変わりました!
/* サンプル(設定状況に合わせて記述はご変更ください) */
.raku2_deliv_fee {
font-size:0;
}
.raku2_deliv_fee:before {
font-size:12px;
content:'送料当社負担';
}
いずれも、デザインPC/SP>スタイルシート設定に記述いただくことで実現可能です。
少しの工夫で自社オリジナルのサイトに大変身!
ぜひお試しください!
※ご紹介している内容は一部「楽楽リピート」のみに該当するものがございます。
この記事が気に入ったらサポートをしてみませんか?