メンバー | Squad voice

コミュニティのコメント

Page 2 of 21

← 1 2 3 … 21 →

widgetマスター

モデレータ
2024年2月22日 10:44

こちらイメージ通りでしょうか？

https://sb-draft-preview.squadbeyond.com/articles/T_QxHiXPPxUWQABJhDfg/draft?token=230484323171d3a958a99133fa268c76
widgetマスター

モデレータ
2024年2月22日 10:45

なるほどですね🤔

修正後のページを共有していただきたいです！
widgetマスター

モデレータ
2024年2月26日 10:23

ありがとうございます！

確認します！
widgetマスター

モデレータ
2024年2月26日 10:49
確認しました！

テーブルセルの間隔を指定するプロパティのborder-collapse の値が separate ( ボーダーラインを離して表示 )になっているために問題が起こっていそうです。

下記 CSS の調整でいかがでしょうか？
```
.tbl-sticky table {
  /* 表の横幅（記事幅を超える部分は横スクロール） */
  width: 900px;
  table-layout: fixed;
  border-collapse: collapse; /* separate を collapseに変更 */
  border-spacing: 0;
  border-top: 1px solid #000;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
```
widgetマスター

モデレータ
2024年2月26日 13:05

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

編集したversionの名前を共有いただけますか？

widgetマスター

モデレータ

2024年2月27日 11:56

おまたせしております！

下記2点ご対応お願いします！

① javascript head を修正バージョンのものに丸ごと入れ替え

【修正バージョン】

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-5CRP5BF');</script>
  <!-- End Google Tag Manager -->
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=AW-11259970126"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'AW-11259970126');
  </script>
<style>
  .body .article-body {
  overflow:hidden;
}
   .tbl-sticky .btn {
    position: relative;
    display: block;
    padding: 1em;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    background-color: #f47118;
    border-bottom: solid 3px #ad5515;
    border-radius: 4px;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }
   .tbl-sticky .btn:hover {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    -webkit-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
    border-bottom: solid 1px #ad5515;
  }
   .tbl-sticky::-webkit-scrollbar {
    display: block;
    overflow: hidden;
    width: 6px;
    background: #eee;
    -webkit-border-radius: 3px;
    border-radius: 3px;
  }
    /*商品紹介のCSS*/
   .box-ad-sp {
    font-size: 16px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    width: calc(100% - 10px);
    border-radius: 0 0 5px 5px;
    margin: 0 auto;
  }
  @media screen and (max-width: 640px) {
     .box-ad-sp {
      font-size: 2.5vw;
    }
  }
   .box-ad-sp .content {
    padding: 0 3% 4%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
   .box-ad-sp .title {
    font-size: 1.5em;
    position: relative;
    width: calc(100% + 10px);
    margin-left: -5px;
    padding: 5px;
    background-image: linear-gradient(135deg, #c2873b 0%, #ffce08 40%, #e1ce08 60%, #c2873b 100%);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    max-width: none;
  }
   .box-ad-sp .title>img {
    position: absolute;
    top: center;
    width: 2em;
  }
   .box-ad-sp .title>a {
    padding: 0.2em 0.2em 0.1em 2em;
    background-color: #ffffff;
    border-radius: 4px;
    width: 100%;
    display: inline-block;
    text-decoration: none;
    color: #2f93e5;
    -webkit-box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
   .box-ad-sp .title::before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 5px transparent;
    border-right: solid 5px #c2873b;
  }
   .box-ad-sp .title::after {
    position: absolute;
    content: '';
    top: 100%;
    right: 0;
    border: none;
    border-bottom: solid 5px transparent;
    border-left: solid 5px #c2873b;
  }
   .box-ad-sp .lead {
    color: #f70000;
    margin-bottom: 20px;
    font-weight: 700;
    text-align: center;
    font-size: 1.1em;
    margin: 1em 0;
  }
   .box-ad-sp .wrap-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
   .box-ad-sp .wrap-item>.item {
    padding: 0 2%;
  }
   .box-ad-sp .wrap-item>.item:nth-child(2) {
    -ms-flex-preferred-size: 65%;
    flex-basis: 65%;
  }
   .box-ad-sp .wrap-item figure {
    padding: 0;
    margin: 0;
  }
   .box-ad-sp .tbl-rate {
    text-align: left;
    width: 100%;
    margin: 0px;
    padding: 0px;
    border-spacing: 0;
  }
   .box-ad-sp .tbl-rate th,
   .box-ad-sp .tbl-rate td {
    border-bottom: 1px solid #ddd;
    padding: 0.5em 0.2em;
  }
   .box-ad-sp .tbl-rate tr:first-of-type th,
   .box-ad-sp .tbl-rate tr:first-of-type td {
    border-top: 1px solid #ddd;
  }
   .box-ad-sp .tbl-rate td:nth-of-type(1) {
    font-weight: 700;
    color: #efbb5a;
    font-size: 1.5em;
    letter-spacing: -0.2em;
  }
   .box-ad-sp .tbl-rate td:nth-of-type(1)>span {
    color: #000
  ;
  }
   .box-ad-sp .tbl-rate td:nth-of-type(2) {
    font-weight: 700;
    color: #000
  ;
  }
   .box-ad-sp .tbl-rate .total {
    background-color: #fffbdd;
    color: #e31f1f;
  }
   .box-ad-sp .tbl-rate .total td:nth-of-type(2) {
    color: #e31f1f;
  }
   .box-ad-sp .tbl-cond {
    text-align: center;
    border-collapse: collapse;
    width: 100%;
    margin: 0px;
    padding: 0px;
    border-spacing: 0;
    border: 1px solid #ddd;
    margin-top: 1em;
  }
   .box-ad-sp .tbl-cond th {
    font-weight: normal;
    background-color: #efefef;
    padding: 0.5em;
    border-top: 1px solid #ddd;
  }
   .box-ad-sp .tbl-cond td {
    font-weight: 700;
    border-top: 1px solid #ddd;
    padding: 0.5em;
  }
   .box-ad-sp .tbl-cond tr:first-of-type th,
   .box-ad-sp .tbl-cond tr:first-of-type td {
    border: none;
  }
   .box-ad-sp .list-check {
    margin: 1em 0 0;
    padding: 0;
    list-style: none;
  }
   .box-ad-sp .list-check>li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-weight: 700;
  }
   .box-ad-sp .list-check>li::before {
    content: "";
    display: inline-block;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin: 0.1em 0.4em 0 0;
    width: 1.2em;
    height: 1.2em;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22_x31_0%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20512%20512%22%20style%3D%22width%3A%20256px%3B%20height%3A%20256px%3B%20opacity%3A%201%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23374149%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cpolygon%20class%3D%22st0%22%20points%3D%22221.18%2C250.621%20153.547%2C183.836%2091.934%2C245.453%2091.668%2C245.719%2091.668%2C245.719%2091.614%2C245.773%20221.207%2C374.516%20512%2C83.02%20450.121%2C21.14%20450.121%2C21.136%20450.121%2C21.136%20450.062%2C21.082%20407.187%2C64.109%20348.152%2C123.258%20%22%20style%3D%22fill%3A%20rgb(223%2C%2086%2C%2086)%3B%22%3E%3C%2Fpolygon%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M439.379%2C211.941v-0.113l-50.34%2C50.484V407.5c0%2C18.266-14.883%2C33.078-33.078%2C33.078H83.418%20c-18.266%2C0-33.078-14.813-33.078-33.078V259.578v-13.66V134.957c0-18.192%2C14.812-33.082%2C33.078-33.082h230.188l6.543-6.539%20l25.546-25.59l17.809-17.766c-0.023-0.004-0.047-0.004-0.066-0.004l0.074-0.078c-2.446-0.211-4.962-0.36-7.551-0.36H83.418%20C37.394%2C51.539%2C0%2C89.008%2C0%2C134.957V407.5c0%2C46.028%2C37.394%2C83.418%2C83.418%2C83.418h272.543c45.954%2C0%2C83.418-37.39%2C83.418-83.418%20V292.227l0.058-80.34L439.379%2C211.941z%22%20style%3D%22fill%3A%20rgb(223%2C%2086%2C%2086)%3B%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  }
   .box-ad-sp .wrap-btn {
    background-color: #fffede;
    padding: 10px 8% 20px;
  }
   .box-ad-sp .link-btn {
    margin-top: 20px;
  }
   .box-ad-sp .link-btn>a {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    font-weight: 700;
    text-shadow: 0 1px 1px #0000004d;
    text-decoration: none;
    background-color: #16ac76;
    border-radius: 5px;
    background: -webkit-gradient(linear, left top, left bottom, from(#36b126), to(#2b8615));
    background: linear-gradient(#36b126, #2b8615);
    -webkit-box-shadow: 0px 4px 0px #105d14;
    box-shadow: 0px 4px 0px #105d14;
    border: 0;
    font-size: 1.2em;
    width: 100%;
    margin: 0 auto;
    padding: 0.8em;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
   .box-ad-sp .link-btn.green>a {
    background: -webkit-gradient(linear, left top, left bottom, from(#36b126), to(#2b8615));
    background: linear-gradient(#36b126, #2b8615);
    -webkit-box-shadow: 0px 4px 0px #105d14;
    box-shadow: 0px 4px 0px #105d14;
  }
   .box-ad-sp .link-btn.blue>a {
    background: -webkit-gradient(linear, left top, left bottom, from(#1E9CDE), to(#0562B2));
    background: linear-gradient(#1E9CDE, #0562B2);
    -webkit-box-shadow: 0 4px 0 #2c527e;
    box-shadow: 0 4px 0 #2c527e;
  }
  /*商品紹介のCSSおわり*/
   .btn-area1 {
    /*ボタン周りの余白。上下の余白｜左右*/
    margin: 0.5em 0;
    /*ボタンの水平方向配置。左寄せは flex-start 、真ん中寄せは center、右寄せはflex-end*/
    justify-content: center;
    display: flex;
  }
   .btn-area-in {
    /* はねる領域の確保 */
    padding: 2em 3% 0;
    position: relative;
  }
   .btn1 {
    display: inline-block;
    /*横幅サイズを変更する場合は下記autoを20%から100%で変更できます*/
    width: auto;
    /*文字数が少ない場合の最低サイズを指定できます*/
    min-width: 250px;
    /*文字の大きさ*/
    font-size: 16px;
    /*ボタンの色*/
    background-color: #4CAF50;
    /*文字の色*/
    color: #fff;
    /*文字の太さ。太字はbold、標準の太さはnormal*/
    font-weight: bold;
    /*水平方向の字間のスペース*/
    letter-spacing: 0.1em;
    /*ボタンの高さを指定*/
    line-height: 1.5;
    /*ボタン内側の余白。上下｜左右*/
    padding: 1rem 2rem;
    /*角を丸くする指定*/
    border-radius: 0.5rem;
    /*ボタンの影の指定。insetを指定することで、影はボックスの内側に描画されます。
    カンマで区切ることで複数の影レイヤーを重ねられます。
    左右の向き｜上下の向き｜ぼかし｜広がり｜色
    rgbaはRed（赤）,Green（緑）,Blue（青）,Alpha（透明度）の略。三色は0から255まで、Alphaは0.1から1まで*/
    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
      /*下記はボタンの影を外側にも指定*/
      7px 7px 20px 0px rgba(0, 0, 0, 0.1),
      4px 4px 5px 0px rgba(0, 0, 0, 0.1);
    /*ホバー時アニメーション。変化の対象、変化の始まりから終わりまでの時間、変化の仕方の順に指定*/
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    box-sizing: border-box;
    animation: bound-anim 1s infinite;
  }
   .btn-area-in::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: -100%;
    margin: auto;
    width: 94%;
    height: 10px;
    border-radius: 50%;
    background: #000;
    filter: blur(6px);
    opacity: 0.9;
    animation: shadow-anim 1s infinite;
  }
   a.btn:hover {
    /*ボタンの上にカーソルを置いた時の背景色を指定*/
    background: #55c55a;
  }
  @keyframes bound-anim {
    0%,
    100% {
      transform: scale(1) translate(0%, 0%);
    }
    30% {
      transform: scale(0.96, 1.04) translate(0%, -60%);
    }
    60% {
      transform: scale(1);
    }
    90% {
      transform: scale(1.05, 0.9) translate(0%, 0%);
    }
  }
  @keyframes shadow-anim {
    0%,
    100% {
      transform: scale(1);
      filter: blur(4px);
    }
    30% {
      transform: scale(0.8, 1);
      filter: blur(8px);
    }
  }
  /*はねるボタンのCSSおわり*/
  /*運用者情報のCSS*/
  .text a{
  color: #000 !important;
    }
  /*運用者情報のCSSおわり*/
  </style>
  <!-- おすすめ商品widget -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
      var accordionTableFunc = accordionTableFunc || {};
      (function(_) {
          const target = '.js-accordionTable';
          _.tableOpen = function(el) {
              $(function() {
                  $('.js-head').click(function() {
                      $(this).toggleClass('is-active');
                      $(this).next('.js-table').slideToggle();
                      $(this).toggleClass("is-open");
                  })
              });
          };
          /**
           * Lazyload画像の読み込みチェック
           * @param {object} object チェックしたい画像
           * @param {callback} callback ロード完了時に実行する関数
           *
           */
          _.lazyImgLoaded = function(object, callback) {
              if (typeof LazyLoad === 'undefined' || !(object.length)) {
                  if (!callback) return;
                  callback();
                  return;
              }
              const target = Array.from(object);
              const promise = target.map(async (img) => {
                  return imgCheck(img);
              });
              Promise.all(promise).then((msg) => {
                  if (!callback) return;
                  callback();
              });
              function imgCheck(img) {
                  let flg = img.classList.contains('loaded');
                  return new Promise((resolve, reject) => {
                      if (flg) {
                          resolve("OK");
                          return;
                      } else {
                          LazyLoad.load(img, {
                              callback_loaded: resolve("OK"),
                              callback_cancel: reject("ERROR"),
                              callback_error: reject("ERROR")
                          }); //画像の読み込み
                      }
                  });
              }
          };
          _.init = function() {
              Array.from(document.querySelectorAll(target), el => {
                  _.tableOpen(el);
              })
          };
      })(accordionTableFunc);
  </script>
  <!-- おすすめ商品widgetここまで -->
  <script type="text/javascript">
      (function(c,l,a,r,i,t,y){
          c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
          t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
          y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
      })(window, document, "clarity", "script", "jrdzsdqasj");
  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/featherlight/1.7.13/featherlight.min.js" integrity="sha512-0UbR6HN0dY8fWN9T7fF658896tsPgnbRREHCNq46J9/JSn8GonXDZmqtTc3qS879GM0zV49b9LPhdc/maKP8Kg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/featherlight/1.7.13/featherlight.gallery.min.css" integrity="sha512-B31/elyDKOSa2yGC1ALSAHkdlJ5FOhZJTNANGUFxWOnVMfKQmekRG2/sNdp6yJPrO7Ae9rlAxUlr0QjiJne01Q==" crossorigin="anonymous" referrerpolicy="no-referrer">
  <script>
      var commentPopupFunc = commentPopupFunc || {};
      (function(_) {
          _.init = function() {
              $('.js-commentBox .js-item').featherlight({
                  root: '.js-popupRead'
              })
          }
      })(commentPopupFunc);
  </script>
  <style>
      .commentBox__area {
         display: flex;
         justify-content: flex-start;
         align-items: flex-start;
         flex-wrap: wrap;
         gap: 10px;
         line-height: 1.5;
         box-sizing: border-box;
      }
     .commentItem {
         width: calc((100% - 20px) / 3);
         height: auto;
         border: 1px solid #ddd;
         cursor: pointer;
         box-sizing: border-box;
      }
     @media screen and (max-width:600px) {
         .commentItem {
             width: calc((100% - 10px) / 2);
             height: auto;
          }
      }
     .commentItem__img {
         position: relative;
      }
     .commentItem__img img {
         width: 100%;
         height: auto;
      }
     .commentItem__img .appIcon {
         width: 20px;
         height: 20px !important;
         position: absolute;
         top: 5px;
         left: 5px;
      }
     .commentItem__text {
         padding: 10px;
         width: calc(100% - 20px);
      }
     .comment__name {
         display: flex;
         justify-content: flex-start;
         align-items: flex-start;
      }
     .comment__name .userIcon {
         margin-right: 5px;
         width: 16px;
         height: auto;
      }
     .comment__name .userIcon img {
         width: 100%;
         height: auto;
      }
     .comment__name .userName {
         font-size: 14px;
         font-weight: bold;
         color: #333;
      }
     .comment__text {
         margin-top: 10px;
         height: 80px !important;
         overflow-y: hidden;
         position: relative;
      }
     .comment__text:after {
         content: '';
         width: 100%;
         height: 100%;
         background: linear-gradient(to bottom, transparent 0%, transparent 60%, #fff 100%);
         position: absolute;
         top: 0;
         left: 0;
      }
     .comment__text .userComment {
         font-size: 13px;
         color: #333;
      }
     .comment__detail {
         display: flex;
         justify-content: space-between;
         align-items: flex-end;
         margin-top: 10px;
      }
     .comment__detail .comment__icon {
         display: inline-flex;
      }
     .comment__detail .comment__icon img {
         width: 14px;
         height: 14px !important;
         margin-right: 4px;
      }
     .comment__detail .date {
         font-size: 11px;
         color: #333;
      }
     .featherlight {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(255, 255, 255, 0.5);
      }
     .featherlight-content {
         position: relative;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         padding: 20px;
      }
     @media screen and (max-width:600px) {
         .featherlight-content {
             padding: 10px;
          }
      }
     .featherlight-close {
         position: absolute;
         top: -20px;
         right: 20px;
         border: none;
         background: none;
         font-size: 24px;
         color: #666;
         z-index: 2;
      }
     @media screen and (max-width:600px) {
         .featherlight-close {
             top: 30px;
             right: 30px;
             border: none;
             background: rgba(255, 255, 255, 0.6);
             border-radius: 2px;
             font-size: 24px;
             color: #666;
          }
      }
     .featherlight-inner {
         display: block;
         max-width: 900px;
         margin: 0 auto;
         box-shadow: rgb(0 0 0 / 20%) 0px 0px 5px 0px !important;
         display: flex;
         justify-content: space-between;
         align-items: flex-start;
         background: #fff;
      }
     @media screen and (max-width:600px) {
         .featherlight-inner {
             max-width: inherit;
             max-height: 95vh;
             overflow-y: scroll;
             padding-bottom: 10px;
             display: flex;
             justify-content: flex-start;
             align-items: center;
             flex-wrap: wrap;
          }
      }
     .featherlight-inner .commentItem__img {
         width: calc(45% - 20px);
         padding: 20px 0 20px 20px;
      }
     @media screen and (max-width:600px) {
         .featherlight-inner .commentItem__img {
             width: 100%;
             padding: 0;
          }
      }
     .featherlight-inner .commentItem__img img {
         width: 100%;
         height: auto;
      }
     .featherlight-inner .commentItem__img .appIcon {
         display: none;
      }
     .featherlight-inner .commentItem__text {
         width: calc(52% - 20px);
         padding: 20px 20px 20px 0;
      }
     @media screen and (max-width:600px) {
         .featherlight-inner .commentItem__text {
             width: calc(100% - 20px);
             padding: 0 10px;
             margin-top: 10px;
          }
      }
     .featherlight-inner .commentItem__text .comment__text {
         max-height: 300px !important;
         height: auto !important;
         overflow-y: auto;
      }
     @media screen and (max-width:600px) {
         .featherlight-inner .commentItem__text .comment__text {
             max-height: inherit !important;
             overflow-y: inherit;
          }
      }
     .featherlight-inner .commentItem__text .comment__name {
         display: flex;
         justify-content: flex-start;
         align-items: center;
      }
     .featherlight-inner .commentItem__text .comment__name .userIcon {
         width: 20px;
         height: 20px !important;
         margin-right: 10px;
      }
     .featherlight-inner .commentItem__text .comment__name .userIcon img {
         width: 100%;
         height: auto;
      }
     .featherlight-inner .commentItem__text .comment__name .userName {
         font-size: 18px;
         font-weight: bold;
         color: #333;
      }
     .featherlight-inner .commentItem__text .comment__text {
         margin-top: 20px;
      }
     .featherlight-inner .commentItem__text .comment__text::after {
         content: none;
      }
     .featherlight-inner .commentItem__text .comment__text .userComment {
         font-size: 14px;
         color: #333;
      }
     .featherlight-inner .commentItem__text .comment__text .userComment+.userComment {
         margin-top: 10px;
      }
     .featherlight-inner .comment__detail {
         display: none;
      }
  </style>

② 表組のWidget内のCSSを修正バージョンのものに丸ごと入れ替え

【修正バージョン】

/*  表組のCSS  */
.tbl-sticky {
  overflow-x: auto;
  max-width: 100%;
  position: relative;
}
 .tbl-sticky table {
  /* 表の横幅（記事幅を超える部分は横スクロール） */
  width: 150%;
  table-layout: fixed;
  border-top: solid 1px #000;
  border-collapse: separate;
  border-spacing: 0;
  box-sizing: border-box;
  text-align: center;
}
 .tbl-sticky table td {
  border-right: 1px solid #000;
  border-bottom: solid 1px #000;
  padding: 0.2em;
  box-sizing: border-box;
}
 .tbl-sticky table th {
  width: 12%;
  position: sticky;
  left: 0;
  z-index: 10;
  /* 左端見出しセルの色 */
  background-color: #FFC266;
  border-right: solid 1px #000;
  border-left: solid 1px #000;
  line-height: 1.25;
  border-top: none;
  border-bottom: none;
  padding: 0.2em;
  box-sizing: border-box;
}
 .tbl-sticky table th::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  border-bottom: solid 1px #000;
  pointer-events: none;
}
 .ranking-item-ratings .result {
  font-size: 1.1em;
  font-weight: 300;
}
 .ranking-item-ratings .rating {
  position: relative;
  font-size: 1.1em;
  min-height: 1.7em;
  line-height: 1.3;
  width: 5em;
  scale: 1.2;
  margin-left: auto;
  margin-right: auto;
}
 .ranking-item-ratings .rating::before,
 .ranking-item-ratings .rating::after {
  content: "★★★★★";
  color: #D6D6D6;
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.5s;
}
 .ranking-item-ratings .rating::after {
  color: #f2cb06;
  overflow: hidden;
  white-space: nowrap;
}
 .ranking-item-ratings .rating[data-rate="0"]::after,
 .ranking-item-ratings .rating[data-rate="0.0"]::after {
  width: 0%;
}
 .ranking-item-ratings .rating[data-rate="0.1"]::after,
 .ranking-item-ratings .rating[data-rate="0.1.0"]::after {
  width: 2%;
}
 .ranking-item-ratings .rating[data-rate="0.2"]::after,
 .ranking-item-ratings .rating[data-rate="0.2.0"]::after {
  width: 4%;
}
 .ranking-item-ratings .rating[data-rate="0.3"]::after,
 .ranking-item-ratings .rating[data-rate="0.3.0"]::after {
  width: 6%;
}
 .ranking-item-ratings .rating[data-rate="0.4"]::after,
 .ranking-item-ratings .rating[data-rate="0.4.0"]::after {
  width: 8%;
}
 .ranking-item-ratings .rating[data-rate="0.5"]::after,
 .ranking-item-ratings .rating[data-rate="0.5.0"]::after {
  width: 10%;
}
 .ranking-item-ratings .rating[data-rate="0.6"]::after,
 .ranking-item-ratings .rating[data-rate="0.6.0"]::after {
  width: 12%;
}
 .ranking-item-ratings .rating[data-rate="0.7"]::after,
 .ranking-item-ratings .rating[data-rate="0.7.0"]::after {
  width: 14%;
}
 .ranking-item-ratings .rating[data-rate="0.8"]::after,
 .ranking-item-ratings .rating[data-rate="0.8.0"]::after {
  width: 16%;
}
 .ranking-item-ratings .rating[data-rate="0.9"]::after,
 .ranking-item-ratings .rating[data-rate="0.9.0"]::after {
  width: 18%;
}
 .ranking-item-ratings .rating[data-rate="1"]::after,
 .ranking-item-ratings .rating[data-rate="1.0"]::after {
  width: 20%;
}
 .ranking-item-ratings .rating[data-rate="1.1"]::after,
 .ranking-item-ratings .rating[data-rate="1.1.0"]::after {
  width: 22%;
}
 .ranking-item-ratings .rating[data-rate="1.2"]::after,
 .ranking-item-ratings .rating[data-rate="1.2.0"]::after {
  width: 24%;
}
 .ranking-item-ratings .rating[data-rate="1.3"]::after,
 .ranking-item-ratings .rating[data-rate="1.3.0"]::after {
  width: 26%;
}
 .ranking-item-ratings .rating[data-rate="1.4"]::after,
 .ranking-item-ratings .rating[data-rate="1.4.0"]::after {
  width: 28%;
}
 .ranking-item-ratings .rating[data-rate="1.5"]::after,
 .ranking-item-ratings .rating[data-rate="1.5.0"]::after {
  width: 30%;
}
 .ranking-item-ratings .rating[data-rate="1.6"]::after,
 .ranking-item-ratings .rating[data-rate="1.6.0"]::after {
  width: 32%;
}
 .ranking-item-ratings .rating[data-rate="1.7"]::after,
 .ranking-item-ratings .rating[data-rate="1.7.0"]::after {
  width: 34%;
}
 .ranking-item-ratings .rating[data-rate="1.8"]::after,
 .ranking-item-ratings .rating[data-rate="1.8.0"]::after {
  width: 36%;
}
 .ranking-item-ratings .rating[data-rate="1.9"]::after,
 .ranking-item-ratings .rating[data-rate="1.9.0"]::after {
  width: 38%;
}
 .ranking-item-ratings .rating[data-rate="2"]::after,
 .ranking-item-ratings .rating[data-rate="2.0"]::after {
  width: 40%;
}
 .ranking-item-ratings .rating[data-rate="2.1"]::after,
 .ranking-item-ratings .rating[data-rate="2.1.0"]::after {
  width: 42%;
}
 .ranking-item-ratings .rating[data-rate="2.2"]::after,
 .ranking-item-ratings .rating[data-rate="2.2.0"]::after {
  width: 44%;
}
 .ranking-item-ratings .rating[data-rate="2.3"]::after,
 .ranking-item-ratings .rating[data-rate="2.3.0"]::after {
  width: 46%;
}
 .ranking-item-ratings .rating[data-rate="2.4"]::after,
 .ranking-item-ratings .rating[data-rate="2.4.0"]::after {
  width: 48%;
}
 .ranking-item-ratings .rating[data-rate="2.5"]::after,
 .ranking-item-ratings .rating[data-rate="2.5.0"]::after {
  width: 50%;
}
 .ranking-item-ratings .rating[data-rate="2.6"]::after,
 .ranking-item-ratings .rating[data-rate="2.6.0"]::after {
  width: 52%;
}
 .ranking-item-ratings .rating[data-rate="2.7"]::after,
 .ranking-item-ratings .rating[data-rate="2.7.0"]::after {
  width: 54%;
}
 .ranking-item-ratings .rating[data-rate="2.8"]::after,
 .ranking-item-ratings .rating[data-rate="2.8.0"]::after {
  width: 56%;
}
 .ranking-item-ratings .rating[data-rate="2.9"]::after,
 .ranking-item-ratings .rating[data-rate="2.9.0"]::after {
  width: 58%;
}
 .ranking-item-ratings .rating[data-rate="3"]::after,
 .ranking-item-ratings .rating[data-rate="3.0"]::after {
  width: 60%;
}
 .ranking-item-ratings .rating[data-rate="3.1"]::after,
 .ranking-item-ratings .rating[data-rate="3.1.0"]::after {
  width: 62%;
}
 .ranking-item-ratings .rating[data-rate="3.2"]::after,
 .ranking-item-ratings .rating[data-rate="3.2.0"]::after {
  width: 64%;
}
 .ranking-item-ratings .rating[data-rate="3.3"]::after,
 .ranking-item-ratings .rating[data-rate="3.3.0"]::after {
  width: 66%;
}
 .ranking-item-ratings .rating[data-rate="3.4"]::after,
 .ranking-item-ratings .rating[data-rate="3.4.0"]::after {
  width: 68%;
}
 .ranking-item-ratings .rating[data-rate="3.5"]::after,
 .ranking-item-ratings .rating[data-rate="3.5.0"]::after {
  width: 70%;
}
 .ranking-item-ratings .rating[data-rate="3.6"]::after,
 .ranking-item-ratings .rating[data-rate="3.6.0"]::after {
  width: 72%;
}
 .ranking-item-ratings .rating[data-rate="3.7"]::after,
 .ranking-item-ratings .rating[data-rate="3.7.0"]::after {
  width: 74%;
}
 .ranking-item-ratings .rating[data-rate="3.8"]::after,
 .ranking-item-ratings .rating[data-rate="3.8.0"]::after {
  width: 76%;
}
 .ranking-item-ratings .rating[data-rate="3.9"]::after,
 .ranking-item-ratings .rating[data-rate="3.9.0"]::after {
  width: 78%;
}
 .ranking-item-ratings .rating[data-rate="4"]::after,
 .ranking-item-ratings .rating[data-rate="4.0"]::after {
  width: 80%;
}
 .ranking-item-ratings .rating[data-rate="4.1"]::after,
 .ranking-item-ratings .rating[data-rate="4.1.0"]::after {
  width: 82%;
}
 .ranking-item-ratings .rating[data-rate="4.2"]::after,
 .ranking-item-ratings .rating[data-rate="4.2.0"]::after {
  width: 84%;
}
 .ranking-item-ratings .rating[data-rate="4.3"]::after,
 .ranking-item-ratings .rating[data-rate="4.3.0"]::after {
  width: 86%;
}
 .ranking-item-ratings .rating[data-rate="4.4"]::after,
 .ranking-item-ratings .rating[data-rate="4.4.0"]::after {
  width: 88%;
}
 .ranking-item-ratings .rating[data-rate="4.5"]::after,
 .ranking-item-ratings .rating[data-rate="4.5.0"]::after {
  width: 90%;
}
 .ranking-item-ratings .rating[data-rate="4.6"]::after,
 .ranking-item-ratings .rating[data-rate="4.6.0"]::after {
  width: 92%;
}
 .ranking-item-ratings .rating[data-rate="4.7"]::after,
 .ranking-item-ratings .rating[data-rate="4.7.0"]::after {
  width: 94%;
}
 .ranking-item-ratings .rating[data-rate="4.8"]::after,
 .ranking-item-ratings .rating[data-rate="4.8.0"]::after {
  width: 96%;
}
 .ranking-item-ratings .rating[data-rate="4.9"]::after,
 .ranking-item-ratings .rating[data-rate="4.9.0"]::after {
  width: 98%;
}
 .ranking-item-ratings .rating[data-rate="5"]::after,
 .ranking-item-ratings .rating[data-rate="5.0"]::after {
  width: 100%;
}

widgetマスター

モデレータ
2024年3月13日 12:44

おまたせしております！

作成しました！

確認お願いします💫

●登録カテゴリーとwidget名

①アンケート > シンプルなアンケート（単一、複数選択可）

②アンケート > シンプルなアンケート（選択肢によってコンテンツ表示、単一選択のみ）※要javascript

●設置例

①https://sb-draft-preview.squadbeyond.com/articles/exDvd_SSNHy_lxGkf_w/draft?token=3c30e2bb6f6f9b9e689f3eb56339dded

②https://sb-draft-preview.squadbeyond.com/articles/LfAujyQEPjMPkSjlAtNg/draft?token=f120708a4b52fd3330a8665d972c2c0c
widgetマスター

モデレータ
2024年3月13日 15:03

ご依頼ありがとうございます！

確認します！
widgetマスター

モデレータ
2024年3月13日 16:07

確認してきました！

こちらのwidgetが近いと思いますがいかがでしょうか？

※名前や年齢入力の箇所はSquad beyondでは実装できません。

チャット形式アンケート(チェックした回答がメッセージとして表示) ※要Javascript

参考

https://sb-draft-preview.squadbeyond.com/articles/XURYAaEtlXv-IDmWv-Ew/draft?token=a2788581bc64d24f49937ef456c9189d
widgetマスター

モデレータ
2024年3月13日 17:09

＞名前や年齢入力の箇所をSquad beyondで実装できるようにしていきたいです。。

現状のSquad beyondの機能では実装できない内容となっております。

希望に添えず申し訳ございません。
widgetマスター

モデレータ
2024年2月22日 19:49

よかったです！

どんどん活用してください💫

Widget名：アプリ比較表タブ３つで切り替え ※要Javascript(囲み枠)

カテゴリ：表
widgetマスター

モデレータ
2024年3月7日 10:34

＞こちらはQ2のパターンのものだけを複数回使用するのは可能でしょうか？？

→Q1の回答後にも画像を表示させたいということでしょうか？
widgetマスター

モデレータ
2024年3月7日 12:04

＞Q2で作成していただいた設問+出し分けの形を単体で使用したいです。

→出し分けのパターンを共有いただけますか？

→また、この場合は1問だけということでしょうか？

＞また設問1.2は出し分け、設問3は出し分けなし（ボタンを押すだけ）などでも設定したいので同じデザインの出し分けなしタイプも欲しいです。

→こちらのwidget(https://sb-draft-preview.squadbeyond.com/articles/enyzDsWFdXVWtbcECEpoQ/draft?token=878cda3e3abdbfdd8d78576b3840be2f)にQ3を追加したいということでしょうか？

ご確認よろしくお願いいたします。
widgetマスター

モデレータ
2024年3月7日 16:19

共有ありがとうございます！

かしこまりました！

「出し分け」についてイメージがわかず、例を共有していただくことは可能でしょうか？

もし可能であればイメージに合うページも共有いただきたいです。

よろしくお願いいたします。
widgetマスター

モデレータ
2024年3月7日 16:48

共有ありがとうございます！

作成させていただきます！

Page 2 of 21

← 1 2 3 … 21 →