メンバー | Squad voice

widgetマスター

モデレータ

2023年12月19日 15:54

Widget作成しました❄

————

Widget名: BGMを再生・停止・ダウンロード ※要Javascript

カテゴリ: 自動表示

設置例: https://sb-draft-preview.squadbeyond.com/articles/etlcnWSaoWiNZyRtLUw/draft?token=149458ff438528b4106ce864d66246d3

※Squad beyondに音声ファイルのアップロードができないため、設置例は音声ファイル読み込みエラーの表示となっております。

※beyond上で音声ファイルURLを設定して動作の確認済みです

————

[ 音声ファイルのURL指定 ]

HTMLの ○○○○の部分に音声ファイルのURLを入れて下さい。

※Squad beyondに音声ファイルのアップロードはできません

<audio src="○○○○" preload="metadata"></audio>

widgetマスター

モデレータ

2023年12月19日 19:54

Widget作成いたしました☺

—–

Widget名: 画像が自動で無限ループするカルーセル※要Javascript

カテゴリ: 自動表示

設置例: https://sb-draft-preview.squadbeyond.com/articles/UqToDrDagGTqMuceqJwQ/draft?token=232bff92e4b82ff086771f099b95dc65

—–

[ 非表示コンテンツの編集プレビューについて ]

最も外側のHTMLにclass名「EDITABLE」を追加/削除した場合にプレビューでの表示/非表示が可能です。このWidgetでは下記HTMLの部分になります。

<div class="swiper js-infinite-loop-carousel EDITABLE"> ... </div>

[ 画像表示枚数について（ブラウザ表示）]

デフォルトでは 6枚表示となっております。

調整する場合は下記 javascript にて変更してください。

[8行目] slidesPerView: 6, //←数値を変更することで表示枚数を変更できます。

[ 画像表示枚数について（エディタでの表示）]

現在は横に 6枚表示する設定にしております。

エディタ編集専用の下記CSSを編集することで、エディタ上の表示枚数を変更できます。

grid-template-columns の中の下記【6】の数値を任意の数値にする事で横並びの画像表示を調整する事ができます。

[49行目] grid-template-columns: repeat(auto-fit, calc((100% / 6) - 10px));

widgetマスター

モデレータ

2023年12月20日 16:00

テーブルを4列から2列にしたいとのことで、以下の様に修正してみてください。

(3箇所)

●html
<table>
 <tbody>
  <tr>
   <th></th>
   <td></td>
   <th></th>
   <td></td>
  <tr>
  <tr>
   ~
  </tr>
 </tbody>
</table>
 ↓↓↓
<table>
 <tbody>
  <tr>
   <th></th>
   <td></td>
  <tr>
  <tr>
   <th></th>
   <td></td>
  <tr>
  <tr>
   ~
  </tr>
 </tbody>
</table>

trの中にあったth*2, td*2を1個ずつにすることで2列になります。

実際のページだとこうなります。

【変更前】

<tr style="margin: 0px; padding: 0px; border: 0px; letter-spacing: 0px; font: inherit; vertical-align: baseline;">
                                                <th style="margin: 0px; padding: 10px; border-width: 0px 0px 1px; border-top-style: initial; border-right-style: initial; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: initial; border-bottom-color: rgb(87, 52, 39); border-left-color: initial; border-image: initial; letter-spacing: 0px; font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: 1.8rem; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; vertical-align: baseline; text-align: left; background: rgb(254, 255, 236); width: 100px; color: rgb(87, 52, 39);"><span style="font-size: 15px;" class="sb-fs-free">初回価格</span></th>
                                                <td style="margin: 0px; padding: 0px; border-width: 0px 1px 1px 0px; border-top-style: initial; border-right-style: solid; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: rgb(87, 52, 39); border-bottom-color: rgb(87, 52, 39); border-left-color: initial; border-image: initial; letter-spacing: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: 1.8rem; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; vertical-align: baseline; position: relative;"><span style="font-size: 15px;" class="sb-fs-free">¥2,900(税込)</span></td>
                                                <th style="margin: 0px; padding: 10px; border-width: 0px 0px 1px; border-top-style: initial; border-right-style: initial; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: initial; border-bottom-color: rgb(87, 52, 39); border-left-color: initial; border-image: initial; letter-spacing: 0px; font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: 1.8rem; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; vertical-align: baseline; text-align: left; background: rgb(254, 255, 236); width: 100px; color: rgb(87, 52, 39);"><span style="font-size: 15px;" class="sb-fs-free">定期価格</span></th>
                                                <td style="margin: 0px; padding: 0px; border-width: 0px 1px 1px 0px; border-top-style: initial; border-right-style: solid; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: rgb(87, 52, 39); border-bottom-color: rgb(87, 52, 39); border-left-color: initial; border-image: initial; letter-spacing: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: 1.8rem; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; vertical-align: baseline; position: relative;"><span style="font-size: 15px;" class="sb-fs-free">¥2,900(税込)</span></td>
                                            </tr>

【変更後】

<tr style="margin: 0px; padding: 0px; border: 0px; letter-spacing: 0px; font: inherit; vertical-align: baseline;">
                                                <th style="margin: 0px; padding: 10px; border-width: 0px 0px 1px; border-top-style: initial; border-right-style: initial; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: initial; border-bottom-color: rgb(87, 52, 39); border-left-color: initial; border-image: initial; letter-spacing: 0px; font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: 1.8rem; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; vertical-align: baseline; text-align: left; background: rgb(254, 255, 236); width: 100px; color: rgb(87, 52, 39);"><span style="font-size: 15px;" class="sb-fs-free">初回価格</span></th>
                                                <td style="margin: 0px; padding: 0px; border-width: 0px 1px 1px 0px; border-top-style: initial; border-right-style: solid; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: rgb(87, 52, 39); border-bottom-color: rgb(87, 52, 39); border-left-color: initial; border-image: initial; letter-spacing: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: 1.8rem; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; vertical-align: baseline; position: relative;"><span style="font-size: 15px;" class="sb-fs-free">¥2,900(税込)</span></td></tr><tr>
                                                <th style="margin: 0px; padding: 10px; border-width: 0px 0px 1px; border-top-style: initial; border-right-style: initial; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: initial; border-bottom-color: rgb(87, 52, 39); border-left-color: initial; border-image: initial; letter-spacing: 0px; font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: 1.8rem; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; vertical-align: baseline; text-align: left; background: rgb(254, 255, 236); width: 100px; color: rgb(87, 52, 39);"><span style="font-size: 15px;" class="sb-fs-free">定期価格</span></th>
                                                <td style="margin: 0px; padding: 0px; border-width: 0px 1px 1px 0px; border-top-style: initial; border-right-style: solid; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: rgb(87, 52, 39); border-bottom-color: rgb(87, 52, 39); border-left-color: initial; border-image: initial; letter-spacing: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: 1.8rem; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; vertical-align: baseline; position: relative;"><span style="font-size: 15px;" class="sb-fs-free">¥2,900(税込)</span></td>
                                            </tr>

【修正箇所】

https://t.gyazo.com/teams/squadbeyond/18b4e022f85567d4604f161925b715cf.png

横幅に関しては下記修正を行ってください。

width: width:100%;
↓↓↓
width: 100%;

またth部分の横幅ですが、htmlに直書きでwidth:100px; とありますのでwidth:50%; など適宜修正してください（書いてあるところ全て）

widgetマスター

モデレータ

2023年12月20日 17:22

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

確認します！

widgetマスター

モデレータ

2023年12月21日 11:06

1つ目のWidgetを作成いたしました☺

Widget名: アプリ一覧表（フラットデザイン）

カテゴリ: 表

設置例: https://sb-draft-preview.squadbeyond.com/articles/BkGhvdzauFYmpvKZw/draft?token=70ec32992889176a1ef9c32ca277b422

widgetマスター

モデレータ

2023年12月21日 16:08

修正方法を案内させていただきます🙌

① 最後の設問のある Widget の大枠にクラスを追加

最後の設問のある Widget の大枠に final-question というクラス名を追加して下さい。

<div class="blackwood_box final-question"> <!-- ← ここに final-question を追加してます -->
  <div class="choices_box">
    <!-- 1つ分の選択肢はここからコピー。 -->
    <input type="checkbox" name="choice04" id="choice04-1" class="selecter">
    <label for="choice04-1" class="choice-check" style="text-align: center;">
      <font face="serif" style="">記憶力
        <span style="font-size: 13px;" class="sb-fs-free">※1</span>を維持したい
      </font>
    </label>
    <!-- 1つ分の選択肢はここまでコピー -->

② ボタンのある Widget のHTML構成を変更

ボタンのある Widget のHTML構成を下記にしてください。

また＼申込1分／のテキストもこの中に移動してください。

画像もこの中に移動してください。

<div class="final-answer-area">
    <div class="abc">
        <img src="https://file.mysquadbeyond.com/uploads/article_photo/photo/3394189/f967dd39-9d65-490c-b719-19b07b867dfe.png" height="463" width="463" draggable="false" class="lazyload">
    </div>
    <div style="font-family: serif; text-align: center;"><strong style="color: rgb(250, 99, 99); font-size: 21px;"><br> ＼申込1分／
        </strong></div>
    <div class="btn-area"><!--下記ooooo部分にリンク先URLを置いてください。もしくは左に表示のボタンテキストを選択した後に上部のリンクボタンから追加可能--><a href="ooooo">
            <font color="#ffffff" style="" face="serif">無料で<br>お得にはじめてみる</font>
        </a></div>
</div>

③CSSに下記コードを追加

.abc {
  display: flex;
  justify-content: center;
  align-items: center;
}

④ Javascript body に下記コードを追加

<script>
	const finalAnswerArea = document.querySelector('.final-answer-area');
	const finalQuestion = document.querySelector('.final-question');
	const choicesBox = finalQuestion.querySelector('.choices_box');
	finalAnswerArea.style.display = 'none';
	choicesBox.addEventListener('click', () => {
		finalAnswerArea.style.display = 'block';
	});
</script>

【修正後プレビュー】

https://sb-draft-preview.squadbeyond.com/articles/HKbqCMZJfOAmqFfhxGKQ/draft?token=ec9694357d7021574d5f6667a66e7278

widgetマスター

モデレータ

2023年12月21日 18:48

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

作成に取り掛かります！

widgetマスター

モデレータ

2023年12月22日 13:20

お待たせいたしました🙌

修正方法を案内させていただきます！

①「回答を完了する」ボタンを追加

HTMLの116行目「<p class=”quiz_cont_progress”><span>4</span>/4</p>」の後に下記記述を追加

<div class="wrap-btn-forword"><button onclick="quizResultNotChange.questionFoward(this)" class="btn-forword js-btn-forword" type="button">回答を完了する</button></div>

https://t.gyazo.com/teams/squadbeyond/dcda4be18184b88a56b0245767959a69.png

②回答後のコンテンツを隠せるように移動する

HTMLの117行目から125行目の記述を削除

https://t.gyazo.com/teams/squadbeyond/89bd73a28d44b996497bcd70a59843de.png

121行目「 <div class=”quiz_result is-hidden” id=””></div>」の間に下記記述を追加

<p class="quiz_cont_image"><video allowfullscreen="true" autoplay="true" controlslist="nodownload" loop="true" muted="true" name="media" playsinline="" class="lazyload">
                                <source type="video/mp4" src="https://file.mysquadbeyond.com/uploads/article_photo/photo/3041519/a72da37f-8983-46b4-906b-ef64949da34b.mp4">
                            </video></p>
                    <br>
                    <div class="downArrow movebtn"><span></span><span></span><span></span></div>
                    <div class="btn-area"><!--下記ooooo部分にリンク先URLを置いてください。もしくは左の表示されているボタンテキストを選択した後に上部のリンクボタンから追加可能--><a href="https://tsugitsugi-m.com/register?sb_tracking=true">
                            <font face="sans-serif">かんたん無料登録で<br>ホテルをみてみる</font>
                        </a></div>

https://t.gyazo.com/teams/squadbeyond/a27b8de23550333ff638220dff663d4a.png

③CSSの調節を行う

421行目を削除

変更前

.quiz_result {
  padding: 0 10px;
  display: flex;
  width: auto;
  justify-content: center;
  position: relative;
}

変更後

.quiz_result {
  padding: 0 10px;
  width: auto;
  justify-content: center;
  position: relative;
}

下記記述を一番下に追加

.video-container {
            position: relative;
            width: 513px; /* ビデオの幅に合わせる */
            height: 578px; /* ビデオの高さに合わせる */
        }

        video {
            width: 100%;
            height: 100%;
            object-fit: cover; /* アスペクト比を保ちながらコンテナに収める */
        }

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

widgetマスター

モデレータ

2023年12月22日 13:31

2つ目の作成完了です！！！

—–

Widget名: タグレイアウト付きのシンプルな表組みレイアウト

カテゴリ: 表

設置例: https://sb-draft-preview.squadbeyond.com/articles/ZHxaGNgIQmXrjiAdvw/draft?token=153f0c1091908810caeec67a38f55e50

—–

widgetマスター

モデレータ

2023年12月22日 18:34

お待たせいたしました！

Widgetに画像を2つ横並びで挿入する場合の一例の手順を共有させていただきます！

例: https://sb-draft-preview.squadbeyond.com/articles/nO-zmbBPjyIhuAYMTgNQ/draft?token=e92d811d625f6dc30272940c152941c6

① data-level=”” を data-level=”image” に変更して画像を2つ挿入する

<td data-level="image">
		<img src="<a target="_blank" class="c-link" data-stringify-link="https://file.mysquadbeyond.com/uploads/article_photo/photo/3405942/7e96b7e0-37f4-43c7-9a66-824f1a624055.webp" delay="150" data-sk="tooltip_parent" href="https://file.mysquadbeyond.com/uploads/article_photo/photo/3405942/7e96b7e0-37f4-43c7-9a66-824f1a624055.webp" rel="noopener noreferrer" style="box-sizing: inherit; color: inherit; text-decoration: none;">https://file.mysquadbeyond.com/uploads/article_photo/photo/3405942/7e96b7e0-37f4-43c7-9a66-824f1a624055.webp</a>" height="158" width="157" draggable="false">
		<img src="<a target="_blank" class="c-link" data-stringify-link="https://file.mysquadbeyond.com/uploads/article_photo/photo/3405941/4f018f21-a819-4842-bbd2-6ccd5d069732.webp" delay="150" data-sk="tooltip_parent" href="https://file.mysquadbeyond.com/uploads/article_photo/photo/3405941/4f018f21-a819-4842-bbd2-6ccd5d069732.webp" rel="noopener noreferrer" style="box-sizing: inherit; color: inherit; text-decoration: none;">https://file.mysquadbeyond.com/uploads/article_photo/photo/3405941/4f018f21-a819-4842-bbd2-6ccd5d069732.webp</a>" height="158" width="157" draggable="false">
</td>

② data-level=”image” 用のCSSを追加する

.statick-table table tbody td[data-level="image"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

 .statick-table table tbody td[data-level="image"] img {
  width: 30%; /* ← 数値はお好みで調整して下さい */
}

https://t.gyazo.com/teams/squadbeyond/121fd44198553a48a5d5346bba4c180f.jpg

widgetマスター

モデレータ

2023年12月25日 16:56

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

確認します！

widgetマスター

モデレータ

2023年12月26日 11:26

ボタンに下記のCSSを追加してください！

.bnrs-wrap img {    width: 100%;
    max-width: min(500px,95%) !important;
}

widgetマスター

モデレータ

2023年12月26日 11:38

お待たせいたしました！

JavaScript head部分のカルーセルの設定の「disableOnInteraction: true,」のところを「disableOnInteraction: false,」に変更してみてください！

const swiperOption = {
    slidesPerView: 1,
    spaceBetween: 0,
    centeredSlides: true,
    autoplay: {
        delay: 3000,
        disableOnInteraction: false, //ここを変更
    },
    loop: true,
    pagination: {
        el: '.swiper-pagination',
    },
}

widgetマスター

モデレータ

2023年12月19日 17:41

かしこまりました！

widgetマスター

モデレータ

2023年12月27日 10:37

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

widgetマスター

コミュニティのコメント