widgetマスター
コミュニティのコメント
-
ご相談ありがとうございます！
＞プレビューページのURL：https://app.squadbeyond.com/ab_tests/CbjjzemxmXfxFEo-uTQ/articles
→こちらですが私の方では確認できないページになっていまして、プレビューのURLを共有いただけますか？
プレビューについて：https://knowledge.squadbeyond.com/edit-page/preview-page/what-difference
お手数ですがよろしくお願いします！
-
Widget 作成いたしました！
Widget名: ランキングフレーム（画像・リスト・テーブル表）
カテゴリ: 囲み枠
-
おまたせしております！
widgetを修正しましたので、再度widgetを入れ直していただけますか？
よろしくお願いします！
修正後
-
Widget作成いたしました！
Widget名: 返済金額シミュレーション(元利均等返済)※要Javascript
カテゴリ: アクション
設置例: https://sb-draft-preview.squadbeyond.com/articles/sKTMNFdeNrba-zwVefw/draft?token=ff582f7fb0814417bc249e2b2051e011
-
ベースにしているWidgetは「アンケート（複数選択・単一選択・yes/no・ボタンを押すと下部表示）※要javascript」で、現在はjavascriptを削除した状態で使用していると思われます。
下記修正をすることでボタンを押して下部コンテンツ表示の状態に戻すことが可能です。
・widgetのjavascriptを設置する
・ボタンから<a>タグを削除するまた、「ボタンの表記が変わった」ように見せるには上記に加えて下記2点の修正を行ってください。
・HTMLのボタン以下の行を変更
～アンケート部分省略～ <div class="send-btn"> <button class="js-send" type="button">回答を完了する</button> </div> <div class="revealarea js-reveal is-hidden"> <div class="send-btn"> <button type="button">アンケートのご協力、ありがとうございます</button> </div> </div> </div>・javascript head設置用のコードを下記に変更する
<!-- タグ設定のJavaScript headに以下をカットして貼り付けてください。 同一widgetを複数追加する場合、複数回貼付けは不要です。 --> <script> var revealBtnFncMulti = revealBtnFncMulti || {}; (function(_) { _.init = function() { var questionBox = Array.from(document.querySelectorAll('.js-questionRevealMulti')); var hiddenClass = 'is-hidden'; questionBox.forEach(function(qb) { var completeBtn = qb.querySelector('.js-send'); var revealArea = qb.querySelector('.js-reveal'); completeBtn.addEventListener('click', function() { completeBtn.closest('.send-btn').classList.toggle(hiddenClass); revealArea.classList.toggle(hiddenClass); }); }); }; })(revealBtnFncMulti); </script> <!-- JavaScript headここまで -->ご確認よろしくお願いいたします！
-
下記CSSを調節してください！
.rankItem__area table tbody td .rate { font-size: 20px; /* ← ここを 40px から 20px に変更。お好みでさらに調整して下さい */ text-align: center; display: block; } .rankItem__area table tbody td { border-width: 0 1px 1px 0; border-color: #ccc; border-style: solid; padding: 10px 5px; /* ← ここを 20px 5px から 10px 5px に変更。お好みでさらに調整して下さい */ }よろしくお願いします☺
-
JavaScriptの下記箇所の数字を変更させてください！
function setView() { itemList.forEach(function(item) { let select = item.querySelector('.selecter'); let result = item.querySelector('.results'); let woodLine = result.querySelector('.wood-line'); item.style.opacity = '0.7'; loader.classList.add('open'); let onTimer = setTimeout(function() { loader.classList.remove('open'); item.style.opacity = ''; select.style.display = "none"; result.classList.add('show_result'); woodLine.classList.add('widthimp'); let offTimer = setTimeout(function() { woodLine.classList.remove('widthimp'); }, 50) }, 1000) // ← ここを 2000 から 1000 に変更 }); }数字が短ければ短いほどアニメーションの秒数が短くなります！
-
以下のように修正してみてください！
HTML
①記述を追加する
https://t.gyazo.com/teams/squadbeyond/a7cbd0811de06cab2a085c8fa0b7ed60.png
【変更前】
<div class="ranking-item-wrap"> <div class=ranking-item-ratings"> <div class="title"> <img src="商品画像"> </div> </div> </div>
【変更後】
<div class="ranking-item-wrap"> <div class=ranking-item-ratings"> <div class="title"> <div class="head__box"> <p class="companyName">アイリンクス株式会社</p> <p class="mainHead">きんいん</p> </div> <img src="商品画像"> </div> </div> </div>②記述を削除する
https://t.gyazo.com/teams/squadbeyond/6bd32d8747d295dc9db9748a8e46ec6b.png
【削除する記述】
<p class="company-name" style="padding: 0px; border: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-variant-alternates: inherit; font-variant-position: inherit; font-weight: bold; font-stretch: inherit; font-size: 1.8rem; line-height: inherit; font-family: "Helvetica Neue", Helvetica, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Arial, "Yu Gothic", Meiryo, sans-serif; font-optical-sizing: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; vertical-align: baseline; color: rgb(87, 52, 39); text-align: start;"><span style="font-size: 20px;" class="sb-fs-free">アイリンクス株式会社</span></p>
<h3 class="mainTitle" style="margin: 0px 0px 0px; padding: 0px; border: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-variant-alternates: inherit; font-variant-position: inherit; font-stretch: inherit; font-size: 4.2rem; line-height: inherit; font-family: "Helvetica Neue", Helvetica, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Arial, "Yu Gothic", Meiryo, sans-serif; font-optical-sizing: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; vertical-align: baseline; color: rgb(87, 52, 39); text-align: start;"><span style="font-size: 20px;" class="sb-fs-free">きんいん</span></h3>
CSS
記述を追加する
https://t.gyazo.com/teams/squadbeyond/5d7b878c394635aa4394a576bd533850.png
【変更前】
.ranking-item-ratings .title {
font-size: 1.4em;
font-weight: 600;
}
【変更後】
.ranking-item-ratings .title {
font-size: 1.4em;
font-weight: 600;
display: flex;
justify-content:space-between;
align-items: center;
}
.ranking-item-ratings .head__box {
width: 65%
}
.ranking-item-ratings .title img {
max-width: 30%;
}
移動した会社名＆商品名には適宜装飾をしてください！
よろしくお願いいたします！
-
以下のように修正してください💫
HTML
①tableタグのwidthを変更する
https://t.gyazo.com/teams/squadbeyond/3c5e790f71d435090d501d6aa53cba69.png
https://t.gyazo.com/teams/squadbeyond/fe6580dc98231cafbd05876a3934db8d.png
【変更前】
width:642.792px
【変更後】
width:100%;
22行目、74行目にあります。変更前を探す際はcommand+Fで検索してください。
②widthを変更したタグ内に記述を追加
border-collapse:collapse;
ご確認お願いします💁♀️
-
ご相談ありがとうございます！
nabanaさんのやりたいこととしては、「動く矢印ボタン」のボタンwidgetに計測機能付きリンクを設定したい。になりますでしょうか？
ご確認お願いします💫
-
おまたせいたしました！
HTMLの「ooooo」の箇所に飛び先のURLとクリックを計測する「?sb_tracking=true」を書いていただければと思います！
【作業動画】
https://t.gyazo.com/teams/squadbeyond/dc8c933f62f6ba353721836d9e47f983.mp4
【変更前】
<div class="button-box">
<a href="ooooo">
<div class="button style button-color-green">
<span class="copy">お得なキャンペーン</span>
<span class="title">公式ページを見てみる</span>
</div>
</a>
</div>
【変更後】
<div class="button-box">
<a href="https://knowledge.squadbeyond.com/?sb_tracking=true">
<div class="button style button-color-green">
<span class="copy">お得なキャンペーン</span>
<span class="title">公式ページを見てみる</span>
</div>
</a>
</div>
よろしくお願いします！
-
何度も試していただきありがとうございます😢
コードがこちらでの共有がうまくいかなさそうなので、貴社アカウントに修正後のものを共有させていただきました！
こちらからwidgetをコピーしてご使用ください！
https://app.squadbeyond.com/ab_tests/yjTBObyGhnhgrOdOJog/articles
-
早速のご対応ありがとうございます！
ばっちりでございます！
確認します！
-
ご確認ありがとうございます！
お手数ですが、修正いただいたページをこちらに共有いただけますか？
よろしくお願いいたします🙏
-
該当ページはこちらで確認できました！
確認したところ、元々widgetに記載があったJavaScript bodyの部分が欠けていたようです！
JavaScript bodyに下記記述を追加してください💫
<script>
document.addEventListener('DOMContentLoaded', revealBtnFncMulti.init, false);
</script>
