簡単!もしもの「らくぺた」の価格文字(数字)をカスタマイズしよう

らくぺたカスタマイズTOP

「らくぺた」はショップのHTMLに商品情報タグを貼り付けるだけで、商品価格や出荷目安が自動的に表示できる機能なので、もしもドロップシッピングでのショップ作りでは、いつも利用しています。

貼り付けるだけの簡単な作業ですが、商品情報タグをコピーして、表示したいところにそのまま貼り付けても、文字の大きさや色などはなにも変化がないので、目立たせるようにカスタマイズしてみよう!

例えば、価格の文字を目立たせるのに色をつけて大きくして太字にしてみよう。

Sponsored Links

「らくぺた」の「価格」表示タグをカスタマイズしよう

【サンプル例】

サンプル価格

 

 

もしもドロップシッピング「らくぺた」の「価格」タグをそのままコピーしても数字だけです。

商品タグ

 

 

通常の「価格」表示タグは、税込みの場合

<span class=”msm-price msm-aid-1290883″>価格</span>

 

税抜きの場合

<span class=”msm-tax_excluded_price msm-aid-1290883″>価格</span>

ですね。

 

「らくぺた」のよくある質問の中に、例として価格文字のカスタマイズ方法が書いてあります。

価格の文字の色を赤い太字にする場合、CSS(スタイルシート)を使って、価格表示タグに追加してありますね。

<span class=”msm-price msm-aid-1290884″ style=”color: red; font-weight: bold;”>価格</span>style=”color: red; font-weight: bold;”のところが、文字の色が赤で太字ってことを指定してあります。

これでもいいんですが、毎回価格表示タグに追加するのが面倒なので、今回は外部CSS(スタイルシート)を使ってる場合、CSS(スタイルシート)に追記するだけで簡単に、「価格」表示タグをカスタマイズできちゃいます。

 

 

「らくぺた」の税抜き価格表示の数字を大きくして赤字にして太くしてみよう

今回は、税抜き価格の表示に「¥」を使い、数字を大きくして赤字にして太字にします。もしもドロップシッピングの税抜価格のclass名はmsm-tax_excluded_priceなので、CSS(スタイルシート)に下記を追加します。

CSSのcontent:に直接日本語を入れると文字化けしてしまう場合があります。

文字化けの原因は、

・CSSを外部ファイル定義している場合に起こる

・CSSファイルの文字コードが Shift_JIS でない (UTF-8 等)

 

なので、日本語を使う時は工夫が必要です。具体的には、16進数に置き換える必要があります。文字化けするようなら、「¥FFE5」と書き替えましょう。

Sponsored Links

「らくぺた」の税込価格表示の数字の前後に()をつけて「税込」と表示しよう

次に、税込価格の表示に「¥」を使い、文字の大きさや太さはそのままで、前後に()カッコをつけてみよう。

 

CSSに追加記述しよう

もしもドロップシッピングの税込価格表示のclass名はmsm-priceなので、税抜価格同様、CSS(スタイルシート)に下記を追加します。

税抜価格の時と同様、content:の文字は直接日本語を入れると文字化けしてしまう場合があります。

文字化けした場合は、

・”(税込¥”=¥FF08¥7A0E¥8FBC¥FFE5に変更。

・”)”=¥FF09に変更してください。

 

【変更後】

あとは、CSS(スタイルシート)を保存して、ショップを確認してみてください。

 

 

おわりに

※:beforeと:afterがIE7以下が未対応なので注意してくださいね。

お疲れ様でした。

Sponsored Links

SNSでもご購読できます。

コメントを残す

*

CAPTCHA