*

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

公開日: : ネットショップ

ダンボール

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

突如放たれるその言葉。全く無茶を言ってくれますねと思いつつも、試行錯誤を始めます。試しに 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" />

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

  • Pocket

おすすめトピックス

関連記事

陳列された商品
【ネットショップ】商品が売れなくなってきた?それは当たり前です。

ネットショップで商品を出品していて、売上がだんだん伸び悩み落ちていく事に悩まれている方もいらっしゃると思います。もし何も施策を打っていないのであれば、それは当たり前です。 何もしなければ大概商品の売上は伸び悩んでいくもの […]

プチプチ
誰も教えてくれない梱包に使うプチプチの切り方

プチプチと言えばきっと誰もが見たことがあるでしょう。手元にあればついプチプチと潰したくなるあれです。通販で購入した物の中に緩衝材として入っている事が多々あると思います。 ネットショップを開いている方や、個人でオークション […]

Sold Out
あなたのショップは大丈夫?誤解を招く文言でお客様を逃しているかもしれません

日本語って難しいな。といつも切に思います。 例えば複数の必要条件があるキャンペーンをショップで打ち出す時、どのようにお客様にわかりやすくお伝えするか。本当に難しい事です。もちろん、長い文章で説明するのであれば簡単です。イ […]

楽天ショップのカテゴリページで売り切れ商品を表示しないリンク方法

楽天ショップで商品の種類ごとにまとめられたカテゴリページというものがあります。楽天で買い物をした事がある人なら一度は目にした事があるでしょう。あるカテゴリに属する商品を一覧で見る事ができるので便利です。 そのカテゴリペー […]

Yahooショッピング及びヤフオクが常時SSL化へ。やるべき対応は?

Yahoo!ショッピングとヤフオクに限らず、Yahoo の全サービスが2017年3月までに常時 SSL 化されます。Yahoo 全体でSSL暗号化通信を行い利用者側にとっても安全でセキュアに Yahoo のサービスを利用 […]

アップロード
楽天R-Cabinetに画像を一括でアップロードする方法

楽天 R-Cabinet の画像を URL から一括でダウンロードする方法については以下の記事で紹介しました。 楽天R-Cabinetの画像をURLから一括でダウンロードする方法 もう一つわかりにくいのは、楽天 R-Ca […]

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

       
本格ネパールカレーの栗山町「earth」はお洒落で入りやすくてナンカレーが美味

北海道の栗山町にある earth(アース)は本格ネパールカレー

ネジを締める時のワッシャー(座金)には何の意味があるのか?

ネジと言えば日常生活で使う家電や生活用品に数え切れない数のネジ

中部国際空港(セントレア)のカプセルホテル「TUBE Sq」に泊まってみた口コミ感想

中部国際空港(セントレア)に2017年4月8日にオープンしたカ

岐阜県垂井町の大人気パン屋「グルマンヴィタル本店」の食パンをレビュー

岐阜県不破郡垂井町にあるパン屋「グルマンヴィタル(GURUMA

谷汲ゆり園
林の中に咲く百合が美しい岐阜県揖斐川町の「谷汲ゆり園」で森林浴をしながら散歩

岐阜県揖斐郡揖斐川町にある谷汲ゆり園は日本のゆり園ベスト5に選

→もっと見る