ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

【twitter】埋め込みタイムラインのcssを変更する方法

2016年8月12日
twitter_logo_old
twitter_logo

サイトにtwitterのタイムライン表示を行った際に、『タイトル部分のfont-sizeを変更してほしい』というスタイル変更(css修正)の要望があったので、その対処方法を備忘録として残しておきます。

ウィジットをまだ作成していない方は下記から作成できます↓

【ウィジット作成】
https://twitter.com/settings/widgets
※twitterウィジットとは、サイト内に埋め込んで表示させるタイムラインのこと

補足
クライアントのサイトを作成する際に、
ハッシュタグでのタイムライン表示は問題ないが、『クライアントの投稿を表示したい』となった場合はクライアントのtwitterアカウント情報が必要なので注意。

今回やることとして
js で iframe.twitter-timeline にアクセスし、css を読み込ませて font-size 修正するです!

【html】
Htmlのhead内に下記jsを追加

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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();

【css】
Twitter用のcss『tw.css』など任意の名前で外部cssを作成し、
スタイルを変更したい個所に通常と同じようにcssを書いていく。

そして、先ほどhtmlに記述したjsの.append(‘パス’) ← この部分のcssのパスを変更する
これでtwitterのスタイルが変更できますね!

【参考サイト】
http://ithat.me/2016/02/09/js-jquery-twitter-widget-timeline-customize

関連記事

  • 【twitter、facebook】html内に純正シェアボタンを設置して表示する方法2016年8月12日 【twitter、facebook】html内に純正シェアボタンを設置して表示する方法
  • 【Instagram】インスタグラムの投稿一覧をhtmlに埋め込む方法 ※snapwidget2016年8月12日 【Instagram】インスタグラムの投稿一覧をhtmlに埋め込む方法 ※snapwidget
  • 【AMP】「logo」フィールドの値は必須です。「image」フィールドの値は必須です。構造化テストツールエラーの解決法2018年5月11日 【AMP】「logo」フィールドの値は必須です。「image」フィールドの値は必須です。構造化テストツールエラーの解決法
  • iPhone(ios)でスクロール時に起きるresizeイベントをなくす方法2017年7月4日 iPhone(ios)でスクロール時に起きるresizeイベントをなくす方法
  • 【js】サイトに埋め込んだYouTubeの一時停止ボタンをiframe外で制御する方法2017年11月30日 【js】サイトに埋め込んだYouTubeの一時停止ボタンをiframe外で制御する方法

スポンサードリンク

  • 最近の投稿

    • 【基礎】Vue.jsの『コンポーネント』とは?【基礎】Vue.jsの『コンポーネント』とは?2019年6月25日
    • 【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法2019年6月17日
    • コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法2019年3月8日
    • 【Mac】vscodeの拡張機能を一括インストールする方法【Mac】vscodeの拡張機能を一括インストールする方法2019年3月8日
    • js不要!cssのみで『無限ループスライダー』を作成する方法js不要!cssのみで『無限ループスライダー』を作成する方法2019年2月24日
    • jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法2019年1月30日
    • 【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法2019年1月30日
    • 【css】文字(テキスト)にborderをつけるように縁取りをする方法【css】文字(テキスト)にborderをつけるように縁取りをする方法2019年1月30日
  • カテゴリー

    • AMP (2)
    • android (1)
    • atom (2)
    • css (25)
    • facebook (1)
    • font (1)
    • form (1)
    • FTP (1)
    • git (3)
    • gulp (3)
    • html (2)
    • IE (1)
    • instagram (1)
    • iphone (3)
    • jquery (13)
    • js (5)
    • Mac (10)
    • Photoshop (5)
    • SourceTree (5)
    • Subversion (1)
    • twitter (1)
    • Vue.js (3)
    • Webフォント (1)
    • windows (2)
    • WordPress (7)
    • お知らせ (1)
    • サクラエディタ (1)
    • セキュリティ (1)
    • パララックス (1)
    • 便利ツール (6)
    • 差分チェック (1)
    • 日記 (4)
  • アーカイブ

  • タグ

    android atom background-image before break-all clcl clipmail counter-increment cssハック facebook git github html IE11 instagram iphone ipアドレス linear-gradient Math.random mCustomScrollbar Noto Sans Japanese select snapwidget SourceTree table tool transform transition twitter url改行 windows word-break お問い合わせ コピペ サクラエディタ スクロールバー タスクバー テキストエディタ パッケージ フォーム プラグイン 埋め込み 擬似クラス 改行コード 純正ボタン

    Copyright © 2016 ヤビブロ All Rights Reserved.