widgetマスター
コミュニティのコメント
-
お待たせいたしました！
コードをお渡しいたします！
よろしくお願いします！
JavaScript head
<script> var tocAccordion = tocAccordion || {}; (function(_) { const target = '.js-tocAccordion'; _.accordionOpen = function(el) { let toc = el.querySelector('.js-tocAccordionInner'); let btn = el.querySelector('.js-btn'); btn.addEventListener('click', function() { btn.classList.add('is-hidden'); toc.classList.remove('is-hide'); }) }; _.init = function() { Array.from(document.querySelectorAll(target), el => { _.accordionOpen(el); }) }; })(tocAccordion); </script>JavaScript body
<script> document.addEventListener('DOMContentLoaded', tocAccordion.init, false); </script>HTML
<div class="tocAccordion__area js-tocAccordion"> <div class="tocAccordion__inner js-tocAccordionInner is-hide"> <p class="tocHead">Contents <span class="allView__btn js-btn">全部見る ▼</span></p> <ul class="tocLists"> <li class="item"><a href="%E2%97%AF%E2%97%AF%E2%97%AF%E2%97%AF%E2%97%AF">見出しが入ります</a></li> <li class="item"><a href="%E2%97%AF%E2%97%AF%E2%97%AF%E2%97%AF%E2%97%AF">見出しが入ります</a></li> <li class="item"><a href="%E2%97%AF%E2%97%AF%E2%97%AF%E2%97%AF%E2%97%AF">見出しが入ります</a></li> <li class="item"><a href="%E2%97%AF%E2%97%AF%E2%97%AF%E2%97%AF%E2%97%AF">見出しが入ります</a></li> </ul> </div> </div>CSS
p { margin: 0; } ul { list-style: none; padding-left: 0; } a { text-decoration: none; } .tocAccordion__area { width: 100%; height: auto; background: #fff; font-size: 12px; } @media screen and (max-width: 600px) { .tocAccordion__area { font-size: 12px; } } .tocAccordion__area .tocAccordion__inner { position: relative; } .tocAccordion__area .tocAccordion__inner.is-hide { height: 130px; overflow-y: hidden; } .tocAccordion__area .tocAccordion__inner.is-hide:after { content: ''; width: 100%; height: 50px !important; position: absolute; bottom: 0; left: 0; background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 100%); } .tocAccordion__area .tocHead { font-size: 1.6em; font-weight: bold; text-align: center; } .tocAccordion__area .tocLists .item { font-size: 1em; padding: 1em; border-bottom: 1px solid #ddd; position: relative; } .tocAccordion__area .tocLists .item a:after { content: '↓'; width: 1em; height: 1em; color: #fff; font-weight: bold; font-size: 0.7em; padding: 0.05em 0.2em 0.35em; background: #666; border-radius: 10vw; display: block; position: absolute; top: 50%; right: 0; transform: translateY(-50%); } .tocAccordion__area .tocLists .item a { color: #666; } .tocAccordion__area .tocLists .item a:hover { text-decoration: underline; } .tocAccordion__area .tocLists .subTocLists { padding-left: 1em; } .is-hidden { /*display: none;*/ visibility: hidden; } .allView__btn { width: 100%; height: auto; border: 0; background: none; color: #666; font-size: 0.7em; font-weight: normal; cursor: pointer; } -
Widgetを作成しました🙌
Widget名：動画再生後にコンテンツ表示※要javasctipt
カテゴリ：画像
設置例：
-
3つ目のwidgetが完成しました！
●登録カテゴリーとwidget名
表 > 商品比較紹介
●設置例
クラス名を変更することで全体を水色、ピンク、青、黄色になるように作成しています。
※コメントあり
-
お待たせいたしました！
ご確認よろしくお願いいたします😼
【質問1】
■ 画像がプレビューで表示されない問題
画像を恐らくプレビューのソースコードから直接コピペされたため、
LazyLoadが読み込みを完了する際に付与する class名 と 属性 が追加されている事から、読み込んだものとして扱われるため画像が正しく表示されておりませんでした。
※beyondエディタでは画像すべてに lazyload が初期で実装されるため LazyLoad が画像を読み込む前に軽量の透明画像に変換されます。解決方法については、エディタから直接画像を追加しなおす、もしくは 現在 LazyLoad が完了時に追加した class名および属性を削除して下さいませ。
具体的にはHTMLを修正してください！
変更前
<td data-level="image"><img src="https://file.mysquadbeyond.com/uploads/article_photo/photo/3405942/7e96b7e0-37f4-43c7-9a66-824f1a624055.webp" height="158" width="157" draggable="false" class="entered loaded lazyload" data-ll-status="loaded"><img src="https://file.mysquadbeyond.com/uploads/article_photo/photo/3405941/4f018f21-a819-4842-bbd2-6ccd5d069732.webp" height="158" width="157" draggable="false" class="entered loaded lazyload" data-ll-status="loaded"></td>
変更後
<td data-level="">
<div class="image-wrap">
<img src="https://file.mysquadbeyond.com/uploads/article_photo/photo/3405942/7e96b7e0-37f4-43c7-9a66-824f1a624055.webp" height="158" width="157" draggable="false" class="lazyload"><img src="https://file.mysquadbeyond.com/uploads/article_photo/photo/3405941/4f018f21-a819-4842-bbd2-6ccd5d069732.webp" height="158" width="157" draggable="false" class="lazyload">
</div>
</td>
【質問2】
CSSを変更してください！
変更前
.statick-table table tbody td[data-level="image"] {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.statick-table table tbody td[data-level="image"] img {
width: 30%;
/* ← 数値はお好みで調整して下さい */
}
変更後
.statick-table table tbody td .image-wrap {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .statick-table table tbody td .image-wrap img { width: 30%; /* ← 画像の大きさを調整する場合はこちらの数値を調整して下さい */ } -
ご依頼ありがとうございます！
Squad beyondの仕様上、エディタ上で画像の入れ替えをすると自動でalt属性が削除されてしまうためWidgetで対応することは不可能になっております！
ご希望に添えず申し訳ございませんがよろしくお願いいたします🙏
-
あけましておめでとうございます🐉
今年もよろしくお願いいたします💫
依頼内容承りました！
またご連絡させていただきます！
-
お待たせいたしました！
CSSの31行目のheightを変更してください！
数字を大きくすれば見える範囲が増えます！
例
【変更前】
.tocAccordion__area .tocAccordion__inner.is-hide { height: 130px; overflow-y: hidden; }【変更後】
.tocAccordion__area .tocAccordion__inner.is-hide { height: 330px; overflow-y: hidden; } -
Widget作成いたしました💫
————————————————————
Widget名: 選択肢をクリックして指定数値で止まるスロット※要Javascript
カテゴリ: アクション
————————————————————
■ 金額の設定について
汎用性のため、個別・一括設定を可能にいたしました。
選択肢にある下記HTMLの data-price に金額を設定します。
選択肢毎に個別に設定する場合は選択肢それぞれに任意の金額を設定して下さい。
例) ¥7,800 にしたい
<input type="radio" name="q1-1" id="q1-1" data-price="7800">
※エラー回避のため、個別設定に値がない場合は最後に表示する下記結果表示コンテンツにある設定値の金額が一括で設定されます。
<div class="price" data-price="xxxx">0,000</div>
■ 選択前のスロットの数値設定について
指定桁数からランダムで表示するように設定しております。
現在の設定: 4桁
桁数の変更は下記 javascript 設定の digits で変更可能です。
const settings = { //省略... digits: 4, //ランダムで動くスロットの数値の桁数 //省略... }; -
ご質問ありがとうございます☺
なにも編集していないwidgetでは同じ現象が確認できないので、該当のbeyondページを共有いただきたいです！
また、基本的にwidgetについての質問は3営業日前後で回答させていただきます🙌
-
返信遅くなりまして申し訳ございません🙇♀️
直ぐに確認いたします！
-
お待たせいたしました！！！
作成完了です🙌
———-
Widget名: 商品紹介記事2 (口コミがスライド) ※要Javascript
カテゴリ: テンプレート記事
———-
-
Widget作成いたしました。
———-
Widget名: アンケート（ダミー結果表示もしくは設定リンクに遷移）※要javascript
カテゴリ: アンケート
———-
■ 回答クリック後のアクション
下記ご希望のアクションに応じてHTMLを調整して下さい
[ ダミー結果を表示 ]
<span class="choice-radio">回答</span>
[ 設定したリンク先に遷移 ]
<a href="遷移先のURL">回答</a>
設置例は Q1 と Q3 にリンクを設定しておりますが、ご希望に合わせてご設定くださいませ。
-
確認させていただきます🙌
-
共有ありがとうございます！
修正してみたのですが、こちらいかがでしょうか？？
-
よかったです！
こちらのFAQの方法で修正しました！
https://knowledge.squadbeyond.com/edit-page/attach-page-link/inner-link-faster
原因としましては、Squad beyondはページの速度を速くするためにlazy loadを適用しているのですが、それでスムーズさが損なわれていました。
確認よろしくお願いします🙏