HTMLタグ > twitter > ウィジェットの設置とカスタマイズ（HTML版）

　 HTMLタグ > twitter > ウィジェットの設置とカスタマイズ（HTML版）

公式サイトでコードを発行できるJavaスクリプト版の設置とカスタマイズについては、こちらのページで紹介しています。
→twitter > ウィジェットの設置とカスタマイズ（Javaスクリプト版）

過去に公式サイトで発行していたウィジェット設置用のHTMLのコードについて。
これも本体はJavaスクリプトですが、公式のものと区別するために「HTML版」と呼ぶようにします。
HTMLのコードで設置できるのは、私の調べた限り「プロフィールウィジェット」のみです。
今はコードは公開されていないけど、ちゃんと使えてるので当分大丈夫だと思います。

Javaスクリプト版に比べて良い点は、カスタマイズしやすいこと。
負けている点は、「一定間隔で更新」機能がないこと、ある程度のカスタマイズができる知識が必要なこと。
プロフィールウィジェットは主に近況や更新情報に使うと思うので、自動更新はむしろいらないと思います。
デザインにこだわってカスタマイズするならHTML版をお薦めします。
Javaスクリプト版でも自在にカスタマイズできる！という方は、それでｗ公式の機能をフルに生かせるでしょうから。
そんな方はこんなページ見てないと思いますが…ｗ

HTMLのコードは、初期状態では以下のようになっています。

このままでのコードで、スタイル指定を何もしていない状態の見本。
→Twitter > スタイル指定なし＆初期状態のHTML版ウィジェット
リストそのまんま、全く味気のないデザインですｗ
とは言っても、最近はスタイルシートを使っていないサイトやブログはほとんどないと思います。
HTML版のウィジェットを設置したページにスタイルの指定があると、ある程度それを反映します。
自分のサイトやブログのスタイルシートの内容によって、全体と同じフォントになってOKだったり、一部おかしな表示になったりすることがあります。
それを、スタイルシートに追記することで変更しつつ、デザインも変えて目標に近付けていきます。

＜カスタマイズ＞
HTMLのコードは3つに分かれています。

ツイートの上（ヘッダー）をなくす場合は、以下の部分を削除します。
<h2 class="sidebar-title">★ヘッダー</h2>

ツイートの下（フッター）をなくす場合は、以下の部分を削除します。
<a href="http://twitter.com/…★フッター</a>

ヘッダーとフッターを除いたツイート本体だけの表示なら、以下のようになります。

ウィジェット全体のサイズを指定したい場合は、テーブルで囲んでテーブルの幅で指定します。
もっとかしこい方法があるのかもしれないけど…。
テーブルの高さは指定せず、ツイートの数に合わせるのがきれいだと思います。

ウィジェットのフォントやリンクスタイルを変えたい場合は、自分のスタイルシートに以下のような内容を追記します。

ヘッダーのスタイル指定は、以下を追記。

#twitter_div h2 {
xxx : xxxxx
}

ツイート本体＋フッターのスタイル指定は、以下を追記。

#twitter_div {
xxx : xxxxx
}

#twitter_div a:link {
xxx : xxxxx
}

#twitter_div a:hover {
xxx : xxxxx
}

フッターだけをスタイル指定するなら、以下を追記。
「本体＋フッター」と、この「フッター」両方指定すると、「フッター」が優先されて「本体＋フッター」の指定は本体だけに反映されます。

#twitter_div a#twitter-link {
xxx : xxxxx
}

#twitter_div a:hover#twitter-link {
xxx : xxxxx
}

ツイート間にラインを入れるなら、以下を追記。

「border-bottom」はラインの太さ、「border-style」はラインの種類、「border-color」は色です。
他は多分いろいろ試した結果、これでよしとしたような気がします。
いろいろ変えて試してみてもいいと思います。

#twitter_update_list li {
margin : 0 0 0 0;
padding : 4px;
border-top : 0;
border-bottom : ★px;
border-right: 0;
border-left : 0;
border-style : ★;
border-color : ★
}

Javaスクリプト版では、公式より自分のスタイルシートを優先させるために「!important」を付けたりしますが、 HTML版は公式では何も指定していないのか、「!important」はなくてもどれも自分のスタイルシートどおりに表示されました。
Javaスクリプト版のカスタマイズの時だけ必要なのかもしれません。
もし使う場合は、「color : #ffffff!important」という感じで使います。

＜見本（カスタマイズ後）＞
実際にサイトに設置して使っているプロウィールウィジェットです。
→FF11プレイ日記【ちろりん村】

見本のコードです。
ヘッダーを削除して、自分でデザインしたものを付けました。
プロフィール画像は、公式にアップした画像のURLを指定しています。
Javaスクリプト版では最新のものが表示されると思いますが、 HTML版にはそういうのがなさそうです。
公式の画像を使う場合は、画像を変更したらその都度URLを直すか、画像を変更する時に同じファイル名のものアップするかで対応して下さい。
そのまま使う場合は、★印の部分を自分用に直して下さい。
緑の★の部分はユーザー名、他の★の部分は任意でOKです。

<table width="300"><tr><td>
<table border=0 cellspacing=0 cellpadding=0 style="border-collapse:collapse;"><tr><td>
<table width="100%" cellpadding=3 bgcolor=#0066ff><tr><td>
<a href="https://twitter.com/★TirolinVillage" target="_blank">
<img src="★http://a0.twimg.com/profile_images/1350651098/novenial1_normal.jpg" width="31" valign=bottom></a>
<big><b><a href="https://twitter.com/★TirolinVillage" target="_blank" id="usr">
★TirolinVillage</a></b></big>
<small><font color="#ffffff">★チロル</font></small>
</td></tr></table>
</td></tr><tr><td>
<div id="twitter_div">
<ul id="twitter_update_list" style="list-style-type:none;margin-left:0;margin-bottom:0">
</ul>
<div align=right>
<a href="https://twitter.com/★TirolinVillage" id="twitter-link">★Twitter@TirolinVillage</a>
</div></div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/★TirolinVillage.json?callback=twitterCallback2&count=5"></script>
</td></tr></table>

上記に組み合わせたスタイルシート。
サイト全体に使っているスタイルシートが反映されているので、それに加えて指定した内容です。

a#usr {　※画像の横の「TirolinVillage」だけリンクスタイルを変えるために付けたid=usr
color : #ffffff
}

a#usr:hover {　※上記と同じ箇所、マウスオーバー時に下線を出すようにしたもの
text-decoration : underline
}

#twitter_update_list li {　※ツイート間のラインの指定
margin : 0 0 0 0;
padding : 4px;
border-top : 0;
border-bottom : 1px;
border-right: 0;
border-left : 0;
border-style : dashed;
border-color : #aaa
}

＜余談＞
Javaスクリプト版にあってHTML版にない「一定間隔で更新」の機能。
せめて、新着ツイートがあった時に、リアルタイムでなくてもいいのでそれを読み込む機能があるといいなと思って、どうにかできないかとかなり調べましたが、見付かりませんorz
見る側で自動更新するアプリやツールはいくつかありましたが…。
公式のように新着を知らせる通知だけでもいいけどなぁ。読み込んだ方がそりゃいいけど。
ページ全体を一定間隔で更新するJavaスクリプトや、クリックすればページを更新するリンクやボタンもありますが、ページごとの自動更新は見てる人には迷惑（うっとーしいと思います；）かもしれないし、サーバーにも負担がかかるし、更新リンクやボタンは利用してまで見る＝フォローしてもらえると思うので、いらなさそうな気がします。
それから、私は必要じゃなかったのでよく調べてないけど、多分HTML版のウィジェットはツイートの前にプロフィール画像や好きな画像を表示したりもできるんじゃないかなと思います。
そしてもしかしたら、他のウィジェットもHTMLのコードで設置できるのかもしれません。
検索ウィジェットは自動更新がないとおもしろさ激減だけど。
スクロールバーも付けたいところ。どうやるんかなｗ
今はJavaスクリプト版しかコードを発行していないウィジェット、以前は（どのくらいからかわからないけど）HTML版かFlashの2種類から選べたのかな？
Flashは重いとかiPhoneだと見れないとかいろいろあったみたいなのでなくなったんだろうけど。
HTMLのコード発行はなんでやめたのかなぁ。

参考サイト… Qlogue Online様 / feel my soul様 / Japonsuki的ブログ様

「HTMLタグ」のトップに戻る

　　サイト案内