• 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