【コピペOK!】ブログの「ツイート埋め込み」フォントサイズをCSSで変更する方法

以前のボク

「ツイート埋め込み」機能って便利だけど…

以前のボク

フォントサイズが大きすぎる!

はじめ見たときビックリしました。

タイトル(h1タグ)並みだったので!笑

これはマズいと思い、カスタマイズすることに。

しかし、なかなか上手くいかない…

フォントにCSSが効かない。

とみぃ

「!important」を付けると優先されるはずが、それでもダメでしたね…笑

では、

  • なぜ上手くいかないのか?
  • どうすれば変更することができるのか?

ご紹介いたします!


フォントにCSSが効かない理由

まず、「ツイート埋め込み」のフォントにCSSが効かない理由は…

1つの画像や動画のように、読み込まれているからです。

たとえばYouTube動画を見ていて、

とみぃ

文字ちっさ!

と思っても、作ったのは そのYouTuberです。

こちらが変更することなんて、決してできません。

とみぃ

そりゃ~、変えられないわけだ!笑

【結論】全体的にサイズダウンさせる

では、どうすればいいのか?

画面サイズを変えればいい話ですよね。

  • 画像や動画の文字が小さいのであれば、画面を拡大。
  • 大きいのであれば、スマホなどで見る。

こうすることで調節できます。

そしてブログには、こんな便利な機能が!

  • 画面サイズに応じて、自動で表示サイズを変更してくれるんですよね。

CSSで「%」を用いれば!

ということで結論。

「ツイート埋め込み」のフォントサイズは変更できないので、全体的に小さくする!

です。

とみぃ

意外と盲点で、まったく思いつきませんでした…笑

レイアウト方法(コピペOK!)

では、その全体サイズの変更方法ですが…

以下のCSSをぜひ、そのままコピペしちゃってください!

.wp-block-embed__wrapper {
  margin: 30px auto 35px auto; /* 上 右 下 左 */
  width: 93%; /* 全体サイズの調整 */
}

この中にある「width」がサイズ調整をしてくれるものになります。

とみぃ

パーセンテージは変更いただいても構いませんよ!

「margin」は位置調整になりますので、こちらも変更や削除が可能です。

この情報を載せているのは唯一かも?

以上、この記事の内容を3行でまとめると、

  1. 「ツイート埋め込み」のフォントには、CSSが効かない。
  2. 全体サイズを変更すればいい。
  3. コピペOKのレイアウト方法をご紹介!

でしたが、いかがだったでしょうか?

実際に、以下のようになります。

とみぃ

ちゃんとイイ感じの大きさになっていますよね?笑

かなり検索しましたが、解決方法を載せている記事とは出会えませんでした。

なので、なんとか思いついて良かった…

この記事の情報が、あなたの役に立ちましたら嬉しいです!

とみぃ

最後までお読みいただき、ありがとうございました!