*

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

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

ダンボール

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

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

おすすめトピックス

関連記事

eメール
楽天メルマガうざいと思う人朗報!メルマガ有料化で配信が減るかも

楽天ショップのメールマガジンがいつも大量に来て鬱陶しいと思う人も多いかと思います。 それもその筈、何も意識せず楽天ショップで買い物をしたら標準でメールマガジンが送信される設定になっています。楽天で買い物をする度にメールマ […]

キーボードと紙
要注意、Amazonに出品する商品の商品名は一度決めたら変更できません

Amazon でネットショップを出店している方も多いかと思います。が、Amazon で商品を出品する際、注意点があります。 それは、Amazon に商品登録する際に一度決めた商品名は変更不可能という事です。以前は変更する […]

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

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

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

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

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

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

スマートフォン
楽天ショップも影響有るかも、スマホ対応サイトをGoogle検索順位で優遇化

2015年2月末、Google がスマホ対応サイトをモバイル検索で検索順位を優遇するという発表しました。PC の検索には影響しません。 Google、スマホ対応サイトをモバイル検索結果で優遇するアルゴリズム変更を発表、4 […]

著者について

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

フォローはこちら

       

       
Premiere Elementsで動画の一部を切り抜きトリミングする方法

せっかく動画を撮影したけど、肝心な部分は動画の中央部分だけでま

北海道チーズおかき
チーズの旨味が超濃厚!YOSHIMIの「北海道チーズおかき」

北海道に本社を置き、レストラン事業や製菓事業を行っている YO

無効なURLです。
エックスサーバーへ移転時にデータベースをインポートしたら「無効なURLです。」

高速で安定度の高いと評判のエックスサーバーへサイトの移転を行い

CSSの擬似クラスnth-childは3の倍数以外というような否定条件も可能

CSS において偶数の要素だけ、奇数の要素だけ、何番目の要素だ

北のちーずボー
北海道産チーズのスティックケーキ「北のちーずボー」

新千歳空港のお土産店で販売されていた「北のちーずボー」を買って

→もっと見る