widgetマスター
コミュニティのコメント
-
Widget作成いたしました！
Widget名 : チェック時にチェックボックがスアニメーション
カテゴリ : アンケート
チェック後のカラーは CSS で調整可能でございます！
-
Widget作成いたしました❄
Widget名: 商品検証ポイント
カテゴリ: 囲み枠
-
Widgetの下記CSSのwidthで調整可能です💫
1桁でしたらwidth: 1em;にしていただくとちょうど良いかと思います💪
【変更前】
.item span.parent__area {
width: 2em;
height: 1.2em;
overflow: hidden;
}
【変更後】
.item span.parent__area {
width: 1em;
height: 1.2em;
overflow: hidden;
}
【プレビュー】
-
ご依頼ありがとうございます！
かしこまりました💫
-
こちらはHTMLエディターで作業しているという前提でお話を進めてさせていただきます！
まずbodyタグ直下にタグを置きたいとのことですが、HTMLエディタもbeyondエディタも仕様上bodyタグ直下からコードを書き始めることはできません。
以下記述される場所なのでご参考にしてください。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
●HTML
bodyタグ内の.article-body直下
●CSS
bodyタグの.article-bodyより前
（とはいえ、ここにJSやHTMLを書くことはできません）
●JS Head
headタグ内
●JS Body
閉じBodyの前
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
なので、bodyタグ直下の場合はHTML欄に記述してください。
ただし今回のサイトを検証したところ、subsc-1 , subsc-2 とコメントがあったscriptが原因でサイトが表示されない様です。
コードからではこの記述たちが何をしているのか不明ですが、もしカートやフォームに関するものでしたら、そちらのサービスでドメインの設定等サイトで表示するための設定が正しく行われているかご確認をお願いします。
よろしくお願いいたします！
-
Widget完成しました！
Widget名：アイコン一覧表
カテゴリ：表
設置例：
-
HTML, CSSを以下の様に修正してみてください🙌
【プレビュー】
※回答5に設定しています
●html
<div class="choices">
<div class="selecter"><span class="choice-radio">回答1</span></div>
<div class="results"><span class="result-text">回答1<span>
<div class="wood-line" style="width:15%"><span>●●票</span></div>
</span></span>
</div>
</div>
↓↓↓
<div class="choices">
<div class="selecter"><a href="https://google.com">回答1</a></div>
<div class="results"><span class="result-text">回答1<span>
<div class="wood-line" style="width:15%"><span>●●票</span></div>
</span></span>
</div>
</div>●css
59行目
.blackwood_box .selecter>span {
↓↓↓
.blackwood_box .selecter>span,
.blackwood_box .selecter .link {
72行目
.blackwood_box .selecter>span:hover {
↓↓↓
.blackwood_box .selecter>span:hover,
.blackwood_box .selecter a:hover { -
該当のWidgetを確認したところ、「初期は全表示で検索ボタンを押すと条件に合わせて表示を絞り込む」という仕様でしたのでWidget的にはこれが正しい動きです。
そのうえで「初期は全非表示で検索ボタンを押すと条件に合致する項目だけ表示」という形に変更するのであれば下記の通り修正してみてください！！！
１．オリジナルコードの35行目にある_.selectFunction(el, catArr); をコメントアウトする
該当関数の抜粋：
_.paramsSelect = function(el) {
let url = new URL(window.location.href);
let params = url.searchParams;
if (params) {
params.forEach(function(value, key) {
if (value !== '0' && key !== 'step_uid') {
catArr.push(value);
if (el.querySelector('[name=' + key + ']'))
el.querySelector('[name=' + key + ']').dataset.check = 'true';
let selectedKeies = el.querySelectorAll('[name=' + key + '] ');
selectedKeies.forEach(function(selectedKey) {
if (selectedKey.querySelector('option')) {
selectedKey.querySelector('[data-cat="' + value + '"]').selected = true;
} else {
selectedKey.checked = true;
}
});
}
});
}
//_.selectFunction(el, catArr); ←ここの行頭に「//」を入れてコメントアウト
}２．HTMLの各項目<tr>のclassに is-hiddenを追加する
参考例：
<tr class="result__content js-resultContent is-hidden" data-result="p01-1, f01-2, g01-2, cat01, cat02, cat03">
※すべての項目に追加が必要です
-
Widgetの作成が完了しました！
Widget名：ヘッダー固定比較表（5列、強調あり、横スクロール）
カテゴリ：表
設置例：https://sb-draft-preview.squadbeyond.com/articles/iZsyqvhLxnRcbcUkjw/draft?token=fb9efc36e4a7dea34d813662c4c8b28c -
修正方法をまとめましたのでご確認ください！
①JavaScript headの下記箇所をコメントアウトしてください！
_.countdownTimerDate = function(el) {
const option = getOption(el);
let end = option.date;
let dt = new Date(end);
let y = dt.getFullYear();
let m = ("00" + (dt.getMonth() + 1)).slice(-2);
let d = ("00" + dt.getDate()).slice(-2);
let endDay = el.querySelector('.js-endDay');
//endDay.innerHTML = y + '年' + m + '月' + d + '日'; ←コメントアウト
②HTMLの文言を変更してください
<p class="dateCountdown__area"><span class="countEndText js-endDay"></span>キャンペーン終了まであと<br class="sp-only"><span class="countText"><span class="countNumBox js-cd-d">
-
かしこまりました！作成開始します💫
-
こちらもかしこまりました🙌
-
早速試していただきありがとうございます！
状況を確認したいので、スクショを共有いただけますか？
-
ご共有ありがとうございます！
こちらのマークは計測機能付きリンクが設定されているよというものなので
これで設定はバッチリです💪
リンクのクリックを計測するのに、他にする設定はありません！
-
お疲れ様です！
Widgetの新規作成完了は基本的に10営業日を目安にしていただければと思います❄