Twitter ウィジェットをカスタマイズする。

2011.06.11 Sat

Twitterのツイートを自分のブログやサイトに表示させるために便利なTwitter ウィジェットというものが公式から出ています。

その公式のウィジェットは、ある程度カスタマイズができるようになっていますが、できるものはどれも同じような見た目になってしまって、何だか物足りません。それに自分のブログやサイトに合ったデザインになりません。

そんな人のためにとっておきの方法を紹介します。
実は、このウィジェットはCSSによってカスタマイズすることができるんです。

今回、紹介するのは一番使われることが多いと思われる「プロフィールウィジェット」をカスタマイズする方法です。

1.プロフィールウィジェットをカスタマイズするページにアクセスする。

Twitterのホーム画面です。上の画像の赤く囲ってある部分に「素材」という項目があるのでクリックします。

「素材」ページにアクセスすると、「フォローボタン」、「ツイートボタン」、「Twitterロゴとアイコン」といったものがありますが、その中にある「ウィジェット」を選択します。

「自分のサイト」を選択します。

「検索ウィジェット」、「お気に入りウィジェット」、「リストウィジェット」といったものがありますが、今回は「プロフィールウィジェット」を選択します。

2.プロフィールウィジェットをカスタマイズする。

<設定>

■ Twitterのユーザー名

<カスタマイズ>

■ 最新データを取得するか
■ スクロールバーを表示するか
■ ツイートの表示方法(一定間隔で更新するか、全ツイートを取得するか)
■ 表示するツイート数(1~30)
■ プロフィール画像を表示するか
■ 投稿時刻を表示するか
■ ハッシュタグを表示するか

<デザイン>

■ ウィジェットの色(外枠の背景、外枠の文字、ツイート投稿欄の背景、ツイートの文字、リンク)

<サイズ>

■ ウィジェットのサイズ(横幅、高さ)

初期のままだと下記のようなコードになっています。

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 6000,
  width: 250,
  height: 300,
  theme: {
    shell: {
    background: '#333333',
    color: '#ffffff'
    },
    tweets: {
    background: '#000000',
    color: '#ffffff',
    links: '#4aed05'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('Twitterのユーザー名').start();
</script>

上記のコードをちょっと変更したものが下記のコードです。

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 5,
  interval: 6000,
  width: 200,
  height: 300,
  theme: {
    shell: {
    background: 'transparent', <!-- 背景透明 -->
    color: '#222222'
    },
    tweets: {
    background: 'transparent', <!-- 背景透明 -->
    color: '#222222',
    links: '#0066cc'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('Twitterのユーザー名').start();
</script>

ここで重要なことは、backgroundプロパティにtransparentを指定することです。
これによって背景が透明になるので、どのような背景にも合わせることができます。

3.プロフィールウィジェットをCSSでカスタマイズする。

JavaScriptの読み込みやパーマリンクの記述などがありましたが、コードが長くなってしまうので一部を省略して、CSSに関わる部分だけを残しました。

<div class="textwidget">
<div id="twtr-widget-1" class="twtr-widget twtr-widget-profile">
<div style="width: 200px;" class="twtr-doc">
<div class="twtr-hd">
 <a class="twtr-profile-img-anchor" href="http://twitter.com/intent/user?screen_name=Twitterのユーザー名" target="_blank"><img src="プロフィール画像" class="twtr-profile-img" alt="profile"></a>
 <h3>Twitterの名前</h3>
 <h4><a href="http://twitter.com/intent/user?screen_name=Twitterのユーザー名" target="_blank">Twitterのユーザー名</a></h4>
</div>

<div class="twtr-bd">
<div style="height: auto;" class="twtr-timeline">
<div class="twtr-tweets">
<div class="twtr-reference-tweet"></div>
<div id="tweet-id-5" class="twtr-tweet">
<div class="twtr-tweet-wrap">
<div class="twtr-avatar">
<div class="twtr-img"><a href="http://twitter.com/intent/user?screen_name=Twitterのユーザー名" target="_blank"><img src="プロフィール画像" alt="Twitterのユーザー名 profile"></a>
</div>
</div>
<div class="twtr-tweet-text">
<p>
 <a class="twtr-user" href="#" target="_blank">Twitterのユーザー名</a>
 ツイート部分
<em>
 <a href="#" time="時刻" class="twtr-timestamp" target="_blank">0 hours ago</a> · <a href="http://twitter.com/intent/tweet?in_reply_to=78808835170643968" class="twtr-reply" target="_blank">reply</a> · <a href="#" class="twtr-rt" target="_blank">retweet</a> · <a href="#" class="twtr-fav" target="_blank">favorite</a>
</em>
</p>
</div>
</div>
</div>
<!-- <div id="tweet-id-4"></div>~<div id="tweet-id-1"></div> 省略 -->
<!-- tweets show here -->

</div>
</div>
</div>
<div class="twtr-ft">
<div>
 <a href="http://twitter.com" target="_blank">
 <img src="http://widgets.twimg.com/i/widget-logo.png" alt="">
 </a>
 <span>
 <a href="http://twitter.com/dakkie10" style="color:#222222" class="twtr-join-conv" target="_blank">Join the conversation</a>
 </span>
</div>
</div>

</div></div></div>

上のソースを簡単にまとめると下の画像みたいな感じです。

ウィジェットにはTwitter独自のwidget.cssというCSSが読み込まれているので、これを上書きするかたちでカスタマイズしていきます。CSSを読み込む位置はwidget.cssを上書きするので、</body>タグの直前が良いかと思います。

<外枠を消す>

外枠というのは、上の画像でいうと1と3の部分です。外枠を消す、つまりツイート部分のみを表示させます。

.twtr-hd {
  display: none;
}
.twtr-ft {
  display: none;
}

<フォントを変更する>

自分のブログやサイトと同じフォントにするにはウィジェットに対して新たに指定してあげる必要があります。
widget.cssでフォントの指定に「!important」が使われているために「!important」を付け加えないと上書きができないので、必ず付け加えてください。

.twtr-widget {
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Meiryo", "メイリオ", Verdana, Helvetica, sans-serif !important;
  font-size: 93% !important;
  line-height: 1.7 !important;
}

<リンクスタイルを変更する>

widget.cssでマウスオーバー時にテキストにアンダーラインが表示されるようになっているので、これをなくします。

.twtr-doc a:hover {
  text-decoration: none !important;
}

今回、このブログで使用しているものを紹介しましたが、それ以外にもTwitter独自のwidget.cssを上書きすることによって、簡単にウィジェットをカスタマイズすることができます。

ただどのCSSがどこに使われているのかがわかりづらいので、Firefoxを使っている人であればFirebugというアドオンをおすすめします。どのCSSがどこに使われているのかを簡単に見つけることができます。

ぜひみなさんも試してみてください。


20 comments

[…] Twitter ウィジェットをカスタマイズする。 – dakkie […]

comment by WordPressにプラグインなしでtwitterウィジェットを表示する | Ateitei.exe

css初心者です。グーグル先生に教わりながら
こちらのページを参考にさせてもらってます。

1つ調べてもわからなかったので、教えて下さい。
カスタマイズに挑戦しているところなのですが、
サンプルコードをタグの直前に入れると
ありますがどのように入れたら良いですか?

comment by ひろぽん

ひろぽんさん

初めまして、dakkie.comのdakkieです。コメントありがとうございます。

CSSは上から順に記述したフォントサイズや色などを読み込んでいくので、同じid名やclass名に対して最初に記述した場所より下に記述してあれば、下に記述したほうが優先されて上書きされます。
なので、Twitterウィジェット独自のCSSを上書きするために、HTML本文の記述が終わる</body>タグの直前に下記のようにCSSを読み込ませています。このページのソースを見てもらえるとわかるかと思います。

<link rel="stylesheet" type="text/css" href="http://dakkie.com/blog/wp-content/themes/dakkie_blog/css/common.css” media="all" />

common.cssは下記のような記述になっています。

/* ————————————————–
Twitter
————————————————– */
.twtr-widget {
font-family: “Hiragino Kaku Gothic ProN”, “ヒラギノ角ゴ ProN W3″, “Meiryo”, “メイリオ”, Verdana, Helvetica, sans-serif !important;
font-size: 93% !important;
-webkit-text-size-adjust: none; /* for iPhone */
line-height: 1.7 !important;
word-break: break-all;
}

.twtr-widget .twtr-tweet-wrap {
padding: 6px 0;
}

.twtr-widget .twtr-tweet {
border-bottom: 1px solid #cccccc;
}

.twtr-widget h3, .twtr-widget h4, .twtr-widget p {
line-height: 1.7 !important;
}

.twtr-hd, .twtr-ft {
display: none;
}

.twtr-doc a:hover {
text-decoration: none !important;
}

comment by dakkie

はじめまして。

当サイトの左カラムにあるTwitterのウィジェットが気に入り、
こちらの記事から真似してみようと試みたのですが、
なかなかうまく行かないので質問させて下さい。

私のサイトはホームページではなくブログ(fc2)なのですが
これをどのように応用すればカスタマイズできるようになるかご存知ですか?

ブログなのでプラグインを用いることになるのですが、
フォントが変わってくれないことと、下の時間やリツイートなどを
表示しているところに枠がついてしまうなどうまくいきません。

お手数をおかけしますがもしご存知でしたら教えて下さい。

宜しくお願いします。

comment by ぴの

ぴのさん

初めまして、dakkie.comのdakkieです。コメントありがとうございます。

ご質問にお答えするために「FC2ブログにカスタマイズしたTwitter ウィジェットを表示する。」という記事を書きましたので、ぜひご覧ください。もしまた上手くいかないようでしたら、お気軽にコメントしてください。

comment by dakkie

わざわざご丁寧にどうもありがとうございました。
さっそく試してみたいと思います(^O^)!

comment by ぴの

[…] Twitter ウィジェットをカスタマイズする。 – dakkie […]

comment by WordPressにプラグインなしでtwitterウィジェットを表示する – ateitexe

はじめまして。
twitterウィジェットのカスタマイズで検索していてこちらを拝見しました。

やり方について質問なのですが、
2.プロフィールウィジェットをカスタマイズする。
ではもとの内の記述を変更するということですよね?
そして、
3.プロフィールウィジェットをCSSでカスタマイズする。
の部分ですが、
ここに記述されているhtmlの内容は先程変更したに続いて
記述を追加するということでしょうか?

初心者でいろいろとわからなくてすみません。
お答えをいただけると助かります。
よろしくお願いいたします。

comment by kss

kssさん

初めまして、dakkie.comのdakkieです。コメントありがとうございます。

「2.プロフィールウィジェットをカスタマイズする。」では、Twitterのプロフィールウィジェットを表示するためのコードを変更しています。このコードがベースになるので、表示するツイートの数、ウィジェットのサイズや背景、文字、リンクの色などはこの時点で変更をしておきます。

「3.プロフィールウィジェットをCSSでカスタマイズする。」に掲載しているのは、Twitterのプロフィールウィジェットを表示するためのコード(「2.プロフィールウィジェットをカスタマイズする。」で変更したコード)が自動生成したHTMLタグになりますので、この記述を追加する必要はありません。
このHTMLタグに対してCSSを使って、レイアウトや見栄えを変更します。HTMLタグの内容を変更しているわけではありません。

comment by dakkie

はじめまして。

一つ質問させて下さい。

ブラウザを開いた際、最初は真っ白なのですが、
時間が経つとツイートが表示されるようになります。

Twitter にはアクセスできる回数に制限があるようなので、
短い時間に複数ユーザが何度もアクセスすると
一時的にTwitterの情報を表示できなくなることがあるそうですが、
同じ事象なのでしょうか?

宜しくお願いします。

comment by ペソリロ

ペソリロさん

初めまして、dakkie.comのdakkieです。コメントありがとうございます。

ブラウザを開いた際、最初は真っ白で時間が経つとツイートが表示されるようになるとのことですが、これはJavaScriptの読み込みが完了するのに時間がかかるためです。Twitterのツイートを表示するTwitterウィジェットはJavaScriptを利用しているので、このような現象が起きます。

このTwitterウィジェットのツイート表示がAPIの制限とは関係していないと思いますが、はっきりと確認ができないので、同じ事象であるという判断はできません。

comment by dakkie

ご回答ありがとうございました。
参考になりました。

comment by ペソリロ

[…] 以下のサイトが参考になります。 サイトにtwitterウィジェットを表示、カスタマイズする Twitter ウィジェットをカスタマイズする。 ‐ dakkie blog […]

comment by Twitterウィジェットカスタム 公式ウィジェットをCSSで表示調整する方法 - サツぽろ、ニッキ。

はじめまして、日頃Twitterウィジェットの背景を透明にできたらなぁ。と思っていたのでとても参考になりました。

comment by 魚之間

大変わかりやすいご説明ありがとうございます。
カスタマイズに挑戦してみました。
しかしできませんでした。。
CSSを読み込む位置をタグの直前にしてみましたが
全くCSSが反映されません。
どこに問題があるのかわからず困っています。
Chromeの要素の検証をすると
カスタマイズCSSの部分の左に黄色い▲のなかに!がはいったマークがでていて
CSSが適用されていません。(この▲マークはどういう意味なのかもわかりません)
なにが問題なのかおわかりになりましたら教えていただけると幸いです。
基本的な質問ですみません。

それと、
3.プロフィールウィジェットをCSSでカスタマイズする。
の部分にかいてくださっているHTMLは、
カスタマイズするときにこちらのHTMLに記述する必要のあるものですか?
参考にということでしょうか?

質問ばかりですみません。
どうぞよろしくお願いします。

comment by kpkp

kpkpさん

初めまして、dakkie.comのdakkieです。コメントありがとうございます。

まずCSSが上手く反映されないということですが、Google Chromeの「要素の検証」を行って黄色い▲に!マークが出ているということはConsoleパネルでしょうか?
どのような画面になっているのかわからないのではっきりと言えませんが、単純にCSSファイルへのリンク先の指定が間違っているか、ファイル名が間違っているかだと考えられます。もし違っていましたら、もう少し詳しい状況を教えてもらえますか?

次に「3.プロフィールウィジェットをCSSでカスタマイズする。」に掲載しているHTMLタグについてですが、これはHTMLタグに何かを記述するということではなく、Twitter ウィジェットがどのような構造になっているのかを示すために掲載をしました。
ここで使われているid名やclass名を確認してカスタマイズするためのCSSをつくります。

comment by dakkie

わざわざお返事いただき、ありがとうございます。
大変嬉しく思います。
基本的な質問ばかりで恐縮ですが、もうすこし聞かせて下さい。

「3.プロフィールウィジェットをCSSでカスタマイズする。」
の件、よくわかりました、ありがとうございます。

Google Chromeの「要素の検証」を行って黄色い▲に!マークが出ているのは
Consoleパネルではなく、styleパネルのcssの表示部分で、
.twtr-hd や .twtr-doc など、それぞれのIDやクラスに指定されているcssが表示されているパネル内で、適用されていないcssには、
黒い取り消し線(テキストの中央部分に重ねて引いた線)と、その左に黄色い▲に!マークが表示され、思うようにcssが適用されずカスタマイズができません。

CSSファイルへのリンク先やファイル名はまちがっていないです。

カスタマイズのcssは、bodyの終了タグの直前にいれるのがいいのでしょうか?
それは外部cssでもHTML内にcssを記述してもどちらでもいいのでしょうか?

そしてこちらの状況をもう少しご説明させていただくと、
.twtr-hd {
  display: none;
}
.twtr-ft {
  display: none;
}
は適用されたのですが、フォントとリンクスタイルの変更
.twtr-widget {
  font-family: “Hiragino Kaku Gothic ProN”, “ヒラギノ角ゴ ProN W3″, “Meiryo”, “メイリオ”, Verdana, Helvetica, sans-serif !important;
  font-size: 93% !important;
  line-height: 1.7 !important;
}
.twtr-doc a:hover {
  text-decoration: none !important;
}
が適用されません。
!important;をつけてもつけなくても、上記のchromeで取り消し線と黄色い三角マークが表示され、無効とされてしまいます。

何か、ウィジェット側の仕組みがかわってしまったとかなのでしょうか??
!important;をつけてもcssが上書きされない時はどうしたらいいのでしょうか?

長々とすみません。
もしお時間がありましたら教えていただけると大変たすかります。
よろしくお願いいたします。

comment by kpkp

kpkpさん

お返事が遅くなってすみません。dakkieです。

詳しい状況を教えていただきありがとうございます。
「.twtr-hd」や「.twtr-ft」のCSSの指定は適用されているのに、「.twtr-widget」や「.twtr-doc a:hover」のCSSの指定は適用されていないということから考えると、CSSファイルを読み込む位置が間違っている可能性があります。

Twitterウィジェット独自のCSSであるwidget.cssよりもカスタマイズするためのCSSをあとから読み込ませる必要があります。「!important」をつけても上書きされなかったのは、カスタマイズするためのCSSに指定したものがあとから読む込まれたwidget.cssに打ち消されたのが原因かと思います。

この問題を解決するには、</body>タグ直前でカスタマイズするためのCSSを読み込まれせることです。一度試してみてください。よろしくお願いします。

comment by dakkie

dakkie 様
お返事どうもありがとうございます。
こちらこそご連絡がおそくなり申し訳ありません。

先日のcssの件ですが、cssは !important をつけてタグ直前でよみこませておりました。
それでも適用されなかったのは、私の制作中のサイトの場合、
文字関係の指定は
.twtr-widgetに対してしても効かす、
.twtr-tweet-text p に指定するとwidget.cssを打ち消せることがわかりました。

こちらの記事のおかげでいろいろとカスタマイズすることが出来るようになりました。
どうもありがとうございます。

また別のわからない点があるのですが、もしお時間がありましたら
お答えいただけると大変助かります。

現在、ツイッターの表示の中で不要な部分を以下のようにして消しております。

.twtr-reply {display:none;}
.twtr-rt {display:none;}
.twtr-fav {display:none;}

しかし、これですと、
.twtr-timestamp
.twtr-reply
.twtr-rt
.twtr-fav
をくぎっている”・”は消えずに残ってしまい、
ブラウザで見るとツイート本文の下に
「1 days ago · · ·」
のように見えてしまいます。

この”・”を消す方法はあるのでしょうか?

何度もすみません、よろしくお願いいたします。

comment by kpkp

[…] Twitter ウィジェットをカスタマイズする。 ‐ dakkie blog […]

comment by TwitterのウィジェットをCSSでカスタマイズしてニュースとして設置する方法 | ネモウスドットコム

leave a comment




comment