ブログに埋め込んだツイートをPCで横並びにする方法【コピペOK】

Twitterを続けて埋め込むと記事がムダに長くなってしまう…。

横に並べるカンタンな方法はないかなぁ。

こういった疑問に答えます！

本記事の内容

ついでにツイートが１つの時は中央寄せ、スマホでは縦並び（通常通り）にします。

「追加CSS」にコードを追記する方法ですが、コピペするだけなので誰でも実装可能ですよ。ぜひコピペして使ってくださいね！

①：ブログに埋め込んだツイートをPCで横並びにする方法

例として、2019年のM-1チャンピオン「ミルクボーイ」のお二人を〝立ち位置〟で横並びにしてみます（ツイートを埋め込む方法は割愛します）。

PCとスマホで確認してみてください

ちゃんと実装されていると思います。こんなんなんぼあってもいいですからね！

ツイートを横並びにするためのソースコード【コピペOK】

追加CSSにコピペ

/* 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; /* 縦並びでは余白なし */
}
}

次に、「テキストエディタ」に「ツイートを埋め込む」で取得したコードを２つとも貼り付けます。

最後に、その２つのコードを「divタグ」で囲むソースコードが以下です。

<div class="flex">
<!-- ここから囲む -->
    <blockquote class="twitter-tweet"><!-- 1つ目のツイートの中身 --></blockquote>
    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    <blockquote class="twitter-tweet"><!-- 2つ目のツイートの中身 --></blockquote>
<!-- ここまで囲む -->
</div>

class="flex"を付けた「divタグ」で囲んであげれば完了です。

ソースコードの解説

スマホと言いましたが、正確には960px以下なのでiPad（縦）でも縦並びで表示されます（iPadのウインドウ幅は768px）。

960px以下という設定は当ブログが「２カラム（列）」で構成されていてバランスを考えてのことです。

もし、縦並びになるウインドウ幅を変えたい場合は「960」という数字を変えてあげればオッケイです。

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

また、クラス名「flex」は何でも良いので、自由に「twitter」とかに変えてもオッケイです。

変更する場合の注意点

②：ブログに複数のツイートを埋め込んだ時の不要なコードを削除する方法

該当コード

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

「ツイートを埋め込む」でコピーするソースコードの一番下には必ず↑が書かれています。

しかし、このコードは「１記事に対して、１つあれば良いコード」なんです。

なので２つ目以降は毎回、削除するようにしましょう。

該当コードを削除することで得られる効果は微々たるものかもしれませんが、不要なコードを記述する意味はないので僕は全記事で削除しています。

まとめ

ブログにツイートを埋め込む時に使えるテクニックを２つ紹介しました。

どちらもカンタンなので、ぜひ試してみてくださいねー！