当サイトでは広告表示される場合があります。

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

Tommy

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

Tommy

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

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

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

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

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

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

とみぃ

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

では、

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

ご紹介いたします!

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

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

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

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

とみぃ

文字ちっさ!

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

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

とみぃ

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

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

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

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

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

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

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

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

CSSで「%」を用いれば!

ということで結論。

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

です。

とみぃ

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

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

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

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

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

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

とみぃ

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

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

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

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

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

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

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

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

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

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

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

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

とみぃ

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

つぎに繋がる記事はコチラ!

フリーランスの強い味方!

  • 与信審査:不要。
  • 利用金額:上限なし。
  • 初期費用・年会費:無料。
  • ポイント還元:1〜3%+α。
  • 関連サービスとのリアルタイム連携可能。

キャッシュレスによる業務効率化を推進!

この記事を、同じく悩んでいる人へシェアしよう!
ABOUT US
とみぃAIアーティスト
・27歳、男性、フリーランス塾講師。
・保有資格:4つ、電子書籍:3冊出版。
・投資:米国株、高配当株、暗号資産。サイドFIREを目指す。
・座右の銘:勇気は一瞬、後悔は一生。昨日より1mmでも先へ。
・所属:静岡東部ボードゲーム会、リベシティ。
・おもに「ブログ × SNS」の継続ノウハウ、フリーランス情報について発信中!