設定で変えられない！？CSSならできるんです！

ネットショップ支援室カスタマーサクセスチームです。

サイト作成中「どうしても変えたいのに設定項目がない…！」「せっかく最高のサイトを作ったのにここだけが気に入らない！！！」そんな風に思ったことはありませんか？
今日は、楽楽リピート・楽楽B2Bの設定では変更不可でもCSSならできる裏技をご紹介します！

【CSSとは？】
文字色や大きさ、コンテンツの配置など見た目（スタイル）に関する定義を行う言語です。
ページを構成する各要素に「class」や「id」をふりグルーピングすることでスタイルを適用させる箇所を特定したり、まとめてスタイルを適用したりすることが可能です。

楽楽リピート・楽楽B2Bで用意されているページの各要素にもclassやidが定義されています。よくあるご質問の中からピックアップしてclass名をご紹介します！

1）MYページの購入履歴一覧にお届け日を表示したくない

before

お届け日は"raku2_mypage_order_list_shipping_date_label"のclassが定義されています。このclassに対し非表示の記述を行うと…

after

お届け日の表示が消えました！

/*　サンプル（設定状況に合わせて記述はご変更ください） */
.raku2_mypage_order_list_shipping_date_label{
	display:none;
}

2）商品ページに表示価格を表示したい

before

商品ページが新UIの場合、デフォルトでは通常価格の表示をしていません。
通常価格は”raku2_normal_price normal_price"のclassが定義されています。このclassに対し表示の記述を行うと…

after

通常価格が表示されました！

/*　サンプル（設定状況に合わせて記述はご変更ください） */
div.raku2_normal_price.normal_price{
display:block !important;
}

3）商品詳細ページの「送料無料」の文言を変更したい

before （送料無料）

送料無料は"raku2_deliv_fee"のclassが定義されています。このclassに対し表示内容の変更の記述を行うと…

after（送料当社負担）

「送料無料」が「送料当社負担」に変わりました！

/*　サンプル（設定状況に合わせて記述はご変更ください） */
.raku2_deliv_fee {
font-size:0;
}
.raku2_deliv_fee:before {
font-size:12px;
content:'送料当社負担';
}

いずれも、デザインPC/SP＞スタイルシート設定に記述いただくことで実現可能です。

少しの工夫で自社オリジナルのサイトに大変身！
ぜひお試しください！

※ご紹介している内容は一部「楽楽リピート」のみに該当するものがございます。