コミュニティのコメント
-
1点確認させてください!
下記依頼ですが、やりたいこととしてはこちらの画像の様にするであっていますでしょうか・・・?
画像:https://squadbeyond.gyazo.com/517da39ed54881253bb641498875a96d
【ご相談内容②(CSSの追加)】
〈商品評価とランキングの表(横スク対応)(表)〉という既存widjetの王冠画像(画像4の部分)を、4位以下の場合は黒い色の王冠になるようにして、画像5の青く囲った部分に追加していただきたいです。 -
【現在設定中のコード】にある「②以下コードをJSの欄に設置」部分を下記の通り修正してみてくださいませ。
修正前
const popupRoot = window.parent.document.getElementById('popup-root');
修正後
const popupRoot = window.parent.document.getElementById('fixed-popup-root');
なお、コード量増えますがどちらでも使えるコードもあります。
参考まで。
var popupRoot;
['popup-root','fixed-popup-root','link-popup-root'].some((popup) =>{
if(!window.parent.document.querySelector('#' + popup + ' iframe')) return;
if(window === window.parent.document.querySelector('#' + popup + ' iframe').contentWindow){
popupRoot = window.parent.document.getElementById(popup);
return true;
}
}) -
ご依頼ありがとうございます!
元のversionのプレビューを共有いただけますでしょうか?
今の形ですと確認できなくてですね・・・
よろしくお願いします!
<プレビュー取得方法>
https://knowledge.squadbeyond.com/edit-page/preview-page/what-difference
-
お待たせいたしました!
【ご相談内容①(CSSの修正)】「1.画像1の箇所で、文字の色を変えると画像2のように改行されてしまうので改行されないように修正していただきたいです。」の修正が完了しました!
widgetを入れ直していただければと思います!
もし今のままで修正したい場合は下記コードをご参考ください!
CSS修正箇所
283行目 .product__point-list { /*display: grid; gap: 0.75em; 削除*/ font-weight: bold; color: #000; list-style: none; margin: 0; padding: 0; } .product__point-list li { /*display: flex; align-items: center; gap: 10px; 削除*/ position: relative;/*追加*/ padding-left: 25px;/*追加*/ } .product__point-list li+li {/*3行追加*/ margin-top: 10px; } .product__point-list li .mark { /*display: flex; align-items: center; gap: 5px; position: relative;削除*/ position: absolute; /*追加*/ top: 5px; left: 0; }
-
【ご相談内容①(CSSの修正)】「2.画像3の表部分のタイトル部分(会員数やポイントレートと書かれている部分)を少し広くして、スマホで見た際に綺麗に収まるようにサイズ調整をしていただきたいです。」の案内もさせていただきます!
下記コードをCSSに追加
@media screen and (max-width: 550px) { /* ① 表全体のテキストサイズを少し小さく */ .ranking-frame-table { font-size: 0.8em; /* ← 数値はお好みで調整して下さい */ } /* ②表タイトルの幅を任意のサイズに調整 */ .ranking-frame-table th { width: 40%; /* ← 数値はお好みで調整して下さい */ } }
-
【ご相談内容②(CSSの追加)】こちらの作成も完了しました!
———-
Widget名: 商品評価とランキングの表(横スク対応)
カテゴリ: 表
———-
-
お待たせいたしました!
作成しましたが、既存修正になるので貴社アカウントに移させていただければと思います!
widgetをコピーしていただければお好きなbeyondページに貼り付けられます!
どのフォルダに移していいかご教授ください!
また、診断中のローディング画像は弊社で作成したものを使用しておりますので、
下記箇所の画像を入れ替えていただければと思います。
<!-- ↓ 診断中のローディングここから ↓ --> <div class="auto-chats-loading shindan-loading"> <div class="auto-chats-item"> <!-- 診断中のローディング画像はお好みのものにご変更下さい --> <img src="<a target="_blank" class="c-link" data-stringify-link="https://file.mysquadbeyond.com/uploads/article_photo/photo/3496828/c21840cf-dbff-4079-921a-a5e23c54dfa6.gif" delay="150" data-sk="tooltip_parent" href="https://file.mysquadbeyond.com/uploads/article_photo/photo/3496828/c21840cf-dbff-4079-921a-a5e23c54dfa6.gif" rel="noopener noreferrer" style="box-sizing: inherit; color: inherit; text-decoration: none;">https://file.mysquadbeyond.com/uploads/article_photo/photo/3496828/c21840cf-dbff-4079-921a-a5e23c54dfa6.gif</a>" style="border-radius:50%;overflow: hidden;" height="169" width="169" draggable="false" class="lazyload"> </div> </div> <!-- ↑ 診断中のローディング ここまで ↑ -->
また、設問2の回答に応じた診断結果の出しわけについては、
最終コンテンツを下記HTML構成にしております。
こちらの構成に基づいて設置いて下さいませ。<!-- ↓ 診断結果コンテンツここから ↓ --> <div class="auto-chats-contents"> <div class="auto-chats-item"> <!-- 診断結果前にメッセージがある場合 いらなければ削除して下さい --> <div class="message"> ...HTML省略... </div> <!-- ↑ 診断結果前にメッセージがある場合 ここまで ↑ --> <!-- ↓ 診断結果による各コンテンツの設定 ↓ --> <div class="shindan-results scroll-animation fadein-up"> <!-- ↓ 回答がA2-1の場合 ↓ --> <div class="shindan-result result-1"> ...HTML省略... </div> <!-- ↑ 回答がA2-1の場合 ここまで ↑ --> <!-- ↓ 回答がA2-2の場合 ↓ --> <div class="shindan-result result-2"> ...HTML省略... </div> <!-- ↑ 回答がA2-2の場合 ここまで ↑ --> <!-- ↓ 回答がA2-3の場合 ↓ --> <div class="shindan-result result-3"> ...HTML省略... </div> <!-- ↑ 回答がA2-3の場合 ここまで ↑ --> <!-- ↓ 回答がA2-4の場合 ↓ --> <div class="shindan-result result-4"> ...HTML省略... </div> <!-- ↑ 回答がA2-4の場合 ここまで ↑ --> </div> <!-- ↑ 診断結果による各コンテンツの設定 ここまで ↑ --> </div> </div> <!-- ↑ 診断結果コンテンツここまで ↑-->
また下記 JavaScript body にあったコードの方は、
このたびの調整の兼ね合い上、コメントアウト(無効化)しております。<script> /* 以下コメントアウト //回答毎にメッセージ出し分け var inputBoxs = document.querySelectorAll(".choices-item [type='radio']"); for (var i = inputBoxs.length - 1; i>=0; i--) { inputBoxs[i].addEventListener('change', function() { console.log(i); let inputName = this.name; var val = $(this).val(); //アンケ1 if(inputName=='q1'){ //回答したメッセを表示 $('#q1-dashiwake').text(val); } }); } //# sourceURL=test.js */ </script>
-
-
ご確認ありがとうございます!
大変申し訳ございませんが、再度確認させてください。
共有いただいたページでは1箇所しか商品タイトルの箇所がありませんが、他の順位を組み込むとはどのようなイメージになりますでしょうか・・?
下記ページにように5個あり、王冠を付けたいということでしょうか?
それですと、元のwidgetは1個しかないので個数を増やして王冠がついているwidgetを作成することにになります。
ご確認よろしくお願いいたします。
-
お待たせいたしました!
こちらいががでしょうか・・・?
———-
Widget名: 商品紹介記事2 (ランキング/口コミがスライド) ※要Javascript
カテゴリ: テンプレート記事
———-
HTMLの数字を変更すると王冠の色が変わっていきます!
https://t.gyazo.com/teams/squadbeyond/a5cd29355efc53287e476364a30f13f0.mp4