メンバー | Squad voice

widgetマスター

モデレータ

2023年9月20日 15:12

ご相談ありがとうございます！

確認させていただきますね！

作業していく中で不明点がありましたらこちらに返信させていただきます！

widgetマスター

モデレータ

2023年9月20日 17:12

お待たせいたしました！

ご案内させていただきます！

①

1. CSSに下記記述を追加

.header__pcNav .item a {
  text-decoration: none;
  font-size: 16px;
  color: #000;
  width: 100%;←追加
}

2. CSSの下記記述をCSSの一番上に移動

a {
  color: inherit;
  text-decoration: none;
  width: 90%;
  height: auto;
  display: block;
}

②

アコーディオンが動かない問題については、該当のHTMLの記述を削除してしまっていることが原因ですので、以下を追加してください。
※オリジナルのソースコードにも記述はありますので、そこから持ってきてもOKです
※画像は適宜変更してください。

<div class="header__item02">
 〜
</div>
<div class="header__item03 _pcNone js-navSwitch"><!--追加-->
 <img src="https://file.mysquadbeyond.com/uploads/article_photo/photo/3039624/3267e0dc-2f2f-44a3-ae29-181f9f0c9f7d.webp" draggable="false">
</div><!--追加ここまで-->

③

ご相談にはありませんでしたが、メニューの数がありフォントサイズを最大限小さく（10px）してもロゴに被ってしまう画面サイズがあったので、ロゴに被る前に2段になる設定を共有させていただきます！必要であれば使用してください。

.header__rightBox {
  /*width: calc(100% - 100px);　不要*/
  display: flex;
  justify-content: center;
  align-items: center;
}

〜

@media screen and (min-width:601px) {
   〜

   .header__pcNav._spNone {
    display: flex;
    flex-wrap: wrap;/*追加*/
    margin-right: 0;/*追加*/
    margin-left: auto;/*追加*/
    width: calc(100% - 160px);/*横70pxずつの画像+メニュー左に20pxの余白*/
    padding-left: 20px;/*左に余白（余白の大きさ、上記の横幅は適宜設定してください）*/
  }
}

プレビュー：https://sb-draft-preview.squadbeyond.com/articles/vAMFUBtjoLLMngDTKA/draft?token=87601b6972547a854882dd8a408c060a

widgetマスター

モデレータ

2023年9月21日 10:31

ボタンの配置がデバイスによりズレる問題ですが、

デバイス毎の画面サイズや処理の違いから、

指定する距離が大きければ、それだけズレが大きくなる可能性がございます。

今回の場合、下方向への配置というところですが、

上を基準に 70% の位置で指定しているため、

下から指定する方がズレか小さくなると思われますので、

一度下記CSSの調整をしていただけますでしょうか？

[ 修正前 ]

.txt-on span {
  width: 80%;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  animation: puruY 1s forwards infinite;
}

[ 修正後 ]

下記を調整しております。

top: 70% → bottom: 15%;
left: 50%; → left: 10%;
transform: translate(-50%, -50%); → 削除
.txt-on span {
  width: 80%;
  bottom: 15%;
  left: 10%;
  position: absolute;
  animation: puruY 1s forwards infinite;
}

こちらでも解消されないという場合には、お気軽にお問い合わせくださいませ。

widgetマスター

モデレータ

2023年9月21日 10:50

画像でのボタンを想定されているWidgetのため、

現状からの調整方法をお示しいたします。

① レスポンシブに対応するため現在 spanタグに設定されているフォントサイズを調整

[ 修正前 ]

<span style="font-size: 25px;" class="sb-fs-free">
  <font color="#FFF251">５０％オフで今すぐ購入する</font>
</span>

[ 修正後 ]

font-size: 25px; → font-size: 1.6em; に変更

<span style="font-size: 1.6em;" class="sb-fs-free">
  <font color="#FFF251">５０％オフで今すぐ購入する</font>
</span>

② レスポンシブ時のCSSの調整

下記CSS をWidgetのCSSエディタの最後に追加

@media (max-width: 500px) { 
  .puyoBtn__area .btn {
    font-size: 3.3vw; /* 3.0vw 〜 4.0vw くらいで調整してみて下さい */
    padding:1em;
  }
}

widgetマスター

モデレータ

2023年9月21日 11:44

アンケートWidgetをうまく作動させるためには、以下にの２点に気を付ける必要がございます。

設問毎に同じ name属性の値に設定する　　
- 同じ設問内でバラバラな name 属性であると、うまく作動しません。

inputに設定したidの値と labelに設定したforの値はど同ページ内で一意のものにする
- input と label で 1セットになり、inputに設定したidの値と labelに設定したforの値で紐付けを行います。同じページ内ではこの1セットが一意になるように設定をする必要がございます。選択肢に設定するidとforの値が重複すると、うまく作動しません。

具体的には、以下のようにコードを変更してみてください。

[Q2]
<input type="checkbox" id="q2-01" name="q2">
<label for="q2-01">記憶力の低下を感じるため</label>
<input type="checkbox" id="q2-02" name="q2">
<label for="q2-02">家族や親戚に記憶力の低下を感じ不安があるため</label>
<input type="checkbox" id="q2-03" name="q2">
<label for="q2-03">予防として</label>
<input type="checkbox" id="q2-04" name="q2">
<label for="q2-04">医師や専門家のおすすめ</label>
<input type="checkbox" id="q2-05" name="q2">
<label for="q2-05">開発者や企業のこだわり</label>

widgetマスター

モデレータ

2023年9月21日 15:18

ご相談ありがとうございます！

確認させていただきます！

widgetマスター

モデレータ

2023年9月25日 10:24

設定のmodalをfalseからtrueに変更いただくと、モーダル外クリックでの閉じる動作が無効化されます。

なお、詳細は、HTML内のコメントでも確認いただけます。

詳細：https://squadbeyond.gyazo.com/daa20bb5a19d1f3767ea993688f223f7

＜HTML＞

        const target = '.js-widget-popup';
        let shadeEl = {};
        const defaultSettings = {
            modal: true,
            shade: true
        };

widgetマスター

モデレータ

2023年9月25日 10:37

ご要望にお応えして、Squad beyondに新しいWidgetが登場しました！

【Widget名】

ハイライトが左から右にスライドイン※要Javascript

【カテゴリー】

文字

【設置例】

https://sb-draft-preview.squadbeyond.com/articles/NxyjgGewUOIQZteYA/draft?token=127f6b2c0253a701a75d340e107ef5b5

【備考】

背景画像：HTMLのスタイル属性・CSSのどちらでも設定可能です。https://squadbeyond.gyazo.com/72a0c2cc07ca51be7272cce111b249ce
ハイライトアニメーション：アニメーションは3種類用意ございます。https://squadbeyond.gyazo.com/b93c7cfb6663d1f915d90d1fee367640
ハイライトのカラー：HTMLのスタイル属性で設定可能です。https://squadbeyond.gyazo.com/afae385fbf60e1da247474f4c191c000

widgetマスター

モデレータ

2023年9月25日 14:23

ご指摘いただきありがとうございます。

下記Widgetを更新し、ページ割合での表示を修正いたしました！

99%設定にした場合の表示例

：https://sb-draft-preview.squadbeyond.com/articles/LWfldRuaydzkrAWNIxA/draft?token=4bc9ea1f9582d5a995b1b183a41eaf93

widgetマスター

モデレータ

2023年9月25日 16:00

ご要望にお応えして、Squad beyondに新しいWidgetが登場しました！

【Widget名】

注文番号・注文年月日を取得して自動表示※要Javascript

【カテゴリー】

自動表示

【設置例】

https://sb-draft-preview.squadbeyond.com/articles/TaC-hOwuDafWsDfg/draft?token=96db6a929c8b68dcb9a9f05cd01160dd

【備考】

注文番号：URLパラメータ「uid1」から取得して表示します
購入時刻：ページ遷移時に現在時刻を取得して表示します

widgetマスター

モデレータ

2023年9月25日 18:06

【Widget名】

自動応答チャット形式アンケート（選択肢をクリックして次の設問表示）※要javascript

【カテゴリー】

アンケート

【設置例】

https://sb-draft-preview.squadbeyond.com/articles/cxZnPHY_yBQktfbFeSeg/draft?token=4eaeacec0c68f72e0aa4fa3c0b53690f

現在組み込まれているウィジェットを調整する場合は、以下のようにSCCを修正してください。

＜CSS＞

@media screen and (max-width: 600px) {
    .auto-chats {
        font-size: 3vw;
    }
    /* 以下追加 */
    .auto-chats-wrap {
        padding: .25em;
    }
    .auto-chats-item .message {
        grid-template-columns: 6.0em auto;
    }
    .auto-chats-item .baloon,
    .auto-chats-item .answer {
        width: 100%;
        font-size: 1.25em;
        line-height: 2;

    }
    /* 以下削除 */
  .auto-chats-item .baloon,
  .auto-chats-item .answer {
    width: 75%;
  }
}

widgetマスター

モデレータ

2023年9月26日 10:48

ご相談ありがとうございます！

確認させていただきますね！

widgetマスター

モデレータ

2023年9月26日 11:31

お待たせしました！

先にチャットを作動させる方法を共有させていただきます！

CSSを変更

[ 変更前 ]
.l-chat__list__item:not(:first-of-type).is-show {
    display: none;
}

[ 変更後 ]
.l-chat__list__item:not(:first-of-type).is-show {
    display: block;
}

プレビュー

https://sb-draft-preview.squadbeyond.com/articles/YHUCJiCibhAxWSSliQ/draft?token=c7cae9a519e27bcc06b5349799c0904d

ご確認お願いします！