コミュニティのコメント

Page 21 of 21
1 … 20 21

  • widgetマスター

    モデレータ
    2023年8月14日 17:26

    下記のコードを追加してみてください💫

    javascript head 

    <style>
body .article-body {
    padding-top: 0 !important;
}
</style>

    CSS

    video {
    margin: 0 !important;
}

  • widgetマスター

    モデレータ
    2023年8月14日 17:28

    CSSの「.speech-bubble」のclassに「transform: rotate(-5deg);」を追加してください！


    .speech-bubble {
    max-width: 40%;
    background: #efefef;
    border: 1px solid #a7a7a7;
    border-radius: 4px;
    box-shadow: 4px 4px 0 0#ccc;
    padding: 15px;
    line-height: 1.3;
    margin: 10px auto 40px;
    position: relative;
    box-sizing: border-box;
    transform: rotate(-5deg); /* 追加 */
}

  • widgetマスター

    モデレータ
    2023年8月14日 17:29

    Widgetには修正箇所が無いので新しくHTMLタグとCSSを追加して対応してみてください！

    HTML

    <span class="bg">背景をつけたいテキスト</span>

    ・背景をつけたいテキストを適当なclassをつけた<span>タグで囲う

    CSS

    .bg {
    background-color: #ffffff;
    display: inline-block;
    padding: 10px;
}

    ・上記で追加したclassに対して背景色と余白を設定する

  • widgetマスター

    モデレータ
    2023年8月15日 12:21

    <div class=”revealarea js-reveal is-hidden”>の「is-hidden」を削除してください！

    そうすれば最初から表示されます😄

  • widgetマスター

    モデレータ
    2023年8月15日 12:29

    下記 javascript を調整していただけますでしょうか？

    [ 調整前 ]
let scrollPoint = next.getBoundingClientRect().top + window.pageYOffset;

[ 調整後 ]
let scrollPoint = next.getBoundingClientRect().top + window.pageYOffset - 50; //50px 上部に余白を持たせてます。こちらの数値はお好みで調整してください。

  • widgetマスター

    モデレータ
    2023年8月16日 17:31

    CSSにコードを追加することで小さくできます！

    「.think p 」の箇所に「font-size: 18px;」を追加してみてください！

    (数字は好みに合わせて調節してください)


    追加後


    .think p {
  margin: 0;
  padding: 0;
  letter-spacing: -0.01em;
  font-size: 18px;
}
    考え事の吹き出し（左アイコン）吹き出し.png 19 KB 画像ファイル — クリックして 見る

  • widgetマスター

    モデレータ
    2023年8月16日 18:22

    前提として、こちらの選択肢を変更すると他の設問の見た目にも影響します！

    なのでまず変更したい選択肢の修正方法をお伝えした後に他の設問の修正方法もお伝えします！

    【変更したい選択肢の修正方法】

    CSSの「.question-reveal-scroll input+label .btn」の余計な記述を削除して、高さを指定する記述を追加します！

    .question-reveal-scroll input+label .btn {
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 20px 0 20px 50px;
    font-weight: bold;
    background-color: #EBEBEB;
    line-height: 1.6;
    position: relative;
    /*display: block;これ不要*/

/*ここから追加*/
    height: 60px!important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

    【他の設問の修正方法】

    CSSの「.question-reveal-scroll .linkbox.btn-two .btn」に記述を追加します。

    .question-reveal-scroll .linkbox.btn-two .btn {
    font-size: 14px;
    color: #fff;
    background: #8f8d8d;
    padding: 10px;
    text-align: center;
    border: none;
    border-radius: 8px;
    box-shadow: 0 6px 0 #828080;
    transition: all 0.2s;
    cursor: pointer;

/*ここから追加*/
    height: auto!important;
    display: block;
}


    修正後アンケート選択肢により隠しコンテンツを表示（スクロール・最後の質問に回答すると下部表示）※要javascriptアンケート.png 37 KB 画像ファイル — クリックして 見る

  • widgetマスター

    モデレータ
    2023年8月22日 10:12

    <input>タグのtypeをtextからnumberに変更することで数値に限定することができます!

    【変更前】

    <div class="wrap-input-text">
    約<input type="text" placeholder="0">万円
</div>

    【変更後】

    <div class="wrap-input-text">
    約<input type="number" placeholder="0">万円
</div>
    入力欄付きリンク2.jpg 135 KB 画像ファイル — クリックして 見る

  • widgetマスター

    モデレータ
    2023年8月22日 11:12

    まずはHTMLのYes/Noボタンにしたい部分の<div class=”linkbox”> にbool クラスを追加してください！

    【変更前】

    <div class="linkbox">
    <input id="q1-yes" type="radio" name="q1" value="yes"><label for="q1-yes">
        <div class="btn">Yes</div>
    </label><input id="q1-no" type="radio" name="q1" value="no"><label for="q1-no">
        <div class="btn">No</div>
    </label>
</div>

    【変更後】

    <div class="linkbox bool">
    <input id="q1-yes" type="radio" name="q1" value="yes"><label for="q1-yes">
        <div class="btn">Yes</div>
    </label><input id="q1-no" type="radio" name="q1" value="no"><label for="q1-no">
        <div class="btn">No</div>
    </label>
</div>

    その後にこちらのCSSを追加してください！

    ※既存のボタンを上書きするためそれより下の行に追加してください（一番下でOK）

    .question-reveal-scroll .linkbox.bool {
  list-style: none;
  overflow: hidden;
  margin: 0;
  padding: 4.68% 9.37% 5% 9.37%;
  display: flex;
  box-sizing: border-box;
}

 .question-reveal-scroll .linkbox.bool label {
  width: 50%;
}

 .question-reveal-scroll .linkbox.bool label .btn {
  display: block;
  width: 100%;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: contain;
  padding: 10%;
  border-radius: 8px;
  font-size: 26px;
  line-height: 1;
  color: #fff;
  font-weight: bold;
  background: #aaa;
  border-bottom: 5px solid #666;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
  transition: margin-top 0.1s, border-bottom-width 0.1s;
  box-sizing: border-box;
}

 .question-reveal-scroll .linkbox.bool label:nth-of-type(1) .btn {
  color: #fff;
  background: #c9171e;
  border-color: #752100;
}

 .question-reveal-scroll .linkbox.bool label:nth-of-type(2) .btn {
  color: #fff;
  background: #444444;
  border-color: #222222;
}

 .question-reveal-scroll .linkbox.bool input[type=radio]:checked+label .btn,
 .question-reveal-scroll .linkbox.bool label .btn:hover {
  margin-top: 3px;
  border-bottom-width: 2px;
}

  • widgetマスター

    モデレータ
    2023年8月22日 16:09

    CSSの「.choice-group .swiper」の「overflow: clip;」を削除して下さいませ。


    .choice-group .swiper {
  ...省略...
  overflow: clip; ← これを削除して下さい
  ...省略...
}

  • widgetマスター

    モデレータ
    2023年8月22日 19:07

    まずはCSSに下記コードを追加してください！

    .is-hide {
  display: none !important;
}

    HTMLはclass名を変更します！

    【変更前】

    <div class="revealarea js-reveal is-hidden">
    完了ボタンを押すと表示される部分。...以下省略
</div>

    【変更後】

    <div class="questionArea js-form-radio is-hide">
    完了ボタンを押すと表示される部分。...以下省略
</div>

    JavaScript headはコードを適切な位置に追加してください！

    【変更前】

    radioList.forEach((radio) => {
  radioName.push(radio.name);
  radio.addEventListener('change', (e) => {
    let self = e.target;
    let list = el.querySelectorAll(radioSet);
    let current = self.closest(radioSet);
    let currentNo = Array.prototype.indexOf.call(list, current);
    let finishBtn = el.querySelector('.js-switch-btn');
    let next;

    if (list.length > currentNo + 1) {
      next = list[currentNo + 1];
    } else {
      next = finishBtn;
    }

    let scrollPoint = next.getBoundingClientRect().top + window.pageYOffset + next.clientHeight / 2 - window.innerHeight / 2;

    _.scrollTo(scrollPoint, option.duration);

    let btnFlg = true;
    let form = el.querySelector('form[name="form-scroll-enquete"]');

    radioName.forEach((name) => {
      let radioGroup = form[name];
      if (!radioGroup.value) {
        btnFlg = false;
      }
    });
  });
});

    【変更後】

    radioList.forEach((radio) => {
  radioName.push(radio.name);
  radio.addEventListener('change', (e) => {
    let self = e.target;
    let list = el.querySelectorAll(radioSet);
    let current = self.closest(radioSet);
    let currentNo = Array.prototype.indexOf.call(list, current);
    let finishBtn = el.querySelector('.js-switch-btn');
    let next;

    if (list.length > currentNo + 1) {
      next = list[currentNo + 1];
    } else {
      next = finishBtn;
    }

    //追加ここから
    if (next.classList.contains('is-hide')) {
      next.classList.remove('is-hide');
    }
    //追加ここまで

    let scrollPoint = next.getBoundingClientRect().top + window.pageYOffset + next.clientHeight / 2 - window.innerHeight / 2;

    _.scrollTo(scrollPoint, option.duration);

    let btnFlg = true;
    let form = el.querySelector('form[name="form-scroll-enquete"]');

    radioName.forEach((name) => {
      let radioGroup = form[name];
      if (!radioGroup.value) {
        btnFlg = false;
      }
    });
  });
});

    上記を行ってもらえば、「ボタン」を削除してもQ4の選択肢を押すことで隠れている部分が表示できます！

    操作イメージ：https://t.gyazo.com/teams/squadbeyond/d5533d96275664d5def4f463e8d60031.mp4

  • widgetマスター

    モデレータ
    2023年8月24日 15:35

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

    カテゴリー：アンケート
    Widget名：投票数表示アンケート（日毎に指定数加算、選択で+1加算、単一選択のみ）※要javascript
    プレビュー：https://sb-draft-preview.squadbeyond.com/articles/v_AuiGPnk-izIAckOVA/draft?token=0c5c2b46540bfbf6bad2fc17e37568fd

    HTML部分のdata-plus属性と初期の投票数を変更することで、票数を任意の数字に設定することが可能です。

    例えば、初期の投票数を1500にし、1日あたりの投票数の増加分を30にしたい場合は、以下のように変更します。

    html
    <p class="vote"><span class="js-vote" data-plus="30">1,500</span>票</p>

  • widgetマスター

    モデレータ
    2023年8月24日 18:22

    こちらはあくまでもサイトを開いてからカウントダウンが開始される仕様となっております。

    そのため、以下のように設定が可能です。

    uid: 'sbAddTimeCountdown02'　←02などを加え、名前を変えます
    coutdownhour: 120　←任意の残り時間を設定できます。

    この場合、　120h / 24h(1d) = 5d　すなわちキャッシュが残ってる限り、サイトを開いてから5日間はカウントダウンをする設定となります。

    なお、設定の際にキャッシュが影響して数値が変更できない場合も確認されます。その場合は、シークレットウィンドウ等をお試しください。サイトを開いてからカウントダウンが開始されるため、日時を変更したい場合はひとつひとつページを作り直す必要があるようなイメージをお持ちいただければと思います。

  • widgetマスター

    モデレータ
    2023年8月25日 11:34

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

    .check-bg-list span {
        width: 100%;
        height: 100%;
        min-height: 65px; /* 追加 */
        display: flex; /* 変更 */
        align-items: center; /* 追加 */
        position: relative;
        padding: 10px; /* 追加 */
        padding-left: calc(8% + 30px); /* 変更 */
        font-size: 5vw;
        border: solid 1px #ccc;
        border-radius: 7px;
        box-sizing: border-box; /* 追加 */
        height: 65px; /* 削除 */
        line-height: 65px; /* 削除 */
    }
Page 21 of 21
1 … 20 21

報告

Harassment or bullying behavior
Contains mature or sensitive content
Contains misleading or false information
Contains abusive or derogatory content
Contains spam, fake content or potential malware

ブロックメンバー？

このメンバーをブロックすることを確認してください。

次のことができなくなります。

  • ブロックされたメンバーの投稿を見る
  • 投稿でこのメンバーをメンションする

このプロセスが完了するまで数分お待ちください。

報告

あなたはすでにこれを報告しました