-
既存比較表widjetに画像を入れたいです
トピックス by
350 pt
2023年12月21日 15:08
362
PV
【該当ページ】https://sb-draft-preview.squadbeyond.com/articles/KvpNYHjqSIedzXA/draft?token=9601fcd93d9c42e83da51b9d0f01a106
【ご相談内容】
該当ページ一番上の比較表の〈ポイント交換先〉という列に、画像を挿入できるようにしてほしいです。（添付画像が完成イメージです）
-
6 コメント
-
依頼ありがとうございます！
作成に取り掛かります！
-
お待たせいたしました！
Widgetに画像を2つ横並びで挿入する場合の一例の手順を共有させていただきます！
① 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
-
ご回答いただきありがとうございます。
二点質問があります。
【質問1】
編集ページ上では挿入した画像が表示されているのですが、プレビューで表示されません。表示するための方法を教えていただきたいです。
【参考ページ】
https://app.squadbeyond.com/ab_tests/ldNawTEYKyVghLjuKA/articles#gbrnptBhg-hHquiIBXfQ
【プレビュー】
【質問2】
同じ列の”ポイント交換先”の欄にも画像を挿入する方法を教えていただきたいです。他の列を<td data-level=”image”>に変更すると、同じ枠内に二列できてしまいます…
【参考ページ】
https://app.squadbeyond.com/ab_tests/ldNawTEYKyVghLjuKA/articles#gbrnptBhg-hHquiIBXfQ
【プレビュー】
-
確認させていただきますね☺
-
-
お待たせいたしました！
ご確認よろしくお願いいたします😼
【質問1】
■ 画像がプレビューで表示されない問題
画像を恐らくプレビューのソースコードから直接コピペされたため、
LazyLoadが読み込みを完了する際に付与する class名 と 属性 が追加されている事から、読み込んだものとして扱われるため画像が正しく表示されておりませんでした。
※beyondエディタでは画像すべてに lazyload が初期で実装されるため LazyLoad が画像を読み込む前に軽量の透明画像に変換されます。解決方法については、エディタから直接画像を追加しなおす、もしくは 現在 LazyLoad が完了時に追加した class名および属性を削除して下さいませ。
具体的にはHTMLを修正してください！
変更前
<td data-level="image"><img src="https://file.mysquadbeyond.com/uploads/article_photo/photo/3405942/7e96b7e0-37f4-43c7-9a66-824f1a624055.webp" height="158" width="157" draggable="false" class="entered loaded lazyload" data-ll-status="loaded"><img src="https://file.mysquadbeyond.com/uploads/article_photo/photo/3405941/4f018f21-a819-4842-bbd2-6ccd5d069732.webp" height="158" width="157" draggable="false" class="entered loaded lazyload" data-ll-status="loaded"></td>
変更後
<td data-level="">
<div class="image-wrap">
<img src="https://file.mysquadbeyond.com/uploads/article_photo/photo/3405942/7e96b7e0-37f4-43c7-9a66-824f1a624055.webp" height="158" width="157" draggable="false" class="lazyload"><img src="https://file.mysquadbeyond.com/uploads/article_photo/photo/3405941/4f018f21-a819-4842-bbd2-6ccd5d069732.webp" height="158" width="157" draggable="false" class="lazyload">
</div>
</td>
【質問2】
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%;
/* ← 数値はお好みで調整して下さい */
}
変更後
.statick-table table tbody td .image-wrap {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .statick-table table tbody td .image-wrap img { width: 30%; /* ← 画像の大きさを調整する場合はこちらの数値を調整して下さい */ }-
変更できました！ありがとうございました。
-
