ネットショップ

楽天の商品ページの納期情報の文字色やサイズを変更する方法

投稿日:

ダンボール

「楽天商品ページにある納期情報の文字色変えれる?」

突如放たれるその言葉。全く無茶を言ってくれますねと思いつつも、試行錯誤を始めます。試しに google で検索しても特に情報はありません。しかし、google の検索予測ワードに「楽天 納期情報 CSS」が出るという事は、これを解決したら結構求めてる人がいるだろうなと思いました。

楽天の商品ページの納期情報とは、下記画像の赤線部の事です。何日で出荷しますよ等文言が入ります。しかしこの部分、楽天 RMS で文言は変えられますが文字色やサイズは変えられません。

楽天納期情報

普通の人はここで「できませんでした。」と諦めちゃうと思います。しかし、RMS で出来ないからって諦めるにはまだ早いですよ。楽天商品ページのカスタマイズは CSS という手段がまだ残されています。

html ソースをチェックする

Google Chrome なら納期情報の部分で右クリックをしてメニューから「要素を検証」を選択します。するとその部分の html ソースがわかります。それ以外のブラウザなら右クリックして「ソースを表示」を選択して該当部分を頑張って探してください。

ソースを見ると納期情報の部分は以下のようになっています。(ショップによって違うかもしれません。)

<font size="3" color="#FF0000">1-3営業日で発送予定※メーカー欠品時除く</font>

通常、CSS ではクラスや ID が設定されていると該当部分にスタイルを適用できます。しかし、これは…。クラスも ID も設定されていません。「こりゃぁ無理か…。」とちょっと CSS の知識がある人ならここで諦めちゃうと思います。

まだまだ手段は残されている!

早速ですが、解決した CSS を御覧ください。

font[size="3"]{
   color:#000000;
   font-size:80%;
}

ソースに着目するとフォントタグにサイズが3と指定されています。ならfont[size="3"]でフォントタグでサイズが3に指定されているものにスタイルを適用できます。中のプロパティは適当に書いたものですが、文字色やフォントサイズも CSS で自由に変える事ができます。

ただ商品ページでフォントタグを使ってサイズを3指定しているとそこまで影響が出るかもしれません。フォントタグは非推奨なので使っている人は少ないと思いますが、私が実験してみた所影響は出ませんでした。

CSSを置く場所

CSS ファイルは外部で作って GOLD スペースに置きましょう。あとは楽天 RMS のデザイン設定の「ヘッダー・フッター・レフトナビ」でヘッダー部分に CSS を読み込ませましょう。

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

楽天商品ページカスタマイズ

-ネットショップ

Copyright© ウェブミスト(Webmist) , 2020 AllRights Reserved Powered by STINGER.