「ユーザーフィード」ウィジェットの外観を変更する

Twitterタイムラインウィジェットは、TwitterフィードをWebサイトに埋め込むことができるツールです。 残念ながら、標準の設定セットでは、限られた数の表示パラメーターを変更でき、ウィジェット要素に任意のcssスタイルを適用できません。 この記事では、この制限を回避し、デザインに合うようにリボンのスタイルを設定する方法について説明します。

ウィジェットを追加する

Twitterフィードをサイトに追加するには、ウィジェットコードを挿入する必要があります。 これは、次のリンクhttps://twitter.com/settings/widgetsで入手できます 。 このページでは、初期設定（ツイート表示オプションの設定、高さの指定、テーマの選択）を実行し、ウィジェットコードをコピーすることもできます。 コードは2つの要素で構成されます。属性（ウィジェット設定）を持つアンカーと、twitterライブラリをロードするjavascriptコードです。

<a class="twitter-timeline" href="https://twitter.com/zewa4ka" data-widget-id="362933628772163584">  @zewa4ka</a>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

しかし、ウィジェットをカスタマイズするために提供されているのはこれだけではありません。 https://dev.twitter.com/docs/embedded-timelines#customizationで追加のパラメーターを知ることができます 。 ただし、いずれにしても、標準的な方法でウィジェット要素のスタイルを変更する問題を解決することはできません。

スタイルを適用する

一見、問題の解決策は表面にあります。ウィジェットが生成するHTMLマークアップを確認し、スタイルを再定義する必要があります。 しかし、ここでは少し失望するのを待っています。リボン要素はiframe内にあるため、ページのスタイルはそれらに届きません。 そのため、別の方法で、フレーム内にスタイル付きのブロックを挿入する必要があります。



フレームのコンテンツは、ページが既にロードされた後、それを使用する前にロードされます。その準備ができているかどうかを確認する必要があります。

 $(function () { var $cont = $(".twitter-container"), prd = setInterval(function () { if ($cont.find("> iframe").contents().find(".twitter-timeline").length > 0) { clearInterval(prd) //      } }, 100); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、ページにスタイル付きのブロックを配置し、「twitterStyle」識別子をハングさせます。

 #twitterStyled .tweet { padding: 10px 10px 5px 10px; margin:10px; border-radius: 10px; background-color: #9bcfe2; } #twitterStyled .tweet:nth-child(odd) { margin-right:50px; } #twitterStyled .tweet:nth-child(even) { margin-left:50px; } #twitterStyled .profile > img { display: none; } #twitterStyled .tweet .tweet-actions { visibility: hidden; } #twitterStyled .tweet:hover .tweet-actions { visibility: visible; } #twitterStyled .stream { background-color: #7AC0DA; color:#fff; } #twitterStyled .header { border-bottom: 1px dashed #fff; margin-bottom:10px; padding-bottom:5px; } #twitterStyled .p-name { color: #207290; } #twitterStyled .p-nickname, #twitterStyled .dt-updated { color: #2b8fb4; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

フレームを使用して次の操作を実行します。id = "＃twitterStyled"属性を本文にハングアップし（スタイルの優先順位を気にしないように）、スタイルが内部にあるブロックを追加します。

 $body.attr("id", "twitterStyled") .append($("#twitterStyle"));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

それだけですか？

もちろん違います！ iframeにアクセスできたら、iframeで何でもできます。 不要なブロックの削除、アニメーションの追加、要素の交換ができます。 ウィジェットの内部構造は、お気に入りのブラウザーの開発者ツールを使用していつでも表示できます。 そして、すべてはあなたの想像力によってのみ制限されます。



ここに例を見ることができます： http : //jsfiddle.net/SCbsW/