ブログで【 月1万円 】の秘密をタップして確認!

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

blank
Tommy

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

blank
Tommy

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

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

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

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

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

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

blank
とみぃ

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

では、

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

ご紹介いたします!

blank
blank

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

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

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

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

blank
とみぃ

文字ちっさ!

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

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

blank
とみぃ

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

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

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

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

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

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

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

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

CSSで「%」を用いれば!

ということで結論。

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

です。

blank
とみぃ

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

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

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

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

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

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

blank
とみぃ

数値は、どれも変更していただいて構いませんよ!

WordPressテーマ「STORK19」に対応。その他のテーマでは効かない恐れがあります。今後 追加いたします!

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

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

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

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

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

https://twitter.com/Tommy_irugi/status/1363058302247075840?s=19
blank
とみぃ

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

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

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

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

blank
とみぃ

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

※ 表示されない場合は「再読み込み」を。