BLOG

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

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

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

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

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

本記事の内容

  • ブログに埋め込んだ2つのツイートをPCでは横並びにする方法

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

『追加CSS』にコードを追記する方法ですが、コピペするだけなので誰でも実装可能です。

ぜひコピペして使ってください!

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

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

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

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

最後に、その2つのコードを『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以下という設定は当ブログが『2カラム』で構成されていてバランスを考えてのことです。

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

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

また、クラス名『flex』は何でも良いので自由に『twitter』とかに変えても大丈夫です。

変更する場合の注意点は下記です。

  • すべて小文字の英数字(最初の文字が数字になるのはNG)にすること
  • 『追加CSS』とテキストエディタの『class=”flex”』の部分も変更すること(テキストエディタの方は『.』を付けない)

今回は以上です。

次の記事では『1つの記事に複数のツイートを埋め込む際に不要なコードを削除して、ページ表示速度を上げる方法』を解説します(今回も削除しています)。

合わせて読んでくださいね。

あわせて読みたい
ブログに複数のツイートを埋め込む時は不要なコードを削除しよう!
ブログに複数のツイートを埋め込む時は不要なコードを削除しよう! ブログにTwitterをいっぱい埋め込んだら重くなった…。 何か良い方法はないかなぁ? ...