|
HTMLタグ > twitter > ウィジェットの設置とカスタマイズ（Javaスクリプト版）
|
公式サイトにコードを発行するページがあるのですが、探しにくいのでご案内。
→Twitter / ウィジェット
ウィジェットは4種類ありますが、主に使うのは「プロフィールウィジェット」と「検索ウィジェット」かなと思います。
「プロフィールウィジェット」は特定のユーザーのツイートを表示するもので、
自分以外のユーザーのウィジェットも作れます。
「検索ウィジェット」は、設定したワードを含む不特定多数のユーザーのツイートが表示されます。
そして、公式サイトで発行されるコードは全体がJavaスクリプトでできているので、
HTML版と区別するために「Javaスクリプト版」と呼ぶことにします。
「カスタマイズ」ではツイートの更新や表示について設定できるようになっています。
「プロフィールウィジェット」は設定どおりに表示できますが、
「検索ウィジェット」は設定どおりになりません(´・ω・｀)
プレビューでは設定どおりになるのですが、
実際に設置するとプレビューと違う結果になります。
いつか直してくれるかもしれないけど、現状での設定とその結果は以下のページを参照して下さい。
twitter > ウィジェットの設置とカスタマイズ（Javaスクリプト版） > 設定の詳細
＜おすすめ設定＞
最新のツイートを表示する、あまり動きのないプロフィールウィジェットで見た目を重視したい
新着なし＋スクロールバーなし＋全ツイートを取得
上記のツイート数に合わせた高さになる設定です。上から新しい順に並びます。
新着は読み込まないので、リアルタイムな情報を扱うのには向きません。
少し前のも見せつつ動きのあるプロフィールウィジェットにしたい
新着あり＋スクロールバーあり＋一定間隔で更新（エンドレス表示）
1ツイートづつ、設定したツイート数を繰り返し読み込みます。上から古い順に並びます。
新しいツイートを表示するならツイート数は少なめに、
古いものも表示するならツイート数を多めにするとよいです。
最初に一気に読み込み、新着だけ増えていく検索ウィジェット
新着あり＋スクロールバーあり＋全ツイートを取得
上から新しい順に並びます。新着だけ上に増えていきます。
すぐにウィジェットを埋めてしまいたい人におすすめです。
1ツイートづつ読み込むことから始めて、常にツイートが流れる検索ウィジェット
新着あり＋スクロールバーあり＋一定間隔で更新（エンドレス表示は無効なのでどちらでも）
新しいものから1ツイートづつ読み込みます。上から古い順になります。
新着はツイートした時点で読み込むので、時間経過するともう1回それが読み込まれます。
常にツイートが流れてくるので動きがあっていいけど、どんどん読みたいときは読み込み始めがじれったいかも。
＜見本＞
↑プロフィールウィジェット。
新着なし＋スクロールバーあり＋全ツイートを取得（表示するツイート数5）、の設定です。
中途半端に公式のスタイルシートとうちのサイトのスタイルシートが混ざって、
リンク文字にマウスをのせると文字と背景が同じ色になって文字が見えなくなります(´・ω・｀)
設定でリンクを他の色にすればいいんだろうけど…サイトのリンクと合わせられないのがどうしても許せないｗ
＜カスタマイズ＞
カスタマイズは、自分のサイトやブログのスタイルシートに必要な内容を追記するのみです。
Javaスクリプト版のウィジェットは、公式サイトのスタイルシートが当てられています。
自分のスタイルシートに変更したい内容を追記すると、公式で指定していない項目なら、それも反映します。
公式で指定されている項目は、「!important」を付けると自分の指定が優先されます。
ただし、公式が「!important」で指定しているものは、
自分のところでそれを付けても公式の方が優先されるようです。つまりそれは、どうがんばっても変更できません。（私にはｗ）
hislab様のサイトで公式のスタイルシートを確認できますが、面倒なら全部に「!important」を付けても問題はありません。
公式が優先にしているのは具体的に、リンクのスタイル（hoverなどの文字の色、aの下線なし、hoverの下線あり）など。
その辺を変更したいなら、プロフィールウィジェットなら、HTML版の方をお薦めします。
HTML版はそのままでは地味すぎるくらい、カスタマイズ向けです。お好みでどうぞ♪
プロフィール以外のウィジェットのHTML版はないっぽいので、Javaスクリプト版でがんばるしかｗ
→twitter > ウィジェットの設置とカスタマイズ（HTML版）
カスタマイズするには、次のような内容を自分のスタイルシートに追記します。
ツイートの上（ヘッダー）を非表示にするには、以下を追記。
.twtr-hd {display:none;}
ツイートの下（フッター）を非表示にするには、以下を追記。
.twtr-ft {display:none;}
ツイートのフォントスタイルを変更するには、以下を追記。
.twtr-doc{
position:relative;
font-size:★フォントサイズ!important;
font-family:★フォントの種類!important;
zoom:1;
}
ツイート間のラインを変更するには、以下を追記。
新着ツイートの時のラインは別なようで、反映されません。
.twtr-widget .twtr-tweet{
border-bottom:★太さ ★スタイル ★色!important;
overflow:hidden;
zoom:1;
}
＜見本（カスタマイズ後）＞
ブログ用にカスタマイズして設置した検索ウィジェットです。
→ちろりん村＠FF11ブログ（みんなのつぶやき）
とにかくシンプルにしました。単品で見ると味気ないですｗ
これに当てたスタイルシートは、次のものです。
ブログ全体に使われているスタイルシートも反映しているので、それに加えて指定した内容です。
.twtr-hd{display:none;}
.twtr-ft{display:none;}
.twtr-widget .twtr-tweet{
border-bottom:1px dashed #aaa!important;
overflow:hidden;
zoom:1;
}
ツイートのフォントは、ブログのスタイルシートが強かったのか？ｗ
特に追記しなくてもリンクスタイルも含めてブログ全体と同じスタイルで表示されました。
マウスオーバー時の下線は、公式で「!important」付きで設定してあるっぽく、勝てませんでしたがｗ
それと、実際はウィジェットの枠があって、
表示しない方法があるんだろうけどめんどかったので背景と同じ色にして見えなくしました(´・ω・｀)
私にできるのはここまで…ｗ
もっと！という方は、下の参考サイト様へどうぞ(;^^A
リンクのスタイルの変更方法を紹介しているサイトを見付けて同じようにやっても、
他にもいろいろ試しても、どーしてもできませんでした。
ツイートのフォントスタイルを変えるのも、その方法を紹介しているサイトのとおりにやってもできず、
いろいろやってたら別の方法でできた、という感じでした。
公式のスタイルシートに変更があったのかもしれません。
以下は、カスタマイズしたかったけどできなかったこと。誰か教えてヽ(;´Д｀)ノ
・リンクスタイルの変更（ユーザー名、URL、ツイートの後のツイート時間やリプライも）
・新着ツイートを読み込んだ時のラインの変更
・ウィジェットの枠を非表示にする
・ツイートの前のユーザー名を非表示にする（プロフィールウィジェットで）
・ウィジェット内のリンクを別窓で開くようにする
…これは、外部Javaスクリプトのリンクだからできないのかな。ずっと前からぶつかってて解決してないからきっと無理なのかなとは思ってます(´・ω・｀)
＜検索ウィジェットの問題＞
「検索ウィジェット」は、「新着データを取得？」にチェックすると、いろんなツイートが流れてきておもしろいけど、
そのページをずっと表示していると延々とツイートが増えていってパソコンが重ーくなっていきます。
それを防ぐために、設置したページの自動更新とかを付けるのかどうか…。
自動更新すると、スクロールしていてもページのトップに戻ってしまいます。
スクロールして記事を読んでいるときに勝手にトップに戻られたら、読む気もなくすでしょう。
かと言って、新着を読み込まないのはおもしろくない。
私は自分のブログに設置してタブブラウザで開きっぱなしにしようと思ってたけどそれができず
（知らずに放っといたらパソコンがみしみし言ってた気がします）、
ウィジェット単独のページを作って一定時間で自動更新するようにしようか考え中です。
検索ウィジェットは設定も思うようにできないし、こういう問題もあるし、面倒(;^^A
カスタマイズを考えている方は、カスタマイズに悩む前に、設置するかどうかを再度考えてみて下さい。
設定どおり表示されれば、まったく問題はなくなるんだけどなぁ。
参考サイト…
hislab様 /
dakkie blog様
「HTMLタグ」のトップに戻る
|
|
|
