Japonsuki的ブログ

<< 豚インフルエンザについての箇条書き[追記あり] | Blog Top | okapoo.com -彼女と私の物語- >>

twitterウィジェットHTML版をカスタムしてみた

[2014/06/04 追記]
当記事の内容は非常に古くなっております。
Twitter Japan Blog の過去記事によると、既に2013年3月の時点で、当記事でご紹介した方法でのウィジェットは利用できなくなっていたようです。
子育てに追われていて最新情報をチェックすることができず、コメント戴いた皆様にはご心配とご迷惑をお掛けして申し訳ありませんでした…。
Twitter公式による最新版のウィジェットはこちらのウィジェット設定ページより作成することができるようです。
また、ウィジェットの公式なカスタム方法についてはイーレターさんの記事が分かりやすくまとまっていると思います。
凄く頑張ればもっと面白いカスタムができそうですが、今の私にはその時間を確保するのがちょっと難しいので、リンクのご紹介のみにとどまることをご容赦くださいませorz


PCから当ブログをご覧の方はお気づきと思いますが、ブログタイトル下あたりにヒナヱのtwitterのウィジェットを追加してみました。
デフォルトのまんまだとあまりにも味気無かったので、ちょこっとHTML組み替えて、CSSで装飾してみたり。えんちゃん可愛いよえんちゃん。

汚いソースですが、どなたかの参考になればという思いで晒しておきます。
HTML内で★になっている箇所にはtwitterのIDを入れてください。あと、「◎◎◎のつぶやき」の部分も適当に変えてください。
CSS内のコメントで「適宜変更推奨」となっているところは、設置する場所の大きさやデザインに合わせて変更することを激しくオススメします。

HTML

<div id="twitter_div">
<h2 class="sidebar-title">◎◎◎のつぶやき</h2>
<ul id="twitter_update_list"></ul>
<a href="http://twitter.com/★★★★★" id="twitter-link">twitter@★★★★★</a>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/★★★★★.json?callback=twitterCallback2&amp;count=3"></script>
 

CSS

#twitter_div {
text-align : left;
margin : 10px 0; /* 適宜変更推奨 */
padding : 10px 20px;
background : url("背景画像のURL") no-repeat;
}

#twitter_div h2 {
font-size : 1em;
color : #ffffff;
text-align : left;
margin : 5px 0;
}

#twitter_div ul {
width : 530px; /* 適宜変更推奨 */
}

/* ↓ここの設定は、10px×7pxのアイコン画像を基準にした数値になっています。 */
#twitter_div li {
padding : 2px 5px 2px 20px; /* 適宜変更推奨 */
background-image : url("各POSTの左側に表示させるアイコン画像のURL");
background-repeat : no-repeat;
background-position : 5px 8px; /* 適宜変更推奨 */
border-bottom : dotted 1px #6e6055; /* 適宜変更推奨 */
}

#twitter_div li a {
font-size : 0.7em !important;
color : #c7b9a5; /* 適宜変更推奨 */
}

#twitter_div li a:hover {
color : #ffffff;
}

#twitter_div li span {
color : #dedad4; /* 適宜変更推奨 */
font-size : 0.8em;
}

#twitter_div li span a {
color : #efe9e1; /* 適宜変更推奨 */
font-size : 1em !important;
}

a#twitter-link {
font-size : 0.8em;
color : #dedad4; /* 適宜変更推奨 */
text-align : right;
display : block;
}

a#twitter-link:hover {
color : #ffffff;
}

コメント
おお!かちょいいっすねコレ!
うちにも頂いてゆこうかな!
>赫乃丈さん

うへへ、ありがとござます。
宜しければ是非お使いくださいな!
サイドバーが狭くてなかなか気に入るウィジェットが見つからなかったんですが、これはいいですね。
という事で使わせて頂きました。
ありがとうございます。
  • 2009/05/23 5:13 PM
>燕さん

コメントありがとうございます。使っていただけて嬉しいです!
早速followさせていただきました(笑
シンプルで使いやすいですね
使わせていただきます。

ありがとうございます♪
>まにさん

コメントありがとうございます。お役に立てて嬉しいです。
follow返しさせていただきました。ありがとうございます!
検索していたら辿りつきました。
シンプル差に惹かれて拝借いたします(o_ _)o))
  • mei
  • 2011/02/16 3:03 PM
すごい探していてみつけました!
素晴しいいです。
使わせていただきました♪
  • きよ
  • 2011/05/25 10:12 PM
サイトようにと探していてめぐり合いました。
お借りしていきますね!
  • とおりすがり
  • 2012/05/10 5:25 PM
既存の埋め込みとは違って、省スペースで使いやすくて、利用範囲が広いです。設計が親切なので、慣れない私にも使いやすいです。使わせていただきます。ありがとうございました。
  • webcom3206
  • 2012/05/23 3:27 PM
既存の埋め込みとは違って、省スペースで使いやすくて、利用範囲が広いです。設計が親切なので、慣れない私にも使いやすいです。使わせていただきます。ありがとうございました。
  • webcom3206
  • 2012/05/23 3:27 PM
助かりましたー。デフォはデザインがゴチャとしていて、サイトのイメージに合いませんでした。
お伝え頂き、感謝しております!
  • shintaro!
  • 2012/05/29 12:42 PM
公式のウィジェットだと上手くいかなかったので、助かりました。ありがとうございます!
  • stella
  • 2012/09/18 3:45 PM
なぜか、ツイッターが表示されないです??
  • inasaku
  • 2012/11/07 4:49 PM
ここ2ヶ月ぐらいかな?つぶやきが表示されないみたい。
がしかし、今は大変お忙しいと思うので、お時間あるときにでもお教えくださいな。※ご対応まで何年かかってもOKです(・∀・)笑
コメントする









この記事のトラックバックURL
トラックバック
丼のTOPにもツイッターを表示してみました
丼のトップページにもTwitterを表示させてみました。 しかし最初公式ウィジェットのデフォルトをまんま貼り付けていたの...
  • 丼 BLOG
  • 2009/09/16 11:53 AM
-
管理者の承認待ちトラックバックです。
  • -
  • 2011/09/27 10:39 AM