ツイッターの埋め込みパーツを２列横並びで表示する方法【はてなブログ】 - （旧）コダフォンの日記ブログ（移転しました）

f:id:codafon-prog:20211020220815j:plain:w200
ツイッターの埋め込みパーツを２列横並びで表示する方法【はてなブログ】

結論

上記のサイトの通り、以下の手順を実施する

追加CSSに該当コードをコピペする
『テキストエディタ』に『ツイートを埋め込む』で取得したコードを2つとも貼り付ける
その2つのコードをclass=”flex”を付けた『divタグ』で囲む

/* TwitterをPCでは横並びにする */
.flex {
    display: flex; /* これで横並びになる */
}
.twitter-tweet {
    padding: 5px; /* 1つのツイートの周りに5pxの余白をつける */
    margin: 10px auto; /* ツイートを中央寄せにする */
}

/* 画面サイズ960px以下ではTwitterを縦並びに変える */
@media (max-width: 960px) {
.flex {
    display: block; /* 横並びを解除 */
}
.twitter-tweet {
    padding: 0; /* 縦並びでは余白なし */
}
}