☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆

☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆





Related Posts Plugin for WordPress, Blogger...



2010年05月21日(金) 02時21分16秒

ブログやサイトでtwitterのつぶやきを表示させる方法

テーマ:タグ関連
どもでしヽ(゚◇゚ )ノ



今日は、仕事で作っているサイトに
twitterのつぶやきを表示させてみようと、調べてみたら
意外と簡単にできたので、その方法のご紹介ですヘ(゚∀゚*)ノ



ちなみに、このブログにもつけてみましたw

右サイドにぴよりボードを設置してみましたヘ(゚∀゚*)ノ



記事中では、挿入できないので、
実際の感じは右のサイドを見ていただければと思います。

こんなボードを作って、
スタイルで背景に指定しましたよダウン


28歳で未経験からWEBデザイナーに転職!三日坊主を治す努力も三日までorz



で、以下が、twitterを表示する方法です。





【1.】<body>~</body>内に、次のJavaScriptを記述します。


<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/ここにtwitterのアカウント名を入れる.json?callback=twitterCallback2&count=ここに表示したいつぶやきの数を入れる"></script>


例として、わたしの場合はこのような記述になります↓


<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/akki_web.json?callback=twitterCallback2&count=8"></script>



【2.】Twitterを表示させたいところに、次のタグを記述します。


<ul id="twitter_update_list"></ul>




なんと、これだけでOKですヘ(゚∀゚*)ノ



あとは、これにスタイルを指定して、自由にカスタマイズしますっ。



参考までに、わたしが設定した内容を書いておきますね。
このブログ、アメブロでの設定方法になります。
理屈がわかれば、普通のサイトにも
他のブログサービス(スタイルを編集できるブログに限ります)でも、
応用はききますよ。


まず、「サイドバーの基本設定」の「フリープラグイン」に次のタグを記述します↓



<div id="twitter">
<div class="bord"> <ul id="twitter_update_list"></ul>
<noscript>ここを正しく表示させるためにはお使いのブラウザのJavaScriptを有効にしてください。<br />
<a href="http://twitter.com/akki_web">あっきーのつぶやきTwitter</a></noscript>
</div>
<p>もっと見るには<br /> <a href="http://twitter.com/akki_web">ここをクリック</a>してね。</p>
</div>

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script><script type="text/javascript" src="http://twitter.com/statuses/user_timeline/ここに自分のtwitterのアカウント名.json?callback=twitterCallback2&count=ここに表示させたい数"></script>


以上。

それで、次に
「デザインの変更」の「スキンCSSの編集」を開いて、
表示されたスキンCSSの一番下(記述する場所はどこでも良いのですが、わかりやすい所ということで)に、以下のスタイルを記述します。




.bord {
overflow: auto;
height: 150px;
width: 142px;
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 7px;
}

#twitter {
background-image: url(http://stat.ameba.jp/user_images/20100521/01/akki-akiaki/78/75/j/t01700248_0170024810551256088.jpg);
background-repeat: no-repeat;
width: 142px;
margin-top: 10px;
padding-top: 50px;
padding-bottom: 0px;
font-size: 10px;
padding-right: 15px;
padding-left: 13px;
height: 198px;
text-align: left;
display: block;
}

#twitter_update_list {
margin:0px;
padding:0px;
}

#twitter_update_list li {
border-top-width: 1px;
border-top-style: dotted;
border-top-color: #328BB3;
padding-top: 7px;
padding-bottom: 7px;
list-style-image: none;
}


以上。

赤太字の部分は、自分で作った画像を、アメブロにアップロードして
その画像のURLを記述してください(^人^)

このスタイルにはまる画像のサイズは、170x248pixになります。




全部、まるまるこのままブログに設定すると、
わたしの、ぴより画像でわたしのつぶやきが表示されることになりますので(笑)
必要な部分、twitterのアカウント名は、必ず自分のアカウントに修正しましょうっ。




twitterのブログパーツは、いまたくさん出回っていますが
ここいらで、オリジナルのつぶやき板を作ってみてはいかがでしょうか?
(・∀・)チョットハマルカモ




わたしの2010年の目標はこちら

ヒヨコはじめましての方はこちら
テーマ別の目次



人気ブログランキングへ三日坊主ブログ応援お願いします☆
ブログランキング★転職
(おかげさまで転職カテゴリで上位にランクイン中です☆)


Webやモバイル系クリエーターの転職『マイコミエージェント×IT』

AD
いいね!した人  |  コメント(0)  |  リブログ(0)
2009年07月09日(木) 23時46分55秒

リストタグをCSSでナビゲーションにする方法!

テーマ:タグ関連
どもでしヽ(゚◇゚ )ノ




これこれこれでし!( ̄□ ̄;)!!
今日わたしがやりたくても
やり方がよくわからなかったこと!



いいサイトを発見したですよ( ̄□ ̄;)!!

⇒『リストタグを試す!





コンテンツメニュー部分にリストタグを使ったのですが
リストタグを入れると表示される●ぽちを画像に変えて
さらに、マウスオーバーでその画像を変化させる動きを
わたしはつけたかったのです。



そのやり方が、ここにありました( ̄□ ̄;)!!

⇒『リストタグを試す!





なるほど、
backgournd-positionで画像を移動させるイメージだったのですな( ̄□ ̄;)

しかし、このサイトわかりやすくて良いですなφ(.. )





あとこれ!

リストタグを使うと、やたら左側に余白ができます。
それの調節の仕方についてです。

⇒『リスト全体の余白を調整する




これで、IEでも綺麗に表示されるようになるかな。。

思うようにコーディングの作業が進まなかったのは
この二つが原因でした




よ~し、これで明日の作業ははかどる!
はず( ̄Д ̄;;





それにしても
インターネットって便利ですね(。-人-。)




がむばれ!わたしの相棒くん!

相棒くんダウン

Dreamweaver CS4 スーパーリファレンス for Windows&Macintosh/外間かおり
¥2,709
Amazon.co.jp




【関連記事:思うように作業が進まず苦戦してました・・・】
⇒『思うようにできない!




人気ブログランキングへ三日坊主ブログ応援お願いします☆
ブログランキング★転職
(おかげさまで転職カテゴリで上位にランクイン中です☆)
ヒヨコまずはIT業界へ潜り込め!未経験からのWEBデザイナー


AD
いいね!した人  |  コメント(0)  |  リブログ(0)

AD

Ameba人気のブログ

Amebaトピックス

      ランキング

      • 総合
      • 新登場
      • 急上昇
      • トレンド

      ブログをはじめる

      たくさんの芸能人・有名人が
      書いているAmebaブログを
      無料で簡単にはじめることができます。

      公式トップブロガーへ応募

      多くの方にご紹介したいブログを
      執筆する方を「公式トップブロガー」
      として認定しております。

      芸能人・有名人ブログを開設

      Amebaブログでは、芸能人・有名人ブログを
      ご希望される著名人の方/事務所様を
      随時募集しております。