Twitterの投稿を1つ表示させたい | コミュニティ

タグ付き： widget, 埋め込んだツイートを横に並べる(埋め込み)

コミュニティ

Twitterの投稿を1つ表示させたい

トピックス by widget初心者 1792 pt 2023年10月2日 10:48 193 PV
【Widget名】

埋め込んだツイートを横に並べる(埋め込み)

【相談内容】

横に並ばせるのではなく単独で使用したいです。
埋め込んだツイートを横に並べる埋め込み1.png 382 KB 画像ファイル — クリックして見る



コピーダウンロードリンク
widgetマスター 9 月, 4 数週間前 2 人 · 1 コメント
- widget
- 埋め込んだツイートを横に並べる(埋め込み)
1 コメント

widgetマスター

モデレータ

2023年10月2日 10:50

こちらは現在 Widget内に 3つ並んでいるツイートを、一つにするという事で相違ございませんでしょうか？

上記前提として下記修正いただければと思います。

①現在3 つのツイートをひとつにする

<div class="twitterSlide__area">
    <div class="twitterSlide__inner">

        <div class="item">
            <blockquote class="twitter-tweet">
                <p lang="ja" dir="ltr">月間100億円分を凝縮！<br>あらゆるWEB広告から、実際に効果のあった改善施策・運用手法を集めました！<br><br>▼ダウンロードはこちらから<a href="https://t.co/nHsRaoX2Ep <a href="pic.twitter.com/tHVdKbNoTb</p>— 【公式】Squad beyond@ｽｸﾜｯﾄﾞﾋﾞﾖﾝﾄﾞ (@squadbeyond) <a href="March 3, 2022
            </blockquote>
            <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
        </div>

    </div>
</div>

② CSSを調整する

.twitterSlide__inner {
  width: 100%; /* 100% に変更 */
  max-width: none !important;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
}

.item {
  width: 400px;
  height: auto;
  margin: 0 auto; /* 0 auto に変更（真ん中よせ） */
}

プレビュー：https://sb-draft-preview.squadbeyond.com/articles/ToTVOWhrFtAztVrOVcQ/draft?token=a519f778971d1df93ceab663d402050f