widgetマスター
コミュニティのコメント
-
ご相談ありがとうございます💫
そうですね・・・
例えば「FV用_画像」なんかがあります！
ちなみに、どのような用途で使われる予定ですか・・・？🤔
-
下記CSSの調整を行ってください！
.footerBtn__content { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; height: auto; /* ← 修正 */ display: flex; justify-content: center; align-items: center; /* 追加: ページコンテンツや配信version幅などに合わせて下記「max-width」の数値を調整して下さい */ max-width: 620px; /*beyondエディタの場合 max-width:620px / 参考サイトの場合 max-width:720px */ } .footerBtn__content .btn { width: 100%; /* ← 修正 */ height: auto; display: block; /* height: 100px; ← こちらは削除して下さい*/ opacity: 1; transition: opacity 0.2s; /* 追加 */ margin: 10px; /* 参考サイトと同じ表示になるために追加して下さい */ } /* レスポンシブ時（画面サイズ 600px 以下）の設定 */ @media (max-width: 600px) { .footerBtn__content .btn { margin: 0; /* 参考サイトと同じ表示になるために追加して下さい */ } } -
作成しました！
●登録カテゴリーとwidget名
囲み枠 > スマホ型の枠（縦長動画、画像スクロール可）
●設置例
-
ご相談ありがとうございます！
確認します！
-
お待たせいたしました！
こちら修正完了しました！
新しくWidgetを入れ直していただければと思います。
よろしくお願いいたします🙌
-
下記のようにWidgetを変更してみてください！
javascriptとHTMLは変更部分のみ記載しているので記述を探して上書きしてもらえればOKです！
javascript
修正前
choiceboxes.forEach(function(choicebox) {
let input = choicebox.querySelector('input');
input.addEventListener('click', function(e) {
const clickItem = e.target;
clickItem.disabled = true;
clickItem.parentNode.classList.add(clickClass);
setView();
}, false);
});修正後
choiceboxes.forEach(function(choicebox) {
let input = choicebox.querySelector('input');
input.addEventListener('click', function(e) {
const clickItem = e.target;
clickItem.disabled = true;
clickItem.parentNode.classList.add(clickClass);
if (clickItem.closest('.choicebox').classList.contains('correct')) {
btn.classList.add('correct');
} else {
btn.classList.add('incorrect');
}
setView();
}, false);
});CSS
下記記述を追加
.btn__box>.correct,
.btn__box>.incorrect {
display: none;
}
.btn__box.correct>.correct,
.btn__box.incorrect>.incorrect {
display: block;
}HTML
回答後に表示部分を下記のように変更し、それぞれ出し分けたい内容をいれてください
<div class="btn__box js-btn">
<div class="correct">
～正解の時の記述～
</div>
<div class="incorrect">
～不正解の時の記述～
</div>
</div>参考例：
-
紙吹雪で検索して探してみましたところ、下記のWidgetがございました！
1. ルーレット後に下に別コンテンツ表示・花吹雪 ※要javascript
2. 紙吹雪-爆発・スクロール量で出現※要javascript
3. 自動応答チャット形式アンケート（選択肢をクリックして次の設問表示）
設置例:
また回答後のコンテンツが非表示になっているWidgetであれば、
上記 2の 「紙吹雪-爆発・スクロール量で出現」を組み合わせる事で、回答後のコンテンツが表示された際に紙吹雪が出るようにできます！
設置例2:
具体的には、2つのWidgetを組み合わせて1つのWidgetにする作業が必要になります。
1. 「紙吹雪-爆発・スクロール量で出現」のWidgetのJavascriptを Javascript head へ貼り付け
2. 「紙吹雪-爆発・スクロール量で出現」のWidgetのHTML・CSSを アンケート側へ移動
→HTMLは回答後に出現するコンテンツ内に設置
(上記紙吹雪を組み合わせた新規作成も可能でございます。)
-
作成完了しました！
ご確認お願いします💪
—–
Widget名: チェック項目数と連動したグラフ ※要Javascript
カテゴリ: 囲み枠
—–
-
該当Widgetを下記のとおり変更することで「ボタンを押して絞り込み検索」の仕様に変更可能です！
Widget名：絞り込み検索付き評価リンク※要javascript
【javascript】
javascriptHead用の記述を下記に差し替え
<script>
var sbRefineSearch02 = sbRefineSearch02 || {};
(function(_) {
const target = '.js-refine-search';
_.setRefineSearch02 = function(el) {
const countResults = el.querySelectorAll('.num-result .num');
let resetBtn = el.querySelector('.js-reset');
const results = [];
Array.from(el.querySelectorAll('.refine-search-result'), result => {
let addResult = {};
addResult.el = result;
addResult.filter = result.dataset.filter ? result.dataset.filter.split(',') : [];
results.push(addResult);
});
const filterForm = el.querySelector('form[name="refine-search-filter"]');
resetBtn.addEventListener('click', setResult);
function setResult() {
let filter = [];
Array.from(filterForm.querySelectorAll('input[value]:checked'), input => filter.push(input.value));
let count = 0;
results.forEach((result) => {
let isMatch = true;
filter.some((value) => {
if (!result.filter.includes(value)) {
isMatch = false;
return true;
}
});
if (isMatch) {
result.el.style.display = 'block';
count++;
} else {
result.el.style.display = 'none';
}
if (filter.length === 0) {
result.el.style.display = 'none';
};
});
countResults.forEach((countResult) => countResult.textContent = count);
}
}
_.init = function() {
Array.from(document.querySelectorAll(target), el => {
_.setRefineSearch02(el);
});
};
})(sbRefineSearch02);
</script>【HTML】
ボタンを変更
・変更前
<button class="resetBtn js-reset" disabled="">すべての選択を解除</button>
・変更後
<button type="button" class="resetBtn js-reset">検索する</button>
-
widgetを登録いたしました！
●登録カテゴリーとwidget名
アクション > ポップアップ風年齢確認（Yes非表示/Noリンク遷移）※要javascript
●設置例
記事編集時にwidgetが邪魔な場合は、css3行目をnoneにしてください。（コメントあり）
-
下記のように修正してください！
CSS
.rankings-limit-head .image {
aspect-ratio: 21/16;
position: relative;
display: none; /* 追加 */
}・display: none; を追加
.rankings-limit-head {
background-color: #333c5e;
padding: 0.5em 1em;
color: #ffffff;
font-size: 2em;
font-weight: 600;
display: grid;
grid-template-columns: auto; /* 変更 */
column-gap: 0.5em;
align-items: center;
}.rankings-limit-head {
grid-template-columns: auto; /* 変更 */
}・grid-template-columns をauto に変更する
※2か所あるので両方とも変更してください
よろしくお願いします！
-
下記CSSをタグ設定の javascript head に追加して下さい！
<style>
body.icv__body {
max-width: 100% !important;
}
</style> -
下記CSSを追加してください🙌
.questionArea video { display:block !important; margin-left:auto; margin-right:auto; } -
作成完了しました💫
Widget名：入力欄付きリンク（セレクトボックス/2択ボタン）
カテゴリ：アンケート
設置例：
-
よかったです〜🙌
また何かありましたらご相談ください！！！