goldのファイルに記述したcssをhtmlファイルに読み込む

Question

お世話になります。
PC用販売説明文内に、styleタグにcssを書き込んでいました。
以前に業者にお願いした時に作成していただいたgoldのcssファイルに入れて読み込んでみましたが、
うまく表示されません。
gold/*******/css/ks2-01.cssのです。
表示させたいページは、
https://item.rakuten.co.jp/*******/ks2-01/
です。

フォーラムにcssファイルのコードを直接記載した方がよいでしょうか。
その他のデザインも入っていいるので、結構長いです。

どうぞご教示のほど、よろしくお願い致します。

Accepted Answer

ECマスターズの伊藤です。

> gold/*******/css/ks2-01.cssのです。

.title-borderのスタイルを、対象のページで
適用させたいとのことだと思いますが、
htmlコード内に

class="title-border"

の記述がございませんでした。

例えば、Pタグに上記のスタイルを
適用されたいようであれば

テキストテキスト

と記述していただく必要がございます。

スタイルを適用されたい箇所に、
上記の追加をお願いいたします。


なお、CSSの読み込みは、gold読み込み、直接記述とも、
楽天RMSのバグを利用した方法となりますので、
仕様変更の際に、表示されなくなるなどの
影響が考えられます。

先日のサポートニュースにて、
RMS入力エラーチェック強化についての
案内がございましたので、
ご留意いただきますよう、お願いいたします。

詳しくは、下記ページのまとめをご参照くださいませ。
https://club.ec-masters.net/index.php?ecm-errcheck

Answer

お返事ありがとうございます。
RMS入力エラーチェック強化は、スマートフォンのみが対象だと勘違いしておりました。
PCも対象だったのですね。
今後の事もありますので、cssの読み込みは修正していくことにします。
PC用販売説明文に、
直接styleタグにcssを書き込むことにします。

ありがとうございました。

Answer

ECマスターズの伊藤です。

> RMS入力エラーチェック強化は、スマートフォンのみが対象だと勘違いしておりました。
> PCも対象だったのですね。
> 今後の事もありますので、cssの読み込みは修正していくことにします。

大変失礼いたしました。
スマホと勘違いしたご案内となっておりました。

PCは、現状、エラーチェックが行われるか把握できておらず、
楽天より案内があり次第、先にご案内したページにて
案内をさせていただきます。

また、

[基本情報設定 店舗情報・その他] R-Storefrontの利用制限について
https://navi-manual.faq.rakuten.net/shop-setting/000010461?l-id=SearchResult

のページにて、linkタグが許可されていますので、
現状、禁止タグとはなっておりません。

そのため、うまくCSSが適用されていないようであれば、
記述に問題があると思われますので、
まだうまく設定できていないようであれば、
お手数ですが、返信よりご連絡くださいませ。

Answer

お返事いただき、ありがとうございます。
PCはエラーチェックが対象外でしたら、引き続き、ご質問させていただきます。
PC用販売説明文のhtmlコードでは、既に以下の２点を試してから、
こちらのご質問をしております。
テキスト
テキスト

上記ではうまく表示されず、
gold/*******/css/ks2-01.css
が、おかしいのではないかと思っております。

業者に作成していただいたファイル gold/*******/css/ks2-01.css に、
私がコードを加えています。
加えた部分は、２か所です。
１か所は、以下です。
.itemarea .title-border {
display: flex;
align-items: center;
font-size: 2em;
color: #d76969;
}
.itemarea .title-border:before,
.itemarea .title-border:after {
border-top: 2px dotted;
content: "";
flex-grow: 1;
}
.itemarea .title-border:before {
margin-right: 1rem;
}
.itemarea .title-border:after {
margin-left: 1rem;
}

もう１っか所は、
@media only screen and (max-width: 823px){}内に、以下を加えました。
.itemarea .title-border,

引き続きのご指導のほど、よろしくお願い致します。

Answer

ECマスターズの伊藤です。

> PC用販売説明文のhtmlコードでは、既に以下の２点を試してから、
> こちらのご質問をしております。
> テキスト
> テキスト
> 
> 上記ではうまく表示されず、
> gold/*******/css/ks2-01.css
> が、おかしいのではないかと思っております。

先に頂いている、
ks2-01
にて確認させていただいております。

現在、「ブラック」など、記載されている箇所に、
スタイルが適用されておりますが、
適用されていない、というでしょうか。

その場合、キャッシュの可能性がございますので、
シークレットモードでのご確認を
お試しくださいませ。

シークレットモードの起動方法は、下記URLをご参照ください。
https://bit.ly/2Uup9r7

もし、上記箇所は適用されているが、
異なる箇所に記述されたい、ということであれば、
どの部分に記載されたいか、
詳細をご連絡いただけますでしょうか。

Answer

本当でした。
シークレットモードで確認しましたら、
ちゃんと表示されました。
お時間をとらせてしまい、申し訳ございません。
ありがとうございました！