- このトピックには6件の返信、3人の参加者があり、最後に
により3年、 1ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】14.3.5
【お使いの Snow Monkey Blocks のバージョン】
【お使いの Snow Monkey Editor のバージョン】
【お使いのブラウザ】Google Chrome
【当該サイトのURL】https://herown.life/2021/09/11/10minutes-music-diary-vol1-10/### 発生している問題
不具合かどうかわからないのですが、投稿にSpotifyを埋め込んだ時に、Spotifyの下に空白が入ってしまいます。
空白を削除する方法はないでしょうか？
### 試したこと
該当のクラスを探しましたがよくわかりませんでした。
Who liked: No user徳本奈穂子さん、こんにちは。
.c-responsive-container-4-3 { padding-bottom: 75%; }この数字を変更すれば、空白は調整できると思います。
ただ、番組と曲のボックス？のアスペクト比が異なるので、上記の数値にすると、曲の高さが小さくなり、ジャケット画像も小さくなってしまいます。これを避ける1つの方法として、番組のSpotifyブロックにクラス（例：radio-program）を追加して、以下のようにすれば、番組ボックスのみ空白を取り除くことができると思います。
※もっと良い方法が見つかるといいのですが・・・.radio-program .c-responsive-container-4-3 { padding-bottom: 30%; /*調整が必要*/ }以下、Chrome・デベロッパーツールで再現してみました。
Who liked:GONSYさん、ご回答ありがとうございます！！
モニタサイズによって見え方が違うので、ブレイクポイントごとにpaddingを調整して、ほぼ狙い通りの表示になりました。
私としては解決できたのですが、今後実装していただける可能性があるのであればこのトピックは閉じない方がいいでしょうか？
一度閉じた方が良いでしょうか？
お手数ですがご教示いただけないでしょうか。
Who liked: No user徳本さんご報告ありがとうございます！
GONSY さん調査ありがとうございます！根本的な問題として、4:3にする必要がないのに
.c-responsive-container-4-3で囲まれているのがダメということですよね。これ YouTube などの動画サービスやスライド共有サービス向けに自動的にアスペクト比を良い感じにするようにするためのものなので、今回の場合は Snow Monkey 側で囲まれないようにするのが良いのかなと思います。徳本さん、僕の方でもテストしてみたいと思いますので、可能でしたらテストページに埋め込まれている oEmbed の URL（それをはったら埋め込みに変換される URL）を共有いただけないでしょうか？
Who liked: No userキタジマさん、お返事ありがとうございます！
“https://open.spotify.com/episode/5zTuDZmZXOGTPZlqFciOQO?si=I5mcMEsHQwiX2jtnwUkjWw&dl_branch=1”
こちらのURLです。
(自動的に変換されてしまうのでダブルクオーテーションで囲っています。)
よろしくお願いいたします！
Who liked:
- トピック「投稿にSpotifyを埋め込んだ時の表示について」には新しい返信をつけることはできません。