widgetマスター
コミュニティのコメント
-
Widget作成いたしました💪
Widget名: 年齢確認ダイアログボックス（はい/いいえともにページ遷移）
カテゴリ: 自動表示
設置例: https://sb-draft-preview.squadbeyond.com/articles/pTXFCDYqwCIxkswHUTQ/draft?token=0230cf3c48e0504d87bf4a4c7a932980 -
ご依頼ありがとうございます💫
作成できましたらご連絡させていただきます！
不明点がありましたらこちらよりヒアリングをさせてください！
-
お待たせいたしました！！！
【HTMLの調整】
会社名を下記のようにタグで囲みます
<span class=”company-name”>ヤマワケエステート</span>
【CSSの調整】
[ 調整前 ]
.original-button {
display: flex;
align-items: center;
justify-content: center;
line-height: 1.55;
text-decoration: none;
color: #ffffff;
font-size: 18px;
border-radius: 20px;
width: 320px;
height: 115px;
font-weight: bold;
border-bottom: 5px solid #000000;
transition: 0.3s;
background-color: #191970;
}↓
[ 調整後 ]
.original-button {
line-height: 1.55;
text-decoration: none;
color: #ffffff;
font-size: 18px;
border-radius: 20px;
width: 320px;
height: auto;
font-weight: bold;
border-bottom: 5px solid #000000;
transition: 0.3s;
background-color: #191970;
padding: 15px 0;
}
.company-name {
color: #ff2643; /* 参考サイトと同じカラー お好みで調整して下さい */
}設置例
-
お待たせいたしました！
ポップアップの閉じるボタンについてですが、ポップアップの編集画面に移動、もしくは削除の機能はありません。
なので、設置するバージョンのタグ設定から
削除する場合は
._3xv8I4wzXynCMrx5__vZyn { display: none; } ※classについては各バージョンで要確認となるかと思います。
もしくは、widgetにも似たような物がありますので代替が可能であればいかがでしょうか？
フッター固定コンテンツ（表示/非表示になるスクロール量指定）※要Javascript(フッター)
HTML ・72行目で表示/非表示のタイミングが変更できます ・73〜80行目は削除して <a href="飛び先"> <img src="画像"> </a> CSS 背景色が不要な場合は6行目削除が主な修正箇所になるかと思います。
※スクロール位置で表示/非表示はできますが、閉じるボタンで非表示にする機能はありませんのでご注意ください。
よろしくお願いします。
-
スマートフォンで見たときに横揺れしている際は
以下のコードをJavaScriptHeadに入れると横揺れしなくなります☺
<style> .article-body { overflow-x: hidden; } </style> -
-
Widgetを作成しました！ご確認お願いします！
Widget名：吹き出し（スクロールで表示）※要javascript
カテゴリ：吹き出し
設置例：
-
下記調整を行ってください。
① 画像を動画に入れ替える
画像を下記動画を反映する記述に入れ替えて下さい。
<video src="https://file.mysquadbeyond.com/uploads/article_photo/photo/3112984/fd226b3b-0c9d-4b93-b1e3-1fb6ac0cfbf0.mp4" autoplay="" muted="" loop="" playsinline=""></video>
②CSSの調整
動画を反映する記述に下記CSSを追加して下さい。
.img__box video {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}ご確認よろしくお願いいたします！
-
こちらですが下記既存Widgetにて実現可能でございますが、
いかがでしょうか？
—
Widget名: 画像付きアンケート（全ての設問に回答後 コンテンツ表示）※要javascript
プレビュー: https://sb-draft-preview.squadbeyond.com/articles/nMxujDyeAIKRGUQmsGrTA/draft?token=76952e010548bec0bea40294e817ea4b
—
他にご要望（デザイン・機能）がありましたらお申し下さいませ。
-
ご相談ありがとうございます！
確認させていただきます！
(回答は翌営業日以降になります)
-
こちらですが画像を動画に変更したために、CSSでのアニメーションの待機時間の指定がずれてしまったのが原因のようです。
下記CSSを調整していただければと思います💫
.img__box img:nth-of-type(1), .img__box picture:nth-of-type(1) img { animation-delay: 3s; /* ← 0s を 3s に変更 */ } -
ご相談ありがとうございます！
確認します！
-
-
お待たせいたしました！
作成が完了しました😊
●登録カテゴリーとwidget名
表 > 比較表（並び替え機能付き）※要javascript
●設置例
並び替えは昇順/降順もしくは昇順のみに設定変更可能にしてあります（JS, CSSの編集必須）
-
お待たせいたしました！
こちらですが既存ウィジェットと比較したところ、1つのアイテム
<li class="l-chat__list__item"></div>に複数の非表示要素
<div class="l-slideIn">...</div>があるために表示されないようです。1つのアイテム内には、非表示要素は1つにしていただくことで、表示されるようになるかと思います。
具体的には下記ご確認くださいませ。
[ 現在のHTML構成 ]
<li class="l-chat__list__item"> <div class="l-chat__loading">...省略</div> <div class="l-slideIn">...省略</div> <div class="article">...省略</div> <div class="l-slideIn"> <div class="l-chat__qa">...省略</div> </div> <div class="l-slideIn"> <div class="l-chat__qa">...省略</div> </div> </li>[ 修正後のHTML構成 ]
1. 106行目の「<div class=”l-slideIn”>」と119行目の「 </div>」を削除
2. 120行目の「<div class=”l-slideIn”>」と139行目の「 </div>」を削除
<li class="l-chat__list__item"> <div class="l-chat__loading">...省略</div> <div class="l-slideIn">...省略</div> <div class="article">...省略</div> <div class="l-chat__qa">...省略</div> <div class="l-chat__qa">...省略</div> </li>
