Twitter公式ウィジェットのフォント・背景色などを自由に変更する方法 : Web

Twitter公式ウィジェットのフォント・背景色などを自由に変更する方法

2013-03-08 金 00:55
Web

　ツイッターのタイムラインを表示する際のディスプレイ要件がガチガチになってしまったそうです。

　現在、公式ウィジェットのテーマは「明るい」と「暗い」の2種類のみです。
　そのデザインをJavaScriptとCSSで無理やりカスタマイズする方法です。ただし、ツイッター側のマークアップなどが変更されると指定が無効になることがあります。

　色や項目を選択するとコードが生成されます。
　» 設置サンプル

　CSSコードの作成などが面倒な場合はデザイン選択式のプラグイン（簡易版）をご利用ください。

　ウィジェットはTwitter公式のウィジェットページから作成できます（メニューの[設定]からサイドバー左下のウィジェット）。ページを開いたら右上の『新規作成』をクリックしてタイムラインなどを選択してオプションを適当に設定。ドメインには必ず設置するサイトのアドレスを指定します。最後に『ウィジェットを作成』をクリックして表示されたコードをコピーして指定された場所に貼り付けます。
　横幅はウィジェットのコードに『width="○○"』を付けて指定します。

<a class="twitter-timeline" width="250" href="https://twitter.com/...">ツイート</a&gt

　デフォルトでは設置した場所の幅100％になるので親要素に幅を指定するのも有効です。

<div class="twWTL wtlx-" style="width:250px;"> <a class="twitter-timeline" href="https://twitter...." data-widget-id="...">ツイート</a&gt <script type="text/javascript">!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </div&gt

　縦幅はウィジェットを更新しなくても『height="○○"』で指定できます。

<a class="twitter-timeline" height="350" href="https://twitter.com/...">ツイート</a&gt

　生成されるCSSコードはあくまでサンプルです。必要なものだけ編集してご利用ください（参考マークアップ・セレクタ）。font-familyの1行を追加するだけでも印象がだいぶ違います。

　作成したウィジェットのテーマ（明るい・暗い）によってデフォルトで適用されるCSSが変わります。それによって生成されたコードのclass名を変更する必要があるかもしれません。明るめの色は「wtlx」、暗めの色は「wtlo」になっていることを確認してください。

明るい：<div class="twWTL wtlx-"> 暗い：<div class="twWTL wtlo-">

　style直接記入でCSSのみを差し替えるときは『style直接記入』を選択した状態で『コード分割表示』をチェックしてCSSコードのみをコピー上書き貼付けしてください。

　cssファイルを使用する場合はscriptコードのskinのアドレスを自分がアップロードしたファイルのものに変更してください。適用されるCSSファイルはウィジェットの親要素のclass名（-○○○）と連動しています。filesの名前を『skin』から『hoge』に変更した場合は『wtlx-hoge』です。
　名前（○○○）には半角英数字のみ使用できます。

<div class="twWTL wtlx-skin"> 　ウィジェットA </div> //script files : { skin : 'http://blog-imgs-48.fc2.com/p/a/r/paro2day/WidgetsSample-meiryo.css（変更）' },

　IE8以下のスタイルは値の末尾に『\9』を加えます。『CSSファイル使用』を選択した状態で生成されたCSSコードは既に挿入済みです。style直接記入のCSSコードを使う場合はコメントアウトを外して挿入する必要があります。

.timeline-footer { background: #194a6c !important\9;}

補足・注意事項 | 複数のウィジェットを設置 | デザイン選択プラグイン

　jQueryが既に読み込まれている場合は最初にある次のコードを削除してください（このコードを削除しても動作すれば必要ありません）。

　削除して動作しなくなったときはそのまま使用しても問題ありませんが、ツイッターのscriptと一緒に<head>内にでも移動させておくといいかもしれません。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="http://platform.twitter.com/widgets.js" id="twitter-wjs"></script> </head>

　上記のように設置した場合は以下の記述は必要ありません。

//削除 <script type="text/javascript">if(typeof jQuery=='undefined'){document.write(unescape('%3Cscript src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"%3E%3C/script%3E'));}</script> //削除 <script type="text/javascript">!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

　さらに生成されたコード最下部のscript要素の中身をjsファイルに貼り付け＆アップロードして同様に<head>内に移動させるとすっきりします。

補足

　CSSの「/*IE8 ～ */」の間に指定されたスタイルはIE8以下でのみ読み込まれます（opacityによる判定）。IE8以下では色のrgba指定、CSS3が無効になります。

/*IE8 ここにIE8以下で読み込むCSSコード */

　style直接記入でCSSコード内に「<」「>」を記述するときは次のようにします。CSSファイルの場合は変換せずにそのまま「<」「>」と記述してください。

<　→　%3C >　→　%3E

　div要素にtitleを付けるとそれが見出しになります。

<div class="twWTL wtlx-" title="@twitter">

　style直接記入のCSSは必ず「</div>」直前のコメントアウトで記述するようにします。

</div>

■ダメな例 　</div>  </div> <div>hoge</div></div>

　divの『class="twWTL wtlx-"』は必須です。クラス名を追加するときは半角スペースを空けて追加してください。

<div class="twWTL wtlx- hoge"> <div class="twWTL wtlx-skin hoge">

注意事項

　ウィジェットのマークアップが変更されると指定したデザインが無効になることがあります。フォントの指定などマークアップにほとんど左右されないプロパティは有効です。

body * {font-family: 'メイリオ',Meiryo,Arial,sans-serif !important;}

　CSSで自由にカスタマイズできますが、新しくなったツイッターの開発者ディスプレイ要件ではタイムラインを表示する際のアイコンの位置や日時表示、お気に入りなどのアクションボタンの配置などが事細かに指定されていることを念頭に置いておいた方がいいかもしれません。

　https://dev.twitter.com/terms/display-requirements

複数のウィジェットを設置

Style直接記入形式

　最初に読み込まれるウィジェットの手前に以下のコードを追加してください。その中に共通のCSSを一つだけ記述します。スクリプトは1つだけで動作します。jsファイルの場合も1つです。

<div id="wtlcss"></div> <script type="text/javascript">if(typeof jQuery=='undefined'){document.write(unescape('%3Cscript src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"%3E%3C/script%3E'));}</script> <script type="text/javascript"> var twWL={ （略） $(window).load(function(){setTimeout(twWL.stop,4000);});}); </script> <div class="twWTL wtlx-"> 　ウィジェットA </div> <div class="twWTL wtlx-"> 　ウィジェットB </div> <div class="twWTL wtlx-"> 　ウィジェットC </div>

　共通CSSコード以外のスタイルを個別に指定するときは各ウィジェットの「</div>」直前にコメントアウトで追加します。

<div class="twWTL wtlx-"> 　ウィジェットA </div> <div class="twWTL wtlx-"> 　ウィジェットB </div> <div class="twWTL wtlx-"> 　ウィジェットC </div>

　上記のようにするとウィジェットCには共通CSSと追加した「.twitter-timeline」の指定が適用されます。

CSSファイル形式

　スクリプトは1つだけで動作します。jsファイルの場合も1つです。

<script type="text/javascript">if(typeof jQuery=='undefined'){document.write(unescape('%3Cscript src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"%3E%3C/script%3E'));}</script> <script type="text/javascript"> var twWL = {files : { skin : 'http://blog-imgs-48.fc2.com/p/a/r/paro2day/WidgetsSample-E8F5FF-0.css' }, （省略） </script> <div class="twWTL wtlx-skin"> 　ウィジェットA </div> <div class="twWTL wtlx-skin"> 　ウィジェットB </div>

　デザインを使い分けるときはfilesの中身を「,」で繋げて追加します。

//script files : { skin : 'http://blog-imgs-48.fc2.com/p/a/r/paro2day/WidgetsSample-E8F5FF-0.css', blue : 'http://blog-imgs-48.fc2.com/p/a/r/paro2day/WidgetsSample-FFF6E8-0.css' },

　このように指定するとウィジェットAはskinのCSSが適用され、BにはblueのCSSが適用されます。

<div class="twWTL wtlx-skin"> 　ウィジェットA </div> <div class="twWTL wtlx-blue"> 　ウィジェットB </div>

マークアップ・セレクタ

/* 全ての要素に適用 */ body * { font-family: メイリオ,Meiryo,Arial,sans-serif !important; } /* 親要素（全体） */ .twitter-timeline { background: #fff !important; } /* 横幅319px以下のときの親要素（全体） */ .var-narrow { } /* 全体の枠線・区切り線の色 */ .customisable-border { border-color: #ddd !important; } /* 最下部返信フォームの表示 */ .timeline-footer { display: none !important; } /* 全体のヘッダ見出し */ .timeline-header { } /* ツイート単位の親要素 */ .tweet { } /* ツイート単位のヘッダ */ .header { } /* ユーザ名 */ .p-name { } /* ID名 */ .p-nickname { } /* ツイート本文 */ .e-entry-title { } /* ツイートのフッタ */ .footer { } /* ツイートのフッタ：左下展開テキスト */ .expand b { } /* リツイートなどのアクションボタン親要素 */ .tweet-actions { } /* 概要・画像表示の親要素 */ .detail-content { } /* リツイート・お気に入りの数、id名:hoverの色 */ a:hover,a:active,.p-author a.profile:hover,.p-authora.profile:focus, .retweet-credit .profile:hover,.retweet-credit .profile:focus, .stats strong,.no-tweets-pane .load-tweets,.nsfw { color: #08b !important; } /* 本文リンクの色、ユーザ名・時刻・展開テキスト:hoverの色 */ .customisable,.customisable:link,.customisable:visited, .customisable:hover,.customisable:active, .customisable-highlight:hover,a:hover .customisable-highlight,a:focus .customisable-highlight { color: #08b !important; } /* リツイートなどのアクションボタン:hoverの色 */ a:hover .ic-mask,a:focus .ic-mask { background-color: #08b !important; } /* ツイート添付の画像 */ .inline-media img { } /* 横幅が320px以上のときに開くと表示される「・」 */ .stats-wide > b { }

関連記事

5 Hatena tweet Top

comment
anonymous 2013-06-15 11:47 No.2331 #-URL
ボタンの日本語か英語の選択、マークのテキスト化、アイコンサイズの変更、区切り線の有無、ツイートの間の隙間サイズ変更、表示件数の変更
などがいつか出来ればと思います。
. 2013-09-07 23:07 No.2595 #-URLhttp://banshu-miki.seesaa.net/
横幅が広く出来たらいいなぁ。
anonymous 2016-03-07 12:14 No.4839 #-URL
2016/03/07
現在確認したところ反映されていないようです。
マクノスケ 2016-03-10 10:37 No.4840 #-URL
これまでフォントをメイリオに出来るのが私的に大いにツボで愛用させて戴いておりましたが、Ｔｗｉｔｔｅｒのウィジェットが新しくなってから反映されなくなってしまいました。難しいことはわかりませんが、もし可能ならば今回も対応して戴ければ幸いです。
anonymous 2016-03-25 13:57 No.4853 #-URLhttp://ameblo.jp/43102j/entry-12142937064.html
class名が変更されていたのが原因だったようで、自分であれこれしてたらできました。