-
お待たせいたしました！
ご確認よろしくお願いいたします😼
【質問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%; /* ← 画像の大きさを調整する場合はこちらの数値を調整して下さい */ }