2013年6月12日

　本日、Twitterの仕様変更（API1.0廃止）によりプラグインは利用できなくなりました。応急措置としてこれに伴うエラーが出ないよう更新しました。設置したままでも問題ありませんが動作はしません。Twitterのタイムラインを表示する際は公式ウィジェットなどをご利用ください。

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

　公式ウィジェットのデザインを変更したいときは「Twitter公式ウィジェットのフォント・背景色などを変更するプラグイン」などをご覧ください。

　登録中のプラグインについては時間の取れるときに変更する予定です。プラグインのご利用ありがとうございました。

---

---

プラグインの設定 ＞ 共有プラグイン追加
　作者に [paro2day] を入れて検索　『Twitter...A』をダウンロード

---

※2011-11-11　FC2ファイルサーバーの更新が正常に行われず、スクリプトの変更が反映されない場合があります。プラグインコード内のアドレスを変更することを推奨します。

//変更箇所
s.src='http://blog-imgs-46.fc2.com/p/a/r/paro2day/twitterA.js';

　「46」を「15」に変更して、「.js」の直前に1を追加します。

http://blog-imgs-15.fc2.com/p/a/r/paro2day/twitterA1.js

　「twitterAj.js」の場合は「twitterAj1.js」とします。

---

• 設定方法
• 公式RTを表示する
• 文字色・文字サイズ・行間の変更
• 線の色・余白を変更する
• ツイートにカーソルをあわせたときの背景色を変更する
• スクロールバーを表示する
• ユーザー名の左横にプロフィール画像を入れる
• 時刻の12、24時間表記の切り替え
• タイムスタンプの表示切り替え「○○ago」「○○前」「日時をそのまま」
• 日付表示形式を変更する（2010-11-11etc）
• 日付部分（Permalink）のリンクを外す
• 「Twitpic」「Youtube」「ニコニコ動画」などのサムネイル画像を表示する
• リンクの表記をアドレスから[URL]などの任意のテキストに変更する
• ハッシュタグのテキストや文字色など変更・非表示・リンクを外す
• 指定したハッシュタグのツイートのみ取得・除去
• 指定したキーワードを含むツイートのみ取得・除去、伏字に置換 new
• 「reply」「RT」のリンクを非表示に
• Loading... の文字を変更する
• 「＜」「＞」「Reload」ボタンの色や位置を変更する
• 「＜」「＞」「Reload」ボタンの枠線の色（画像）を変更する
• 「Reload」ボタンを削除する
• 「＜」「＞」「Reload」ボタンを削除する
• 公式と同じ日本語表記にする（秒前、分前、時間前）
• 公式リツイートが多い場合の注意事項
• デザインスタイルをテンプレートに入れる
• スクリプトを別のサーバにアップする
• ご利用にあたって・更新履歴 2013 01-16

設定方法

　（サイドメニューの[環境設定][プラグインの設定]にある）ダウンロードした『Twitter...A』プラグインの詳細をクリック。プラグインの改造から【HTMLの編集】を行います。

• 初期設定
• 総表示件数の設定
• 前後（ページごと）の表示件数の設定
• @ユーザー名 で始まる返信ツイートの表示・非表示
• @ユーザー名 で始まる返信ツイートのリンク
• ツイート中に @ユーザー名 を含むツイートの表示・非表示
• ツイートの並び
• 特定ソースの表示・非表示
• リンクの開き方

初期設定

　デフォルトでは fc2info のアカウントになっています。これを自分のユーザー名に変更します。

<a href="http://twitter.com/fc2info" target="_blank">Twitter</a>

変更後

<a href="http://twitter.com/ユーザー名" target="_blank">ユーザー名やニックネーム</a>

---

user : 'fc2info',

変更後

user : 'ユーザー名',

---

（例）ユーザー名 : paroday

<a href="http://twitter.com/paroday" target="_blank">PARO</a>

user : 'paroday',

表示件数の設定

　総表示件数は次の一番左の数値で指定します。デフォルトでは 18 件表示されます。

count : [ 18, 8, 12 ],

count : [ 21, 5, 10 ], // 全部で21件表示

前後（ページごと）の表示件数の設定

　前後（ページごと）の表示件数は次の数値で指定します。デフォルトでは1ページに 3 件ずつ表示されます。

page : 3,

page : 1, // 1件ずつ表示

@ユーザー名 で始まる返信ツイートの表示・非表示

　デフォルトでは true 、表示するになっています。

reply : true,

　非表示にするときは false にします。

reply : false,

　すると次のような返信ツイートが非表示になります。

@paroday おはようございました。 about 9 hour ago

　false の設定で@返信のツイートを多用する傾向にある場合は、ツイートが表示件数分、表示されないときがあります。そのような場合は表示件数の一番右の数値を増やして調整します。増やしすぎると読み込む量が多くなるため、必要以上に増やさない方がいいと思います。

count : [ 18, 8, 17 ],

　あまりにも@返信を多用する場合は true にすることを推奨します。

@ユーザー名 で始まる返信ツイートのリンク

　デフォルトでは true 、返信先のツイートになっています。

status : true,

　すると次のような返信ツイートのユーザーリンクが返信先のツイートになります。

@paroday おかえり。 about 9 hour ago

　paroday をクリックするとトップページではなく、返信先のツイートページに飛びます。

ただいま。 about 9 hour ago

※ただし、ツイートの返信から投稿せずに @ユーザー名 で始まるツイートを行った場合は宛先がないため、トップページに飛びます。

　トップページ（http://twitter.com/paroday）にリンクするときは false にします。

status : false,

ツイート中に @ユーザー名 を含むツイートの表示・非表示

　デフォルトでは true 、表示するになっています。

at : true,

　非表示にするときは false にします。

at : false,

　すると次のようなツイートが非表示になります。

赤いのに冷たい理不尽な食べ物よ。 RT @paroday スイカがうまい。 about 1 hour ago

FC2ブログの番犬（ヒヨコ）。 @fc2info about 3 hours ago

　false の設定で@ユーザー名のツイートを多用する傾向にある場合は、ツイートが表示件数分、表示されないときがあります。そのような場合は表示件数の一番右の数値を増やして調整します。増やしすぎると読み込む量が多くなるため、必要以上に増やさない方がいいと思います。

count : [ 18, 8, 17 ],

　あまりにも@ユーザー名を多用する場合は true にすることを推奨します。

ツイートの並び

　デフォルトでは true 、新しいツイートから順に表示します。

line : true,

赤いのに冷たい理不尽な食べ物よ。 RT @paroday スイカがうまい。 about 1 hour ago

FC2ブログの番犬（ヒヨコ）。 @fc2info about 3 hours ago

　並びを逆にするときは false にします。

FC2ブログの番犬（ヒヨコ）。 @fc2info about 3 hours ago

赤いのに冷たい理不尽な食べ物よ。 RT @paroday スイカがうまい。 about 1 hour ago

特定ソースの表示・非表示

　指定したソースからのツイートを非表示にします。例えば、次のようにするとFC2ブログの通知ツイートが非表示になります（'FC2 Blog Notify' はFC2ブログのTwitter連携機能による通知ツイート）。

source : ['FC2 Blog Notify'],

FC2ブログの番犬（ヒヨコ）。 @fc2info 8:41 PM Jun 27th Twitpicから

　○○から の部分がソースです。Twitpicからのツイートを非表示にする場合は次のようにします。

source : ['Twitpic'],

　複数指定する場合はコンマで繋ぎます。

source : ['FC2 Blog Notify','Twitpic'],

　必要なければ、中身を削除します。

source : [],

リンクの開き方

　左が Permalink（日時部分のリンク）、右がツイート本文内のリンクです。

tgt : ['_blank', '_blank']

　とすれば、リンクすべてが新しいウインドウで開きます。

'_blank'  // 新しいウインドウ
'_self'   // 同じウインドウ（フレームそのまま）
'_top'    // 同じウインドウ（フレーム解除）

tgt : ['_blank', '_top']

　とすれば、ツイート本文内のリンクが新しいウインドウで開き、日時は同じウインドウで開きます。

FC2ブログの番犬（ヒヨコ）。 @fc2info ←新しいウインドウ 8:41 PM Jun 27th ←同じウインドウ

• ▲

公式RTを表示する

　line の後などに rts : 1, を追加します。最後のコンマを忘れないように注意します。

line : true,
rts : 1,

　すると公式RTが「RT @ユーザ名 : 」の形式で表示されます。

rts : 2,

　2に変更するとアイコン付きで表示されます。

rts : 3,

　3に変更するとリツイート元のプロフィールアイコン付きで表示されます。

　必要ない場合は、削除するか「0」を指定します。

• ▲

文字色・文字サイズ・行間などの変更

　ある程度はリセットしていますが、文字サイズなどは利用しているテンプレートによります。各スタイルやその優先順位を把握している場合は、不要なプロパティや「!important」を削除してください。

• 文字サイズの変更
• ツイート本文の文字色
• ツイート本文内のリンク文字色
• 日時部分（about 2 hours agoなど）の文字色、文字サイズ、下線
• 行間の変更

文字サイズの変更

　次のスタイルの font-size を変更します。

#twitterTweetA {
 font-size: 12px; /* 文字サイズ */
}

　変わらないときは !important をつけます。

font-size: 12px !important;

ツイート本文の文字色

　次のスタイルに color を加えます。

div#twitterTweetA li {
 margin: 0 !important;
 padding: 0.7em 0.2em !important;
 border-top: 1px #eeeeee solid !important; /* 線の色 #eeeeee */
 font-size: 100%;
 color: #000000;
}

　色が変わらないときは !important をつけます。

color: #000000 !important;

ツイート本文内のリンク文字色、下線

　style要素内やテンプレートのスタイルシート欄に次のコードを加えます。

div#twitterTweetA li .twBody a:link { 
  color: #0099cc;
  text-decoration: none !important;
}
div#twitterTweetA li .twBody a:visited { 
  color: #0099cc;
  text-decoration: none !important;
}
div#twitterTweetA li .twBody a:hover { 
  color: #000000;
  text-decoration: underline !important;
}

　link は未訪問。visited は訪問済み。hover はカーソルを合わせたときの文字色です。 underline で下線を表示、none で下線を非表示にします。

　色が変わらないときは すべての color に !important をつけます。

color: #0099cc !important;

　未訪問、訪問済みを同じ色にする場合は次のようにしてもいいかもしれません。

div#twitterTweetA li .twBody a { 
  color: #0099cc !important;
}
div#twitterTweetA li .twBody a:hover { 
  color: #000000 !important;
}

日時部分（2 hours agoなど）の文字サイズ、下線、文字色

　次のスタイルを変更します。 underline を none にすると下線がなくなります。

#twitterTweetA li .twTimestamp a {
 font-size: 11px;
 text-decoration: underline !important;
}

　文字サイズが変わらないときは !important をつけます。

font-size: 11px !important;

　リンク文字色はstyle要素内やテンプレートのスタイルシート欄に次のコードを加えます。

#twitterTweetA li .twTimestamp a:link { 
  color: #338800;
  text-decoration: underline !important;
}
#twitterTweetA li .twTimestamp a:visited { 
  color: #338800;
  text-decoration: underline !important;
}
#twitterTweetA li .twTimestamp a:hover { 
  color: #338800;
  text-decoration: none !important;
}

　link は未訪問。visited は訪問済み。hover はカーソルを合わせたときの文字色です。 underline で下線を表示、none で下線を非表示にします。

　色が変わらないときは すべての color に !important をつけます。

color: #338800 !important;

　未訪問、訪問済みを同じ色にする場合は次のようにしてもいいかもしれません。

#twitterTweetA li .twTimestamp a {
 color: #338800;
 text-decoration: underline !important;
}
#twitterTweetA li .twTimestamp a:hover { 
  color: #338800;
  text-decoration: none !important;
}

行間の変更

　スタイル の div#twitterTweetA li に line-height: 1.4; などを追加します。数値は 1.2～1.9 など好みの数値に変更してください。

div#twitterTweetA li {
 margin: 0 !important;
 padding: 0.7em 0.2em !important;
 border-top: 1px #eeeeee solid !important; /* 線の色 #eeeeee */
 font-size: 100%;
 line-height: 1.4;
}

　変わらないときは !important をつけます。

line-height: 1.4 !important;

• ▲

線の色・余白を変更する

　次のスタイルの #eeeeee 部分を変更すると線の色が変わります。

div#twitterTweetA li {
 margin: 0 !important;
 padding: 0.7em 0.2em !important;
 border-top: 1px #aaaaaa solid !important; /* 線の色 #eeeeee */
 font-size: 100%;
}

　0.7em 0.2em 部分を変更すると余白が増減します。em を px に変更して、 10px 5px とすることもできます。

div#twitterTweetA li {
 margin: 0 !important;
 padding: 0.5em 0.1em !important;
 border-top: 1px #eeeeee solid !important; /* 線の色 #eeeeee */
 font-size: 100%;
}

• ▲

ツイートにカーソルをあわせたときの背景色を変更する

　style要素やテンプレートのスタイルシート欄に次のコードを加えます。# 部分で背景色を指定します。

div#twitterTweetA li:hover {
 background: #fafafa;
}

　変わらないときは !important をつけます。

background: #fafafa; !important;

• ▲

スクロールバーを表示する

　次のスタイルに height と overflow を追加します。height には適当な数値を指定してください。div#twitterTweetA li の 2px はスクロールバーまでの右余白です。

div#twitterTweetA ol {
 margin: 0.3em 0 !important;
 height: 250px; /* 高さ */
 overflow: auto;
}

div#twitterTweetA li {
 margin: 0 2px 0 0 !important;
 padding: 0.7em 0.2em !important;
 border-top: 1px #eee solid !important;
 font-size: 100%;
}

　IEでスクロールバーの色を変更するときは次のコードを加えます。色は # の値を適当に変更してください。

div#twitterTweetA ol {
 margin: 0.3em 0 !important;
 height: 250px;
 overflow: auto;
 scrollbar-track-color: #ffffff;
 scrollbar-face-color: #fafafa;
 scrollbar-shadow-color: #cccccc;
 scrollbar-darkshadow-color: #ffffff;
 scrollbar-highlight-color: #ffffff;
 scrollbar-3dlight-color: #cccccc;
 scrollbar-arrow-color: #ff6666;
}

　変わらないときは !important をつけます。

height: 250px !important;

• ▲

ユーザー名の左横にプロフィール画像を入れる

　<p class="twUser"> のすぐ後に次のコードを追加します。

<p class="twUser">
<img src="画像アドレス" class="profileImage" alt="" />

　width や height は画像の大きさにあわせて指定します。

<p class="twUser">
<img width="36" height="36" src="画像アドレス" class="profileImage" alt="" />

　余白などは次のスタイルで変更します。

#twitterTweetA .twUser .profileImage {
 margin: 0 5px 0 0; border: 0 none;
 vertical-align: middle;
}

• ▲

時刻の12、24時間表記の切り替え

12時間表記

　line の後に hour : 12, を追加します。最後のコンマを忘れないように注意します。
　「hour : 24,」自体がない場合は12時間表記になります（デフォルト）。

line : true,
hour : 12,

   8:58 PM Aug 7th   //表示結果

24時間表記

　24 にします。

hour : 24,

   20:58 Aug 7th   //表示結果

• ▲

タイムスタンプの表示切り替え「○○ago」「○○前」「日時をそのまま」

日時をそのまま

　line の後に ago : false, を追加します。最後のコンマを忘れないように注意します。

line : true,
ago : false,

   8:58 PM Aug 7th   //表示結果

「○○ago」「○○前」

　○○agoにするときは true にします。

ago : true,

   3 hours ago   //表示結果

• ▲

日付表示形式を変更する（2010-11-11etc）

　line の後に fdate : 'yyyy-MM-dd hh:mm', を追加します。最後のコンマを忘れないように注意します。
　「fdate : 'yyyy-MM-dd hh:mm',」自体がない場合はデフォルトの表記になります。

line : true,
fdate : 'yyyy-MM-dd hh:mm',

   2010-11-11 20:20   //表示結果

　それぞれ次の項目を表示します。

   yyyy   //年
   MM     //月
   dd     //日
   hh     //時
   mm     //分
   ss     //秒
   ja     //曜日（月、火、水）
   en     //曜日（Mon、Tue、Wed）

fdate : 'MM-dd ja hh:mm',

   11-11 木 20:20   //表示結果

fdate : 'yyyy年MM月dd日 hh時mm分',

   2010年11月11日 20時20分   //表示結果

fdate : 'yyyy年MM月dd日(ja) hh:mm',

   2010年11月11日(木) 20:20   //表示結果

fdate : 'yyyy/MM/dd en hh:mm:ss',

   2010/11/11 Thu 20:20:57   //表示結果

　デフォルトに戻すときは false を指定します。

fdate : false,

• ▲

日付部分（Permalink）のリンクを外す

リンクを外す

　line の後などに timelink : false, を追加します。最後のコンマを忘れないように注意します。

line : true,
timelink : false,

　文字色（888888）などを変更するときは次のスタイルを追加します。

#twitterTweetA .twTimestamp {
 color: #888888 !important;
}

リンクをつける

　true に変更します。「timelink : false,」自体がない場合もリンクがつきます。

timelink : true,

• ▲

「Twitpic」「Youtube」「ニコニコ動画」などのサムネイル画像を表示する

サムネイル画像を表示しない

　line の後に thumbnail : false, を追加します。最後のコンマを忘れないように注意します。
　「thumbnail : true,」自体がない場合も表示されません（デフォルト）。

line : true,
thumbnail : false,

サムネイル画像を表示

　true にします。

thumbnail : true,

　style要素内やテンプレートのスタイルシート欄に次のコードを加えます。

#twitterTweetA .twBody img{
 margin: 0.5em 0.5em !important; padding: 0 !important;
 border: 3px #e9e9e9 solid !important; /* 枠線 */
 display: block;
}
#twitterTweetA .twBody img:hover{
 border: 3px #00ddff solid !important; /* 枠線 */
}

　margin: 0.5em 0.5em は 画像の 上下余白 左右余白 になります。0.9emなどにすると余白が増えます。

　border: 3px #e9e9e9 solid は画像の枠線です。必要ない場合はこの行を削除します。線の太さは 3px 、色は #e9e9e9 で指定します。img:hover も同様です。

　対応サービスは次の通りです（サービス名 : URL例）

• imgur : http://imgur.com/画像ID
• Mobypicture : http://moby.to/画像ID
• Ow.ly : http://ow.ly/i/画像ID
• PhotoShare : http://bctiny.com/p画像ID
• Plixi : http://plixi.com/p画像ID , http://tweetphoto.com/画像ID
• Twitgoo : http://twitgoo.com/画像ID
• Twitpic : http://twitpic.com/画像ID
• yFrog : http://yfrog.com/画像ID
• Youtube : http://youtu.be/動画ID , http://www.youtube.com/watch?v=動画ID
• 携帯百景 : http://movapic.com/画像ID
• ニコニコ静画 : http://nico.ms/im画像ID , http://seiga.nicovideo.jp/seiga/im画像ID
• ニコニコ動画 : http://nico.ms/sm動画ID , http://www.nicovideo.jp/watch/sm動画ID

　ページによってはサムネイルが表示されないこともあります。ニコニコ動画のニコニコ生放送やコミュニティ、チャンネルなどは対象外です。

　サービス側の仕様変更により画像保管場所が変わると表示されなくなります。動作確認や不具合などの報告は@parodayなどにお願いします。

• ▲

リンクの表記をアドレスから[URL]などの任意のテキストに変更する

任意のテキストを指定する

　line の後に linktext : '[URL]', を追加します。最後のコンマを忘れないように注意します。「''」内のテキストを変更します。

line : true,
linktext : '[URL]',

   [URL]   //表示結果

linktext : '→URL',

   →URL   //表示結果

アドレスをそのまま表示

　false にします。
　「linktext : '[URL]',」自体がない場合も表示されません（デフォルト）。

linktext : false,

• ▲

ハッシュタグのテキストや文字色など変更・非表示・リンクを外す

文字色変更と非表示

　スタイルを追加します。<style type="text/css">内か、利用中のテンプレートのスタイルシート欄に以下を追加します。

/* （例）文字色を黒に変更する */
#twitterTweetA a.twTag {
 color: #000000 !important;
}

/* （例）下線をなくす */
#twitterTweetA a.twTag {
 color: #000000 !important;
 text-decoration: none !important;
}

/* （例）非表示にする */
#twitterTweetA a.twTag {display: none !important;}

リンクを外す

　line の後などに taglink : false, を追加します。最後のコンマを忘れないように注意します。

line : true,
taglink : false,

　さらにタグの「#」を除去する場合は 0 にします。

taglink : 0, // 表示結果：#fc2 → fc2

　リンクをつける場合は true にします。「taglink : true,」自体がない場合もリンクがつきます。

taglink : true,

　タグの「#」を除去する場合は 1 にします。

taglink : 1, // 表示結果：#fc2 → fc2

リンクを指定の文字で表示する

taglink : "ここに表示したい文字",

　次のように指定するとハッシュタグのリンクがすべて [#URL] で表示されます。

taglink : "[#URL]", // 表示結果：#fc2 → [#URL]

• ▲

指定したハッシュタグのツイートのみ取得・除去

　最初にファイル名を「imgs-15～A1.js」に変更してください。変更済みの場合は以下の指定が有効になります。先頭・末尾を除くタグの前後には半角スペースが必要です。

　line の後などに tagkey : [ 1, '(タグ名)([ ,]|$)' ], を追加します。最後のコンマを忘れないように注意します。

line : true,
tagkey : [ 1, '(タグ名)([ ,]|$)' ],

　英字は大小文字を問わず含まれます。

//「#japan」「#JAPAN」「#Japan」などを含むツイートのみ取得
tagkey : [ 1, '(japan)([ ,]|$)' ],

　最初の「1」は指定したタグを含むツイートのみ取得です。

　「0」にすると指定したタグのツイートを除去します。

//「#japan」を含むツイートは除去
tagkey : [ 0, '(japan)([ ,]|$)' ],

　「false」にするとタグのついたツイートを全て除去します。

//「#○○」を含むツイートは除去
tagkey : [ false, '(japan)([ ,]|$)' ],

---

　タグを複数指定するときは「|タグ名」を括弧内に入れて繋げます。

//大小文字「#japan」と「#日本」を含むツイートのみ取得
tagkey : [ 1, '(japan|日本)([ ,]|$)' ],

「([ ,]|$)」を外すと、指定したキーワードから始まるタグが全て含まれます。

//大小文字「#japan」から始まるタグ
//「#japan」「#japanese」「#japanish」などを含むツイートのみ取得
tagkey : [ 1, '(japan)' ],

　基本的には、(タグA|タグB|タグC)のように複数指定すれば、事足りると思います。

　必要ない場合は削除するかコメントアウトします。

//tagkey : [ 1, '(japan)([ ,]|$)' ],

---

　以下は補足説明です。

　「?」は直前の文字がある場合とない場合の両方を含みます。

//大小文字「#japan」と「#日本」「#日本人」、「#JPN」を含むツイートのみ取得
tagkey : [ 1, '(japan|日本人?|JPN)([ ,]|$)' ],

　タグ全体を必ず括弧で囲むようにします。括弧の中に括弧があるのは気持ち悪い、というのはいけません。

//大小文字「#japan」と「#日本」「#絵本」を含むツイートのみ取得
tagkey : [ 1, '(japan|(日|絵)本)([ ,]|$)' ],

　「+」や「?」などの記号はハッシュタグに使えないので、指定することはないと思いますが、どうしても条件にマッチしないときは疑わしい文字の所を「.」に変えてみてください。

//「#twitter」「#twittar」「#twittえr」など「.」の部分にあらゆる一文字が補填されます。
tagkey : [ 1, '(twitt.r)([ ,]|$)' ],

• ▲

指定したキーワードを含むツイートのみ取得・除去、伏字に置換

　最初にファイル名を「imgs-15～A1.js」に変更してください。変更済みの場合は以下の指定が有効になります。

　line の後などに twkey : [ 0, "キーワード", 0 ], を追加します。最後のコンマを忘れないように注意します。キーワード部分以外の記号と数字は半角です。キーワードは正規表現が有効です。英字のときは大小文字両方が含まれます。

line : true,
twkey : [ 0, "キーワード", 0 ],

指定したキーワードを含むツイートの非表示

//「バカ」を含むツイート非表示
twkey : [ 0, "バカ", 0 ],

指定したキーワードを含むツイートのみ表示

　最初の数字を「1」に変更するとキーワードを含むツイートのみ表示します。

//「ゲーム」を含むツイートのみ表示
twkey : [ 1, "ゲーム", 0 ],

複数のキーワードを指定する

　「|」（半角入力）で区切って追加します。全角の「｜」ではありません。キーボードにもよりますが、Windowsの場合は「Shift＋￥（円マーク）キー」で「|」を入力できます。

//「バカ」または「アホ」を含むツイート非表示
twkey : [ 0, "バカ|アホ", 0 ],
//「バカ」または「アホ」または「ボケ」を含むツイート非表示
twkey : [ 0, "バカ|アホ|ボケ", 0 ],

指定したキーワードの削除・伏字化

　最後の数字を「""」に変更するとツイート内の指定したキーワードがすべて削除されます。

twkey : [ 0, "バカ", "" ],

バカっていう人がバカなんだからね！
↓
っていう人がなんだからね

　「""」内に適当な文字を入れるとキーワードがすべてその文字に変更されます。半角スペースを入れれば半角スペースに変更されます。

twkey : [ 0, "バカ", "***" ],

バカっていう人がバカなんだからね！
↓
***っていう人が***なんだからね

twkey : [ 0, "バカ|アホ", "●●●" ],

バカっていう人がアホなんだからね！
↓
●●●っていう人が●●●なんだからね

---

　すべての指定を無効にするときはキーワードを空っぽ「""」にしてください。

twkey : [ 0, "", 0 ],

　非表示になるツイートが多くなると取得できるツイートもその分だけ減ります。その場合は count の真ん中の数値や右端の数値を適当に増やしてください。

count : [ 18, 20, 20, ],

• ▲

「reply」「RT」のリンクを非表示に

　<style type="text/css">内か、利用中のテンプレートのスタイルシート欄に以下を追加します。

#twitterTweetA .twTimestamp a + a {display: none !important;} 

　日付部分（Permalink）のリンクを外している場合（timelink : false）は「+ a」を削ってください。

#twitterTweetA .twTimestamp a {display: none !important;} 

• ▲

Loading... の文字を変更する

　次の箇所を任意のテキストに変更します。

 p.appendChild(_d.createTextNode('Loading...'));

 p.appendChild(_d.createTextNode('読み込み中…'));

• ▲

「＜」「＞」「Reload」ボタンの色や位置を変更する

　background の#33ccee の部分で背景色を変更します。

#twReload { /* Reload */
 position: absolute; top: 1px; right: 2px; display:block;
 width:15px; height:13px; overflow: hidden;
 color: #fff;
 background: #33ccee url(http://blog-imgs-46.fc2.com/p/a/r/paro2day/twitterAbtn.gif) -30px top no-repeat;
 cursor: pointer; text-indent: -100px;
}

#twNext { /* ＞ */
 right: 23px;
 background: #33ccee url(http://blog-imgs-46.fc2.com/p/a/r/paro2day/twitterAbtn.gif) -14px top no-repeat;
}
#twPrev { /* ＜ */
 right: 37px;
 background: #33ccee url(http://blog-imgs-46.fc2.com/p/a/r/paro2day/twitterAbtn.gif) left top no-repeat;
}

Reload を #000000 、＞ と ＜ を #ff8800

　カーソルを合わせたときの背景色は 次の部分で変更します。

#twReloadA:hover,.twPages:hover {
 background-color: #ffaa00 !important;
}

　位置を微妙に移動させるときは、次のスタイルの top と right を調整します。top は上からの距離。right は右からの距離です。

#twReload { /* Reload */
 position: absolute; top: 1px; right: 2px; display:block;
 width:15px; height:13px; overflow: hidden;
 color: #fff;
 background: #33ccee url(http://blog-imgs-46.fc2.com/p/a/r/paro2day/twitterAbtn.gif) -30px top no-repeat;
 cursor: pointer; text-indent: -100px;
}
#twNext,#twPrev { /* ＜＞ */
 position: absolute; top: 1px; display:block;
 width: 15px; height: 13px; overflow: hidden;
 color: #fff;
 cursor: pointer; text-indent: -100px;
}
#twNext { /* ＞ */
 right: 23px;
 background: #33ccee url(http://blog-imgs-46.fc2.com/p/a/r/paro2day/twitterAbtn.gif) -14px top no-repeat;
}
#twPrev { /* ＜ */
 right: 37px;
 background: #33ccee url(http://blog-imgs-46.fc2.com/p/a/r/paro2day/twitterAbtn.gif) left top no-repeat;
}

　次のようにするとリロードボタンの左余白が詰められます（1px）。

#twNext { /* ＞ */
 right: 17px;
 background: #33ccee url(http://blog-imgs-46.fc2.com/p/a/r/paro2day/twitterAbtn.gif) -14px top no-repeat;
}
#twPrev { /* ＜ */
 right: 31px;
 background: #33ccee url(http://blog-imgs-46.fc2.com/p/a/r/paro2day/twitterAbtn.gif) left top no-repeat;
}

　次のようにするとリロードボタンが左に、前後のボタンが右に移動します。

#twReload { /* Reload */
 position: absolute; top: 1px; right: 36px; display:block;
 width:15px; height:13px; overflow: hidden;
 color: #fff;
 background: #33ccee url(http://blog-imgs-46.fc2.com/p/a/r/paro2day/twitterAbtn.gif) -30px top no-repeat;
 cursor: pointer; text-indent: -100px;
}

#twNext { /* ＞ */
 right: 2px;
 background: #33ccee url(http://blog-imgs-46.fc2.com/p/a/r/paro2day/twitterAbtn.gif) -14px top no-repeat;
}
#twPrev { /* ＜ */
 right: 16px;
 background: #33ccee url(http://blog-imgs-46.fc2.com/p/a/r/paro2day/twitterAbtn.gif) left top no-repeat;
}

• ▲

「＜」「＞」「Reload」ボタンの枠線の色（画像）を変更する

　スタイルの #twReload #twNext #twPrev の画像アドレスを変更します。色を統一させるときは3箇所すべてを同じにします。

　こちらで用意しているのは以下の6色（+文字白6色）です。背景色は #33ccee で変更します。

http://blog-imgs-37.fc2.com/p/a/r/paro2day/twitterAbtn000.gif
http://blog-imgs-37.fc2.com/p/a/r/paro2day/twitterAbtnw000.gif
http://blog-imgs-37.fc2.com/p/a/r/paro2day/twitterAbtn666.gif
http://blog-imgs-37.fc2.com/p/a/r/paro2day/twitterAbtnw666.gif
http://blog-imgs-37.fc2.com/p/a/r/paro2day/twitterAbtnccc.gif
http://blog-imgs-37.fc2.com/p/a/r/paro2day/twitterAbtnwccc.gif
http://blog-imgs-37.fc2.com/p/a/r/paro2day/twitterAbtn39c.gif
http://blog-imgs-37.fc2.com/p/a/r/paro2day/twitterAbtnw39c.gif
http://blog-imgs-37.fc2.com/p/a/r/paro2day/twitterAbtn9c3.gif
http://blog-imgs-37.fc2.com/p/a/r/paro2day/twitterAbtnw9c3.gif
http://blog-imgs-37.fc2.com/p/a/r/paro2day/twitterAbtnc33.gif
http://blog-imgs-37.fc2.com/p/a/r/paro2day/twitterAbtnwc33.gif

background: #33ccee url(http://blog-imgs-37.fc2.com/p/a/r/paro2day/twitterAbtn000.gif) -30px top no-repeat;

• ▲

「Reload」ボタンを削除する

　次のコードを削除します。

<span id="twReloadA">Reload</span>

　あとでまた利用するときはコメントアウトして非表示にします。再度利用するときはコメントアウトを削除します。

<!--<span id="twReloadA">Reload</span>-->

　前後ボタンの右に余白ができてしまうので、スタイルで位置を調整して右に詰めます。

#twNext { /* ＞ */
 right: 2px;
 background: #33ccee url(http://blog-imgs-46.fc2.com/p/a/r/paro2day/twitterAbtn.gif) -14px top no-repeat;
}
#twPrev { /* ＜ */
 right: 16px;
 background: #33ccee url(http://blog-imgs-46.fc2.com/p/a/r/paro2day/twitterAbtn.gif) left top no-repeat;
}

• ▲

「＜」「＞」「Reload」ボタンを削除する

　次のコードを削除します。

<span id="twPrev" class="twPages">&lt;</span>
<span id="twNext" class="twPages">&gt;</span>
<span id="twReloadA">Reload</span>

　あとでまた利用するときはコメントアウトして非表示にします。再度利用するときはコメントアウトを削除します。

<!--
<span id="twPrev" class="twPages">&lt;</span>
<span id="twNext" class="twPages">&gt;</span>
<span id="twReloadA">Reload</span>
-->

• ▲

公式と同じ日本語表記にする（秒前、分前、時間前）

○秒前
○分前
約○時間前
24時間以上前のツイートはそのまま日時表示
3:00 PM Aug 7th

　次の箇所を変更します。

s.src='http://blog-imgs-15.fc2.com/p/a/r/paro2day/twitterAj1.js';

• ▲

公式リツイートが多い場合の注意事項

　公式リツイートを頻繁にしていると、指定した表示件数分のツイートが表示されないときがあります。そのような場合は、count の真ん中の数値や右端の数値を適当に増やします。

　デフォルトでは真ん中の数値を増やします。

count : [ 18, 15, 12 ],

　reply または at を false にしている。あるいは source が空っぽ source : [], でない場合は、右端の数値を増やします。

count : [ 18, 8, 17 ],

• ▲

デザインスタイルをテンプレートに入れる

　プラグインに <style type="text/css"> ～ </style> というコードがあります。これを利用しているテンプレートのスタイルシート編集欄に入れます。

　/* Twitter...A */ から /* Twitter...A END */ までのスタイルをスタイルシート欄に移動させます。

　プラグイン内の <style type="text/css"> </style> 部分を削除します。

• ▲

スクリプトを別のサーバにアップする

　jsファイルを自分のサーバにアップロードして利用します。下記リンクを右クリックして、保存。アップロードします。

» twitterA1.js

　アップロードが完了したら、ファイルのアドレスをプラグインのHTML内、次の箇所に入れます。

s.src='http://blog-imgs-46.fc2.com/p/a/r/paro2day/twitterA.js';

s.src='アップロードしたファイルのアドレス';

　これで、46の画像サーバに障害があっても動くようになります。ただし、コードに不具合などがあった場合、こちら側の修正が反映されなくなります。何らかの修正があった場合は更新履歴や@parodayにて報告します。

• ▲

ご利用にあたって

動作確認(Win) : IE6-8、Firefox2-3、Opera10、chrome4、Safari4

　Twitterが混雑する時間帯は表示に時間がかかります。

　質問や不具合・要望などはコメントや@parodayにお願いします。動作や表示がおかしいときは、利用しているテンプレートやブログアドレスなどの情報があると解決するかもしれません。

• 【利用規約】
• 改造、使用画像・ファイルの別サーバへのアップロードはOKです（著作権などは放棄しておりません）。
• noscript要素（作者リンク）は別の場所に移動させたり、削除することができます。
• ただし、スクリプトコード内の作者表記「Author Paroday(c)～」は削除しないでください。外部ファイルにコードを移す場合も同様です。
• 再配布は原則禁止です。カスタマイズ後も含みます。

申請できるのはオリジナルのものに限られます。他所で配布されていたり、掲載されているコードを利用することは認められません。

自作を共有プラグインに登録する

---

• 【更新履歴】
• 2013 01-16 - 指定したキーワードを含むツイートのみ取得・除去、伏字に置換追加。
• 2012 02-15 - ハッシュタグのテキストや文字色など変更・非表示ができるように。class="twTag"追加。
• 2011 11-26 - 指定したハッシュタグのツイートのみ取得・除去を追加。
• 2011 11-10 - 公式RT表示を追加。
• 2011 10-26 - ハッシュタグのリンクを外す、「reply」「RT」のリンクを非表示にを追加。
• 2010 11-22 - 日付部分（Permalink）のリンクを外すを追加。
• 2010 11-11 - 日付表示形式を変更するを追加。ツイートの日付を指定の形式で表示します。
• 2010 10-13 - 画像のサムネイルを表示する、リンク表記を[URL]などの任意のテキストに変更するを追加。
• 2010 09-16 - [仕様変更]Twitter公式のブログパーツもそうですが、APIには1時間150回まで（同一IPからのアクセス）の使用制限があります。閲覧者がリロードボタンを無暗に連打して、回数を一気に減らすのを避けるため、一度リロードボタンを押すと、3秒ほどリロードボタンが無効になるようにしました。 / 24時間表記にする、「○○ago」「○○前」とせず、日時をそのまま表示するを追加。
• 2010 08-07 - Reloadボタンの背景画像を少し変更。
• 2010 08-06 - 公開。

• 【関連項目】
• Paroday - FC2ブログインフォメーション / Twitter関連記事
• 2010 07-28 - Twitter...

関連記事

• Comments+Trackback 最新コメントとトラックバック（日付・記事ごと）
• ツイートを指定した件数ずつ表示するプラグイン　Twitter...A
• ツイートを表示するプラグイン　Twitter...
• 親子孫カテゴリプラグイン改良版 カテゴリに新着マークをつける
• 最新コメントのプラグイン『Comments...A』
• 親子孫カテゴリプラグイン「Categories...B」
• 親子カテゴリの展開と子カテゴリを孫カテゴリにするプラグイン