BLOG

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

2020年6月25日

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

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

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

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

本記事の内容

  • ①:ブログに埋め込んだ2つのツイートをPCでは横並びにする方法
  • ②:ブログに複数のツイートを埋め込んだ時の不要なコードを削除する方法

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

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

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

  • ①:追加CSSに該当コードをコピペする
  • ②:「テキストエディタ」に「ツイートを埋め込む」で取得したコードを2つとも貼り付ける
  • ③: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」という数字を変えてあげればオッケイです。

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

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

変更する場合の注意点

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

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

該当コード

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

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

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

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

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

まとめ

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

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

-BLOG
-,

© 2021 ブログの神様|THE GOD OF BLOG