*

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

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

ダンボール

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

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

おすすめトピックス

関連記事

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

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

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

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

画像上書きの反映は遅いが一瞬で反映させる代替策はある【楽天ショップ】

楽天ショップを運営している人なら一度は頭を悩まされた事はあるでしょう。楽天の商品画像、すなわち楽天 RMS にアップロードした画像・楽天 GOLD スペースにアップロードした画像を上書きして差し替える場合、画像の反映処理 […]

ランキング1位獲得
要注意!楽天商品ページへのランクイン実績表示についてルールを制定

楽天で買い物をしていると商品ページに「この商品は楽天ランキングで1位獲得!」というようなアピールをよく見かけると思います。売れてるアピールをする為に、楽天ランキングのランクイン実績を画像なりにまとめて商品ページにドンッと […]

ポスト
どう違うの?ゆうメールとゆうパケットの違い

荷物を送るための郵便局のサービスも多種多様なものがあり、種類が多くてどれがどう違うのかもわからなくなる事もあると思います。今回はゆうメールとゆうパケットの違いについてまとめたいと思います。 目次1 ゆうメールとは1.1 […]

iphone
Yahooショッピングのトリプルページを手っ取り早くスマホ対応に

Yahoo!ショッピングにショップを出店している方で、jquery や CSS が自由に使えてデザインができる「トリプル」を契約していらっしゃる方も多いと思います。しかし、トリプルで普通に PC 用のトップページを作った […]

著者について

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

フォローはこちら

       

       
どうぶつの森ポケットキャンプで機種変更でデータの引き継ぎや他の端末でプレイできるか?

2017年11月22日に満を持して配信開始された「どうぶつの森

日常のイイ物を味わう滋賀県東近江市の「いよもんカフェ」でランチ

滋賀県東近江市にあるいよもんカフェへ行ってきました。いよもんっ

霊水「善水元水」も湧き出る滋賀県湖南市の善水寺で紅葉散策

滋賀県湖南市の湖南三山の一つである善水寺へ行ってきました。お寺

紅葉の美しい参道を行く、滋賀県湖南市の湖南三山「長寿寺」で紅葉散策

滋賀県の湖南三山の一つに数えられる長寿寺へ行ってきました。紅葉

cssとjqueryでサイトのローディング画面を簡単に実現する作り方【プラグインなし】

現在ロード中を知らせるローディング画面(Now Loading

→もっと見る