色や項目を選択するとコードが生成されます。既に設置済みでデザインのみを変更する場合は[変更]を選択して1行目のコードを差し替えてください。
【36色】css番号1～18、51～68（1と51は通常カラー）

---

---

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

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

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

<div class="twWTL wtlx-css3-size-head-font-box" style="width:250px;">

<a class="twitter-timeline" href="https://twitter...." data-widget-id="...">ツイート</a>
<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>

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

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

---

スタイルを追加する方法 | 補足・注意事項 | マークアップ・セレクタ

スクリプト

　スクリプトは1つだけ追加します。ウィジェットを複数設置する場合も1つで動作します。追加する場所は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" src="https://blog-imgs-48.fc2.com/p/a/r/paro2day/twWTLplg.js" charset="utf-8"></script>

　スクリプトは次のように変更できます（上記と下記は同一）。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://blog-imgs-48.fc2.com/p/a/r/paro2day/twWTLplg.js" charset="utf-8"></script>

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

<script type="text/javascript" src="https://blog-imgs-48.fc2.com/p/a/r/paro2day/twWTLplg.js" charset="utf-8"></script>

　FC2ブログ以外に設置してスクリプトが読み込まれない場合はtwWTLplg.jsリンクを右クリックしてリンク先を保存＆アップロードしてください。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="アップロードしたファイルのアドレス" charset="utf-8"></script>

---

　ウィジェットページで作成されたスクリプトも1つだけで動作します。

<div class="twWTL wtlx-css3-size-head-font-box">
<a class="twitter-timeline" href="https://twitter.com/search?q=%E3%81%82%E3%82%8A%E3%81%8C%E3%81%A8%E3%81%86" data-widget-id="309009425719492609">ありがとう に関するツイート</a>
<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>

<div class="twWTL wtlx-css4-size-head-font1-box">
<a class="twitter-timeline" href="https://twitter.com/news_parody/%E3%82%86%E3%82%8B%E3%82%AD%E3%83%A3%E3%83%A9" data-widget-id="308993391260213248">リストからのツイート</a>
</div>

　ウィジェットのスクリプトは次のように変更できます（上記赤字部分と下記は同一）。

<script type="text/javascript" src="http://platform.twitter.com/widgets.js" id="twitter-wjs"></script>

スタイルを追加する方法

直接記入

<div class="twWTL wtlx-css3-size-head-font-box">
ウィジェットのコード

<!--
ここに追加したいCSSコードを記述
--></div>

　「</div>」直前にコメントアウト「<!-- -->」を追加してその中にCSSコードを記述するとそのウィジェットに新しいスタイルが追加されます。

<!--
body .twitter-timeline{background: red !important;}

--></div>

　上記のようにすればウィジェットの背景色が赤色になります。指定するときは「!imortant」を付けるようにしてください。

　複数のウィジェットにまとめて新しいスタイルを追加するときは最初に読み込まれるウィジェットの手前に以下のコードを追加してください。その中に共通のCSSを一つだけ記述します。

<div id="wtlcss"><!--

ここに全てのウィジェット共通のCSSコード

--></div>

　CSSコード内にはIE8以下でのみ読み込ませるコメントアウト『/*IE8 ～ */』が使用出来ます（opacityによる判定）。IE8以下では色のrgba指定、CSS3が無効になります。

/*IE8
ここにIE8以下で読み込ませるCSSコード
*/

　CSSコード内に「<」「>」を記述するときは次のようにします。

<　→　%3C
>　→　%3E

cssファイル挿入

　cssファイルを使用する場合はscriptコードをウィジェットより前に移動させ、その直後にファイル指定のためのコード（赤字部分）を追加します。

<script type="text/javascript">
document.write(unescape('%3Cscript src="'+'http://blog-imgs-48.fc2.com/p/a/r/paro2day/twWTLplg'+(typeof jQuery=='undefined'?'-jq':'')+'.js" type="text/javascript" charset="utf-8"%3E%3C/script%3E'));
</script>
<script type="text/javascript">
twWL.files.TypeA = 'cssファイルAのアドレス';
</script>

<div class="twWTL wtlx-css-size-head-font-box-skinTypeA">
ウィジェットのコード
</div>

　『twWL.files.半角英字』でファイルを追加。そのファイルを適用するウィジェットのdiv要素に『-skin半角英字』を追加します（半角英字は同一）。

　複数のファイルを使い分けるときは次のようにします。

<script type="text/javascript">
document.write(unescape('%3Cscript src="'+'http://blog-imgs-48.fc2.com/p/a/r/paro2day/twWTLplg'+(typeof jQuery=='undefined'?'-jq':'')+'.js" type="text/javascript" charset="utf-8"%3E%3C/script%3E'));
</script>
<script type="text/javascript">
twWL.files.TypeA = 'cssファイルAのアドレス';
twWL.files.TypeB = 'cssファイルBのアドレス';
</script>

<div class="twWTL wtlx-css-size-head-font-box-skinTypeA">
ウィジェット1
</div>

<div class="twWTL wtlx-css-size-head-font-box-skinTypeB">
ウィジェット2
</div>


　上記の場合はウィジェット1にTypeAのCSSファイルが適用され、ウィジェット2にTypeBのCSSファイルが適用されます。

補足

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

<div class="twWTL wtlx-css3-size-head-font-box" title="@twitter">

　titleに半角スペースを入れると見出しが非表示になります。

<div class="twWTL wtlx-css3-size-head-font-box" title=" ">

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

<div class="twWTL wtlx-css3-size-head-font-box hoge">

注意事項

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

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

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

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

　再配布はご遠慮ください。

マークアップ・セレクタ

/* 全ての要素に適用 */
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 {

}


関連記事

• FC2ブログサーバ移設後の記事プレビューにおける円記号の扱い
• FC2ブログサーバー移設の確認事項2　管理画面URL変更『admin』
• FC2ブログ管理画面の画像高速表示の設定ができない　記事下広告非表示
• Twitter公式ウィジェットのフォント・背景色などを変更するプラグイン
• FC2ブログ管理画面左上メニューがクリックできない Adblock設定の方法
• FC2ブログ管理画面のお知らせページ、デザイン変更　大きなアイコンメニュー
• FC2ブログのrobots.txtファイル更新…最新記事がインデックスされない問題