もしもの「らくぺた」の価格文字(数字)を簡単にカスタマイズしよう - 初心者でもできる画像の編集+加工

ブログURL変更のお知らせ

いつも「初心者でもできる画像の編集+加工」をご覧いただきありがとうございます。

このたび、ブログURLを変更しましたのでお知らせいたします。新しいURLは以下のとおりです。

新URL:https://gazocustomize.xyz/

旧URLにアクセスしても新しいURLに転送されるようになっています。

今後も「初心者でもできる画像の編集+加工」をどうぞよろしくお願いします。

GIMP編集
無料画像編集ソフトGIMP2.8で画像の編集+加工の記事一覧はこちら

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

20161125.jpg

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

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

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


【サンプル例】
20161125-2.jpg

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

通常の「価格」表示タグは、
税込みの場合、
<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(スタイルシート)に下記を追加します。
.msm-tax_excluded_price{
font-size:50px;
font-weight: bold;
color:#FF0000;
}

.msm-tax_excluded_price:before {
content:"¥";
font-weight: bold;
}

CSSのcontent:に直接日本語を入れると文字化けしてしまう場合があります。
文字化けの原因は、
・CSSを外部ファイル定義している場合に起こる
・CSSファイルの文字コードが Shift_JIS でない (UTF-8 等)

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

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


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

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

.msm-price:after {
content:")";
}

税抜価格の時と同様、content:の文字は直接日本語を入れると文字化けしてしまう場合があります。
文字化けした場合は、
・"(税込¥"=\FF08\7A0E\8FBC\FFE5に変更。
・")"=\FF09に変更してください。
【変更後】
.msm-price:before {
content:"¥FF08¥7A0E¥8FBC¥FFE5";
}

.msm-price:after {
content:"¥FF09";
}

あとは、CSS(スタイルシート)を保存して、ショップを確認してみてください。
※:beforeと:afterがIE7以下が未対応なので注意してくださいね。
お疲れ様でした。


Comment
非公開コメント

Track Back

http://gazocustomize.blog.fc2.com/tb.php/125-6620333e

スプレッドで比較

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。