Twitter の文字表示が大きくなったのだが…

この記事は約3分で読めます。
スポンサーリンク

twitter_font_size_20160407
Twitterの勝手な仕様変更があるたびに、なんとか自分の希望する状態に表示しようとソースとにらめっこ

Twitter埋め込みウィジェットをコンテンツ幅いっぱい(100%)に表示させるに、こんなコメントが寄せられました

Flameサイズに応じて文字が拡大するようになったようです。

Twitterウィジェットを埋め込んでいるクライアントのサイトを見に行ってみると、ホントに幅と比例した文字サイズで表示されている…😡 これって絶対にTwitterの嫌がらせだよな…😒 「どうしても520px幅を守らないなら、見た目を悪くしてやるぜ😎」みたいな

もういい加減ディスコンにしたいのですが、クライアントが使っているのでそうもいかず… いろいろと試してました

F12を叩いてソースコードを見ていくと、どうやらブラウザ幅によって .SandboxRoot.env-bp-??? の ??? の部分に入る数字が変わっているコトが判明。やまねこ σ(^_^=; の環境下では 1920×1080 だと 970 になり、1440×900 だと 820 になっていました。ツイート自体は .timeline-Tweet-text で制御されている模様

これを踏まえて、tw.css (←ウィジェットを100%幅にするための css)を以下のように記載しました

#document.timeline-Widget {
    max-width: 100% !important;
    width: 100% !important;
    }

div.timeline-Widget {
    max-width: 100% !important;
    width: 100% !important;
    }

.timeline {
    max-width: 100% !important;
    width: 100% !important;
    }

/* ここから下を追記 */
.SandboxRoot.env-bp-970 .timeline-Tweet-text {
    font-size: 10.5pt !important;
    line-height: 14pt!important;
    }

.SandboxRoot.env-bp-820 .timeline-Tweet-text {
    font-size: 10.5pt !important;
    line-height: 14pt!important;
    }

これでツイートの文字サイズは 10.5pt で表示されるようになりました。数字の部分はブラウザ幅によっていろいろな数値をとるようです。なので、フルスクリーンでブラウザが表示されていれば 10.5pt で表示されていても、ブラウザ幅を狭くしていくと、あるタイミングでボン!と大きくなる可能性も… なので、暫定的な対策といった感じですが、見た目の改善は図れるのでお試しあれ

コメント

  1. れいこ より:

    こんにちは。
    以前、埋め込みウィジェットの幅の件で
    こちらでお世話になりました。
    その節はどうもありがとうございました。

    さて、この度のTwitterの仕様変更で
    早速こちらの記事を参考にさせていただいたのですが、
    該当のcssファイルに以下をそのまま追加するだけでは
    文字のサイズを変えることができませんでした。(IEとFirefoxで確認)

    .SandboxRoot.env-bp-970 .timeline-Tweet-text {
    font-size: 10.5pt !important;
    line-height: 14pt!important;
    }

    .SandboxRoot.env-bp-820 .timeline-Tweet-text {
    font-size: 10.5pt !important;
    line-height: 14pt!important;
    }

    ↑を追加する以外になにかしなくてはいけないことが
    あるのでしょうか?

    またお手すきの時にでもご教示いただけますと幸いです。
    どうぞ宜しくお願いいたします。

    • やまねこ より:

      れいこさま

      Twitterの仕様変更にも困ったモノですね

      さて、記事にも記載しておりますが、970や820の部分の数値はサイトによって(閲覧時のブラウザ幅によって)異なります。Firefoxは使っていないので分かりませんが、IEならF12を押して DOM Explorer で Twitterウィジェットの部分を見ると、

      <html class=”SandboxRoot env-bp-xxx“>

      が見つかると思います。xxx の部分の数字が記事で記載した数値(970 と 820)とは異なっているのではないかと思います。確認されてはいかがでしょうか

  2. ラッキー太郎 より:

    画面解像度「1920×1080」で調べたところ、下のサイズでの指定がありましたので自分は追記してみました。IE、Chrome、FireFox投稿時の最新版で確認済みです。
    >れいこさん
    変更されないのは、ブラウザキャッシュが原因ではないでしょうか。

    .SandboxRoot.env-bp-550 .timeline-Tweet-text,
    .SandboxRoot.env-bp-660 .timeline-Tweet-text,
    .SandboxRoot.env-bp-820 .timeline-Tweet-text,
    .SandboxRoot.env-bp-970 .timeline-Tweet-text
    {
    font-size: xxpt !important;
    line-height: xxpt!important;
    }

    • やまねこ より:

      ラッキー太郎さま

      フォローアップをありがとうございます

      ボクの管理してる別サイトでは、430と330もありました… 規則性が見えないので、出たとこ勝負で追記するしかなさそうですね

      >れいこさん
      ブラウザキャッシュを疑って、スーパーリロード(…って最近は言わないのかな?)をしてみるのもありですね。Windowsなら[Ctrl]+[F5]が多いかと

  3. れいこ より:

    やまねこ様
    ラッキー太郎様

    返信遅くなり申し訳ありません。
    html class=”SandboxRoot env-bp-660“
    となっておりましたので追加してみたところ、
    IEではうまくいきましたが、Firefoxではダメでした。
    ですが、IEだけでも正常に表示させることができたので
    良かったです。どうもありがとうございました!

  4. れいこ より:

    (追記)

    昨日、何度リロードしてもFirefoxでは表示サイズが変わらなかったのに
    今朝、PCを立ち上げてみたらFirefoxでも無事正常に表示されておりました!
    本当にありがとうございました!(*’▽’*)

    • やまねこ より:

      れいこさま

      無事に解決して良かったです〜😃

      やっぱりブラウザのキャッシュが効いてしまってたのかもしれませんね

タイトルとURLをコピーしました