湯元TWTickerブログパーツサポート

非常に残念ですが、Twitterによる仕様変更によって、利用できなくなったようです。2013/06

ブログパーツTWTickerの湯元にようこそ。おいでくださいました。

このブログページ下に表示されているものです。

指定のTwitterのつぶやきを、定期的に切り替え表示してくれます。

もちろん、カスタマイズもできますので、MARQUEEなんか使えば、ニューステロップみたいに流す事もできるでしょう（このタグ、ブラウザ依存が激しいですけど）

一応、湯元なので、あまり派手な事はしない方がいいかと思って、シンプルにしてます。

でも、まだバージョン１なので、若干煩雑です。急いで作ったので勘弁してください。

2011/10/10　ユーザーサポートサイトを設置しました。今後はそちらにお願いします

Quawaz soft users
http://qusers.ahh.jp/

設置条件

設置条件ですが、HTMLコードの編集、スタイルシートの編集、JSファイルのアップロードができれば、どこでも設置できます。多分、どこでもOKでしょう。

あと、広告とか当湯元へのリンクとか強制表示してませんので、できれば、このブログへ、紹介のがてらリンクでも張ってくれれば、女将さんもお喜びになられるかと思います。

また、設置したせいで、ブログがオカシクなってしまったぞ！とか責任は一切とりませんので、自己責任の元ご利用ください。

設置方法

必要なものとして、高さ３２ドットの画像ファイルを用意してください。左下のTwitterロゴの事です。いきなり設置されると、うちの旅館（サーバ）に負荷が掛かってしまいますので、絶対避けてください！！

このTwitterロゴを、そのまま保存してもいいです（32×32/png/透明有り）

jsスクリプトファイルの編集

まず、TWTicker.jsファイルを、開いて編集します。先頭の６項目を書き換えてください。

/* ウェブサイト名 */
var strBlogName = "鍋風呂";
/* ウェブサイトアドレス */
var strBlogURL = "https://blog.ahh.jp/";
/* Twitterアドレス *
/var strTWURL = "http://twitter.com/nabeahh";
/* アイコン */
var strIconURL = "https://blog.ahh.jp/Twitter-icon.png";
/* 切り替え秒 */
var iInterval = 4;
/* ランダム表示 */
var bRondam = 0;

ランダム表示を行う場合は、1に直してください。また、先ほどの話しで、自分の好きな画像を仕込みたい場合も、ここを書き換えます（高さは32ピクセルまで）。

んで、これをアップロードしてください。

スタイルシートの編集

次はスタイルシートです。詳しい方は、説明するまでもないですよね。

TWTickerブロックの中の、３つクラスが利用できます。これは、今この旅館で使用しているそのままの定義です。border-topで上に１pxの白線、透明75%にしています。

TWTicker ⇛ 本文 .body / リンク部 .url / 投稿時刻 .time

<style type="text/css">
#TWTicker{color:#fff;font: bold 13px sans-serif;text-shadow:1px 1px 1px gray;letter-spacing:0px;margin:0;overflow:hidden;border-top:#fff 1px solid;opacity:0.75;filter: alpha(opacity=75);}
#TWTicker .body{height:32px;padding:10px 16px 1px 0px;margin:0px 0px 0px 0px;vertical-align:middle;word-wrap:normal;}
#TWTicker .url a:active {color:#66f;text-decoration:none;}
#TWTicker .url a:visited {color:#66f;text-decoration:none;}
#TWTicker .url a:link {color:#66f;text-decoration:none;}
#TWTicker .url a:hover {color:#88f;text-decoration:none;}
#TWTicker .time{color:#aaa;font-style:italic;font-size:90%;}
</style>

これを、スタイルとして登録してください。このコードをそのままHTMLの<head>の中に埋め込んでも構いませんし、外部CSSに登録するなりしてください。

このコードは、Windows上ChromeとIEでのみの動作チェックです。他の環境では調べてません。

HTMLファイルの編集

ここまで来たら露天風呂までは、すぐそこです。

足すのは基本的に、これだけです。HTMLコードのどこに書いてもOKなのですが、複雑なCSSで構成されたページだと、裏に隠れちゃったりしますので、そこはうまいこと調整してください（z-indexで100として埋め込んでます。問題がある場合は直してください）

<body>のすぐ後辺りでいいんではないかと思います。このブロック要素ではブロック配置のスタイルだけ書いてます。

<!— TWTicker http://blog/ahh/jp/ –><div id="TWTicker" style="background-color:#000;position:fixed;width:100%;height:32px;left:0;bottom:0;z-index:100;">
<script type="text/javascript" src="TWTicker.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/nabeahh.json?callback=twitterCallback2&count=10"></script>
</div>

赤字で書かれた部分を書き換えてください。表示したいTwitterアカウント、と、入手するTwitter数の２つです。

これで、終わりです。

ごゆっくり、ご入浴くださいませぇ。

撮影地：山形県 蔵王温泉

ダウンロードッ

jsファイルや挿入コードをまとめました、こちらです。TWTicker.zip （2KB）

画像は、デフォで良ければ、こちらをダウンロードしてください。

（32×32/png/透明有り）

その他

ネット上の情報を拝見しながら作ったので、大きな事はいえませんが、基本的に再配布をなさっても結構です。ただ、無改変で、自分のものと偽るのだけはダメです。また、オリジナルの明記（下記参照）をしてください。

明記例：※多少の訂正はOK

このスクリプトのオリジナルは、湯元TWTickerブログパーツサポート（https://blog.ahh.jp/）

Posted by nabe