メンバー | Squad voice

widgetマスター

モデレータ

2023年8月25日 13:18

下記CSSの修正を試してみてくださいませ。

.ratingTable__area table {
    width: 100%;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-collapse: collapse;
    font-size: 14px;
    text-align: center;
    position: relative;
    table-layout: fixed; /* 追加 */
}

.ratingTable__area table thead.is-sticky {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 9;
    vertical-align: top; /* 追加 */
}

widgetマスター

モデレータ

2023年8月25日 17:33

こちらですが、アンカーリンクでのスクロールアニメーションがスマホで動作しないとの事ですが、SmoothScroll のプラグインがスマホ表示によみこまれていないのが原因のようでございます。

下記をタグ設定 > javascript body に追加いただけますでしょうか？

<script>
  if(typeof (SmoothScroll) == 'undefined'){
    let tag = document.createElement('script');
    tag.src = "https://production.static.squadbeyond.com/smooth-scroll/16.1.3/smooth-scroll.min.js";
    let firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }
</script>

widgetマスター

モデレータ

2023年8月28日 10:30

ご依頼をもとに、Squad beyondに新規Widgetが登場しました！

【ウィジェット名】カルーセル（左に連動するサムネイル）※要Javascript

【カテゴリ】アクション

【設置例】https://sb-draft-preview.squadbeyond.com/articles/DKfHRfvMnGBqDKoTmnQ/draft?token=161894d78a14a6d95662f3dbe03ddc3b

※レイアウトの兼ね合いからバージョン配信幅 100% のご利用を推奨いたします

widgetマスター

モデレータ

2023年8月28日 12:16

version内に設定されている最大幅（max-width）の設定が原因のようでございます。

下記CSS調整でいかがでしょうか？

■ version内全体の画像幅を調整　javascript head に追加

body .article-body img {
  width: 100%;
}

■ 添付画像の箇所の調整・追加

.form-wrapper {
  max-width: 100%; /* 570px を 100% に変更 */
}
.form-wrapper img{
  max-width: 100%; /* 追加 */
}

■ よくある質問コンテンツの調整

.acd_wrap {
  max-width: 100%; /* 570px を 100% に変更 */
}

widgetマスター

モデレータ

2023年8月28日 17:05

恐らくCSSを編集された際に、下記CSSのプロパティの設定を間違ってしまわれたのが原因かと思われます。

【現状】

.image-question-item .answer label {
    display: absolute; /* ← ここが原因です */
    cursor: pointer;
    position: relative;
    height: 92px;
}

【修正後】

.image-question-item .answer label {
    display: block; /* ← 元にもどす */
    cursor: pointer;
    position: relative;
    height: 92px;
}

Q4だけなぜかは不明ですが、PCの方はブラウザが自動で調整してくれているものと思われます。

widgetマスター

モデレータ

2023年8月29日 16:24

プレビューURLに、googleフォントが読み込めていないからだと思われます。

下記を Javawscript head に追加でいかがでしょうか？

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

widgetマスター

モデレータ

2023年8月29日 16:38

以下の修正をお試しください。

    <div class="questionArea js-form-radio no-scroll">　/* ← no-scrollを削除してください */
            <div class="question__numBox">
                <ul class="numItems">
                    <li class="item">01</li>
                    <li class="item current">02</li>
                    <li class="item">03</li>
                </ul>
            </div>

この調整で Q1 → Q2 → Q3 → 画像となると思われます。

widgetマスター

モデレータ

2023年8月30日 12:38

こちら、既存Widget【クリックすると画像置換※要javascript(画像)】がご要望内容に近いかと思います。ご確認ください。

https://sb-draft-preview.squadbeyond.com/articles/pbwHMDKaRYrnkpVbtSwQ/draft?token=3fbea3896d51307a3d0dc29a5fa4b9c0

widgetマスター

モデレータ

2023年8月30日 12:59

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

ウィジェット名: 査定カウンター（無限ループ/数値・スピード調整）※要Javascript

カテゴリ: 自動表示

設置例: https://sb-draft-preview.squadbeyond.com/articles/BVQfWTcCOaSi_dxsew/draft?token=435b493d2f3ed648b1c1f82e04b98b1c

[ 確認事項 ]

■ ストップする数値について

下記 javascript で設定が可能です。

ストップする数値をカンマ(,)区切りでここに設定して下さい。

-- 初期設定 --
const settingsNumber = [
  78000000,
  56000000,
  62000000,
];

■アニメーション

下記 Javascript で設定が可能です。

-- 初期設定 --
const settingsAnimation = {
  duration: 2000, //カウンターが回転する時間(1秒 = 1000)
  delay: 1000, // ストップして再開する時間(1秒 = 1000)
  animation: 'cubic-bezier(0.65,-0.01, 0.12, 0.91)', //回転のアニメーション
}

■ 単位表示の設定

下記 HTMLのせ設定でカウンターの最後に単位が追加されます。

<div class="random-counter-content" data-unit="円"></div>

単位が不要な場合は以下のようにご設定ください。

 <div class="random-counter-content" data-unit=""></div>

widgetマスター

モデレータ

2023年8月31日 13:25

お待たせいたしました！！！

タグ設定のJavaScript headから下記記述を削除してください💫

●タグ設定 1820行辺り
.icon {
  position: relative;
  font-size: 15px;
  font-weight: bold;
  color: #ff6a6a;
  background: #fffff4;
  line-height: 1.4;
  padding: 11px 11px 11px 32px;
  border-top: dotted 1px gray;
  border-bottom: dotted 1px gray;
}

 .icon:before,
 .icon:after {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  transform: translateY(-50%);
}

 .icon:before {
  position: absolute;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #ff6a6a;
  left: 5px;
}

 .icon:after {
  left: 5px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg) translateY(-65%);
  }

widgetマスター

モデレータ

2023年8月31日 15:38

ページ確認いたしました！

Q1のクリックが a タグにて下部のコンテンツと連動するよう jQueryで設定されており、色が変わる仕様が aタグ配下のチェックボックスのチェック状態により画像が変わる仕様となっているようでございます。

外部ファイル : https://production.static.squadbeyond.com/uploads/article_asset_files/file/4668/454a5fc1-8335-49f1-9aeb-865e5f046bf1.js

おそらく、ページ環境の違いで aタグのクリックが、

配下のチェックボックスのチェックまで伝達していないものと思われます。。。

解消するには連動している外部ファイルのjQueeryに、

下記処理を追加すれば解消できそうです。

$(function(){
    $('.section').hide();
    $('.secList').on('click',function(){   
      $('.section').not($($(this).attr('href'))).hide();
      // フェードイン・アウトのアニメーション付で、表示・非表示を交互に実行
    //   $($(this).attr('href')).fadeToggle(800);
      //   show を使うと、表示するだけ （ 同じボタンを何回押しても変わらない ）
      $($(this).attr('href')).show();
       /*追加ここから*/
        $('.secList').find('input').prop('checked',false);
        $(this).find('input').prop('checked',true);
       /* 追加ここまで */
      $("html,body").animate({scrollTop: $('#q1_scroll').offset().top});
    });
  });

外部ファイルで編集が難しいという事でしたら、

下記javascript をjavascript bodyに追加していただければと思います。

<script>
const secListClick = (event) => {
    const inputElement = event.currentTarget.querySelector('input');
    if (inputElement && inputElement.type === 'radio') {
        inputElement.checked = true;
    }
}
const triggers = document.querySelectorAll('.secList');
triggers.forEach((trigger) => {
    trigger.addEventListener('click', secListClick);
});
</script>

ご確認のほど宜しくお願いいたします

widgetマスター

モデレータ

2023年8月31日 16:54

ご要望に応じて、Squad beyondに新規Widgetが登場しました！

Widget名：絞り込み検索（条件に合う記事のみ表示｜別ページ設置可能）※要javascript

カテゴリ：自動表示

設置例：

https://sb-draft-preview.squadbeyond.com/articles/RUsLhk_OXsvLazqlaCFkA/draft?token=409496f52a9e606531327ad20a35eef1

こちらのWidgetには絞り込み検索フォームと検索結果の両方のHTMLコードが入っております。別ページに検索結果を表示させるには、該当コードを切り取り、別のVersionに貼り付けてご使用ください。

参考画像：https://squadbeyond.gyazo.com/45cc9f387899c6cbebe075897016f29a

widgetマスター

モデレータ

2023年9月4日 16:09

ご要望に応じて、Squad beyondに新規Widgetが登場しました！

Widget名：身長体重からサイズ出力※要javascript

カテゴリ：自動表示

設置例：https://sb-draft-preview.squadbeyond.com/articles/wYSLWJsoFVfKLWXcTWrjA/draft?token=5544d9e36fee568305e2577b1ee95e64

widgetマスター

モデレータ

2023年9月5日 17:16

おそらくスマホ表示時にスムーススクロールプラグインが読み込まれない問題かと思いますので、JavaScript bodyに下記コードを追加してみてください。

<script>
  if(typeof (SmoothScroll) == 'undefined'){
    let tag = document.createElement('script');
    tag.src = "https://production.static.squadbeyond.com/smooth-scroll/16.1.3/smooth-scroll.min.js";
    let firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }
</script>

widgetマスター

モデレータ

2023年8月31日 14:26

よかったです！

いつでもお気軽にご相談ください☺

widgetマスター

コミュニティのコメント