投稿にSpotifyを埋め込んだ時の表示について

0
いいねをした人: 居ません
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • 投稿者
    投稿
  • #87427
    徳本 奈穂子
    参加者
    23

    【お使いの 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の下に空白が入ってしまいます。

    空白を削除する方法はないでしょうか?

    ### 試したこと

    該当のクラスを探しましたがよくわかりませんでした。

    0
    いいねをした人: 居ません
    #87447
    GONSY
    参加者
    841

    徳本奈穂子さん、こんにちは。

    .c-responsive-container-4-3 {
    padding-bottom: 75%;
    }

    この数字を変更すれば、空白は調整できると思います。
    ただ、番組と曲のボックス?のアスペクト比が異なるので、上記の数値にすると、曲の高さが小さくなり、ジャケット画像も小さくなってしまいます。

    これを避ける1つの方法として、番組のSpotifyブロックにクラス(例:radio-program)を追加して、以下のようにすれば、番組ボックスのみ空白を取り除くことができると思います。
    ※もっと良い方法が見つかるといいのですが・・・

    .radio-program .c-responsive-container-4-3 {
    padding-bottom: 30%; /*調整が必要*/
    }

    以下、Chrome・デベロッパーツールで再現してみました。

    1
    いいねをした人:
    #87457
    徳本 奈穂子
    参加者
    23

    GONSYさん、ご回答ありがとうございます!!

    モニタサイズによって見え方が違うので、ブレイクポイントごとにpaddingを調整して、ほぼ狙い通りの表示になりました。

    私としては解決できたのですが、今後実装していただける可能性があるのであればこのトピックは閉じない方がいいでしょうか?

    一度閉じた方が良いでしょうか?

    お手数ですがご教示いただけないでしょうか。

    0
    いいねをした人: 居ません
    #87474
    アバター画像キタジマ タカシ
    参加者
    2397

    徳本さんご報告ありがとうございます!
    GONSY さん調査ありがとうございます!

    根本的な問題として、4:3にする必要がないのに .c-responsive-container-4-3 で囲まれているのがダメということですよね。これ YouTube などの動画サービスやスライド共有サービス向けに自動的にアスペクト比を良い感じにするようにするためのものなので、今回の場合は Snow Monkey 側で囲まれないようにするのが良いのかなと思います。

    徳本さん、僕の方でもテストしてみたいと思いますので、可能でしたらテストページに埋め込まれている oEmbed の URL(それをはったら埋め込みに変換される URL)を共有いただけないでしょうか?

    0
    いいねをした人: 居ません
    #87503
    徳本 奈穂子
    参加者
    23

    キタジマさん、お返事ありがとうございます!

    “https://open.spotify.com/episode/5zTuDZmZXOGTPZlqFciOQO?si=I5mcMEsHQwiX2jtnwUkjWw&dl_branch=1”

    こちらのURLです。

    (自動的に変換されてしまうのでダブルクオーテーションで囲っています。)

    よろしくお願いいたします!

    1
    いいねをした人:
    #87865
    アバター画像キタジマ タカシ
    参加者
    2397

    v15.8.1 で変更を入れてみました。確認してみてください!

    1
    いいねをした人:
    #88193
    徳本 奈穂子
    参加者
    23

    キタジマさん、素早くご対応いただいていたのにお返事遅くなり申し訳ありません!

    理想通りの表示になっております!

    ありがとうございました!

    (クローズさせていただきます。

    1
    いいねをした人:
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • トピック「投稿にSpotifyを埋め込んだ時の表示について」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。