about

sogo  
fukidasi

  social

Count per Day

  • 11811現在の記事:
  • 436今日の閲覧数:
  • 5現在オンライン中の人数:

シンプルでかっこよくTwitterツイートを表示させる



Twitterのツイート表示をさせるブログパーツはたくさん出ていますが、どうも私にはありきたりなデザインで満足のいくものに巡り合えませんでした。それなら満足のいくものを自分で作るしかないという事で、CREAMUさんの記事の中で「Twitterの最新の投稿をオリジナルのデザインで表示する方法」を参考にし自分なりのデザインでシンプルでかわいいものを作ってみました。


1. テキストだけを表示させる


1-1. シンプルにテキストだけを表示させる場合のXHTMLソース

<div id="twitter">
 	<ul id="twitter_update_list"></ul>
</div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/ユーザー名.json?callback=twitterCallback2&count=1" type="text/javascript"></script>

ユーザー名のところに自分のIDとcount=のところを1にすれば最新投稿1件のみが表示され、2にすれば2件分となり、たったこれだけを設置する場所に書くだけで、テキストのみでツイート表示がされます。


2. 画像とテキストを両方表示させる


2-1. XHTML

(基本的に上記1-1と同じXHTMLソースとなりますが、画像表示にはCSSも必要です)

<div id="twitter">
 	<ul id="twitter_update_list"></ul>
</div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/ユーザー名.json?callback=twitterCallback2&count=1" type="text/javascript"></script>

2-2. CSS

#twitter {
        border: 2px #E95C88 dashed;
	background:url(http://画像までのフルパス) no-repeat left top;
}
#twitter ul {
	padding:54px 20px 25px 3px;
	margin:0 0 0 0;
	list-style:none;
}


twitt


←出来上がったパーツがこちらです。

ただ、上記CSSは左の表示にあわせて作った数値ですので、ご自身の環境に合わせたクラス名、ボーダー、margin、paddingで編集して下さい。私の場合、テキストに画像を半分だけ被せる形にしましたので、paddingの上部スペースを54pxと大きい数値にしていますが数値を小さくすればもっと下まで被ります。


もっとシンプルに・・・・・

twitt

画像を付けるにしても、もっとシンプルに表示させたいなんて場合は、小さな画像を選んで表示してみると良いでしょう。基本的に画像が大きくても小さくてもソースは同じですが、自分の好みに合わせpaddingを調整してみて下さい。今回は書いておりませんが、設置場所しだいではwidthを指定したりするもありです。


twitt


←こんなあずきみたいのもあり?


当ブログでは、今回つくったものとは別のツイート表示を、上部スライドパネル内に設置しておりますが、私が書いている別ブログでもあるこちらに設置してありますので、現物を確認したい方はご覧下さい。

Twitterのアイコン素材はこちらのフリー配布サイト(ICON FINDER)より画像を拝借しました。

別記事:Twitterリツィートしてくれた方のプロフィールアイコンをjQueryで表示させる


Pocket

  • 自分メモ→ http://t.co/nbpDhW5 ツイッターをページ表示させる方法2 これはいいかもしれん

Trackback URL


この記事を共有していただければ嬉しく思います。コメントもお待ちしておりますのでお気軽にどうぞ!
※ドメインを移行しましたら共有数が0にリセットされてしまいましたので、ご協力お願い致します。