Twitter 埋め込みタイムラインのフォントサイズ

Solving the problem that the font size of Twitter embedded timeline was too large.

きっかけ

Twitterのタイムラインをウェブサイトに埋め込むことって頻繁にあると思うし、実際たくさん実装してきた。のだが今までは全てサイドバーかフッターに埋め込んでいたゆえ、300〜400px幅で縦が長いというTwitter社の想定通りのサイズ感で何ら問題はなかった。

ところがこの度。

フッターではなくもっと上の方に表示したい

という要望が。あいにくサイドバーなしのページだ。

埋め込みタイムラインの問題

というわけでサイトボディの真ん中にデンと幅広で表示させてみた。ら驚いた。

これはスクリーンショット。実物もこのサイズ。

文字がデカい!

(あ、パソコンで見た場合ね。スマホで見たらちょうど良いw)

なんじゃこら。。

css当てて調整するか。とクラス名やら何やら該当箇所のを調べてcssを書いてみた。が。。これ埋め込みタイムラインってiframeなのでフレームの外のcssなんか読んでくれないのだよな。。。

解決方法

調べ倒して紆余曲折、なんとかなった。。
まる1日かかったが(´;ω;`)

javascriptを用意

結論としては、javascript(jQuery)で、中に必要なcssを全部書いた<style>タグをiframeの中のhtmlappendする、という方法で実現できた。

参考にした神サイト、、というかjavascriptはまるまるこちらのサイトからいただいた。おおきに!

CSSとJS/jQueryでTwitter埋め込みタイムラインのデザインをカスタマイズする

function changeTwitterWidgetDesign(){
  var $twitter_widget = $('iframe.twitter-timeline');
  var $twitter_widget_contents = $twitter_widget.contents();
  
  if (
    $twitter_widget.length > 0 &&
    $twitter_widget[0].contentWindow.document.body.innerHTML !== ""
  ) {
    $twitter_widget_contents
      .find('head')
      .append(
        '<link href="style.css" rel="stylesheet" type="text/css">'
      );
  } else {
    setTimeout(function () {
      changeTwitterWidgetDesign();
    }, 350);
  }
}

changeTwitterWidgetDesign();

注意点としてWordPressのお約束で2行目の$jQueryに書き換えるべし。

そして11行目の.append()の中身12行目を<style></style>で挟んだcssにする。というのも当方の環境ではstyle.cssをうまく読み込んでくれなかったので直接書き込まざるを得なかった。もちろんこのままにして外部cssが読めたらそれでOK。

下の例は、Twitterタイムラインの各投稿の本文を1remサイズ、行送りを1.6remに変更する例だ。

function changeTwitterWidgetDesign() {
  var $twitter_widget = jQuery("iframe.twitter-timeline");
  var $twitter_widget_contents = $twitter_widget.contents();

  if (
    $twitter_widget.length > 0 &&
    $twitter_widget[0].contentWindow.document.body.innerHTML !== ""
  ) {
    $twitter_widget_contents
      .find("head")
      .append(
        "<style>.SandboxRoot .timeline-Widget .timeline-Tweet-text{font-size:1rem;line-height:1.6rem}</style>>"
      );
  } else {
    setTimeout(function () {
      changeTwitterWidgetDesign();
    }, 350);
  }
}

changeTwitterWidgetDesign();

最初はもっと長い長〜いcssを放り込んでみたのだがVSCodeに怒られたのでほどほどの長さのcssに調整した。

ちなみにこのコードの素晴らしいところは、Twitterのiframeが読み込み終わるまで待ってからappendするところ。この手続きをすっ飛ばしてただappendするだけのコードを紹介してるサイトもあったのだがというか最初はそれでずっと試していたらページをリロードするたびに目的のcssが反映していたりしてなかったりと不安定極まりなかった。この不安定な原因を調べるのに半日以上費やしたし。。。

javascriptをサイトに組み込む

用意できたこのjavascriptファイルを目的のサイトのサーバーの然るべき場所にアップロードしてHTML読み込み時に認識させればOK。この辺の情報はググれば丁寧な解説がいくらでも出てくるが念の為メモを残す。

WordPressならテーマのfunctions.php(子テーマのね)に下記enqueueを記述。

function my_scripts_method()
{
  wp_enqueue_script('twitter-script', get_theme_file_uri('/js/twitter-design-script.js'), array('jquery'), filemtime(get_theme_file_path('/js/twitter-design-script.js')), true);
}

add_action('wp_enqueue_scripts', 'my_scripts_method');

HTMLに書き込むなら</body>の直前に下記を記述。

<script type="text/javascript" src="/js/twitter-design-script.js" id="twitter-script-js"></script>

いずれもパスとファイル名は必要に応じ適宜変更のこと。

解決した埋め込みタイムライン表示

おかげさまで現在は元気に最適なフォントサイズのタイムラインが埋め込めてゴキゲンだ。

願わくば、今後Twitterさんの仕様が変わらないでいてほしい。。。
↑の埋め込まれたタイムラインの表示がおかしなことになってたら仕様が変わったということね。

FileZillaでのSFTP 鍵認証 接続エラー

Site Kit by Google の日本語化メモ
Service

SandY Design Studioでは3つのサービスを提供しております。

Sound
design

ミキシング・マスタリング・レコーディング・編曲・作曲・CD, YouTube, クラウド音楽制作支援・CDジャケットデザイン

Web
design

WordPressによるCMSホームページ制作・Webサーバー・メールサーバー設定・ホームページ運営に関するあらゆる支援

Officework
design

個人事業主、小規模法人のIT活用支援・クライアントサーバー導入・パソコン教室・人事給与, 経理, 総務部門の実務支援