楽天スマホの商品説明文『続きを読む』の実装に関しまして

Question

お世話になります。
楽天のスマートフォン用商品説明文をコンパクトに、
まとめたく、続きを読むをクリックする事で全文が表示されるような仕様にしたいです。

禁止タグが入っている為か楽天からはじかれてしまいます。

良い方法が御座いましたら御教授頂けませんでしょうか？


HTML


    
    
    ここに隠したい文章を書くよ





CSS

.grad-btn {
  /*.grad-btnのCSSは表示/非表示の動作には関係ないので、ご自由にどうぞ。*/
}
.grad-btn::before {
  content: "続きを読む"
}
.grad-item {
  position: relative;
  overflow: hidden;
  height: 80px; /*隠した状態の高さ*/
}
.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px; /*グラデーションで隠す高さ*/
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  content: "";
}
.grad-trigger {
  display: none; /*チェックボックスは常に非表示*/
}
.grad-trigger:checked ~ .grad-btn::before {
  content: "閉じる" /*チェックされていたら、文言を変更する*/
}
.grad-trigger:checked ~ .grad-item {
  height: auto; /*チェックされていたら、高さを戻す*/
}
.grad-trigger:checked ~ .grad-item::before {
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/###HR######IMG08d1b06795c27b4f5e30981331d0c4842.jpegIMG0###

Accepted Answer

ECマスターズの塚本です。

> 禁止タグが入っている為か楽天からはじかれてしまいます。
> 良い方法が御座いましたら御教授頂けませんでしょうか？

以下URLでご案内しています通り、
https://club.ec-masters.net/index.php?design_page5

RMSのバグを利用して禁止タグを動作させる方法もございます。

ただ楽天の機能改善によりいつ使用できなくなるか
分からないなど問題点もございますのでその点だけご了承いただき、
自己責任の範囲内でご使用くださいませ。

今回の場合だと、


    < input id="trigger1" class="grad-trigger" type="checkbox" >
    続きを読む
    ここに隠したい文章を書くよ


とタグをスマートフォン用商品説明文に設定、

そして次にRMSの商品ページ設定の共通パーツ設定の
商品ページ共通説明文に以下のタグを登録してください。



そしてご質問いただいたCSSをGOLDにアップロードしていただくと
可能だと思いますので一度お確かめいただければと思います。

Answer

お世話になっております。

御教授頂きました手順にてページに反映させた所。
HTMLの

< input id ="trigger1" class ="grad-trigger" type ="checkbox" >の部分が普通の文字として表示されてしまいCSSが反映されませんでした。

こちらはCSSの間違いでしょうか？HTMLのコードの間違いになりますでしょうか？

お手数お掛け致しますが、再度御教授頂けますと幸いでございます。

Answer

ECマスターズの田中です。

大変お待たせいたしました、
また、誤ったタグをご案内してしまい、
申し訳ありませんでした。

・各属性名と=の間にスペースが含まれている
・inputのタグ名の前にスペースが含まれている
・divに対応するはずの終了タグがlabelになっている
といった問題点がございましたので、お手数ですが、
修正済の下記ソースにて、再度挿入をお試しいただきますようお願いします。



続きを読む
ここに隠したい文章を書くよ

楽天 スマホの商品説明文『続きを読む』の実装に関しまして

楽天スマホの商品説明文『続きを読む』の実装に関しまして