ありのごとくあつまりてFC2ブログカスタマイズ,共有テンプレート,素材リンク集,フリーソフトの紹介など。 迷子にならないブログ作りを目指し... 何か1つでも お役に立てる情報 を提供できたらいいなぁと思っています。

モード変更

この記事に含まれるタグ (Keyword) :
ツイッター  jQuery  プラグイン  javascript  ソース  

ツイートを1件ずつ表示する jTwitteen の設置方法

2012/02/07 (火)  カテゴリー: Twitter・ブラウザ関連

自分のツイート(つぶやき)をスライドショーのように1件ずつ自動で表示させることのできる jQueryjTwitteen』 を試してみました。

jTwitteen: ツイート(つぶやき)を順に表示
クリックで デモページ に移動します。
 

個別記事ページの記事下 と トップページ に表示するようにしてみましたが、どうでしょうか。。 取得する件数を何件にするか、ツイートメニュー(返信・リツイート・お気に入り)を表示するか...等 は jQuery の設定で変更可能です。 また、スタイルシートを弄ることで ある程度 自分好みにカスタマイズできるのも特徴かなと思います。

2012/03/01~ 表示方法を 『jCarousel Lite』 を使うものに変更しました。
[ 関連記事 : 自分のつぶやきをオートスクロールで表示 (jCarousel Lite を活用) ]


Twitteen プラグイン

元々は、私のテンプレユーザーさんでもある だっきゃさんのサイト で、『Twitteen』 というプラグイン が設置されているのを見て、「何か面白い♪」 と思ったのがきっかけです。

こちらはプラグイン版なので、作者さんのサイトで発行されるソースを貼り付けるだけという手軽さが魅力かも。。 タイプライターバージョン と 横スクロールバージョン があるようです。



jQuery版 の 『jTwitteen』 は自分で設定しないといけないので、及び下の図のようなちょっとした問題もあったので... FC2ブログでの設置方法を残しておこうと思います。

IE7・IE8 で生じるバグ,フィルターが使われている部分のフォントが ギザギザの汚い表示に...



jTwitteen 設置方法 (FC2ブログ編)

1. スクリプトの準備

  1. jQuery ライブラリ本体
    私が使っているのは バージョン1.2.3 です。 ダウンロードしたものを使うか、Googleのサーバーから直接読み込んで使用します。
    [ 参照 : Google AJAX Libraries APIを利用しよう! | THE HAM MEDIA ]
  2. jquery.twitteen-0.0.4.min.js (5 KB)
    cross clover ≫ jTwitteen (作者さんのサイト) からDLした .jsファイル を ファイルサーバーにアップロードします。※FC2ブログでは ファイル名に .(ドット) が含まれているとアップできないので... 予め、ファイル名を jquery_twitteen_004.js  などのように変更しておいてください。

2. <head> ~ </head> 部分に以下を記入

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://blog-imgs-00.fc2.com/a/b/c/xxxxxxx/jquery_twitteen_004.js"></script>
<script type="text/javascript">
$(function(){
$("#jTwitteen").twitteen({ account:'ツイッターID', view:10, iconsize:'50',time:5000, reply:1, menu:1 });
})
</script>

赤文字部分 の書き換えは必須です。 太字部分 のオプション設定(詳細)については、作者さんのサイトを参照してください。 一部省略も可能です。 アイコンサイズに px を入れると上手く反映されないようです。

※必ず jQueryライブラリ を先に設定してください。 他で使っている場合には それと重複しないようにご注意ください。 順番の間違い や 重複 があると機能しないと思います。

私のサイトのように、「個別記事ページ と トップページ でのみ利用する」 などの場合、FC2ブログのエリア変数 を使うと余計なエリアでスクリプトを読み込むことを防げます。 エリア変数 の設定方法は、エリア変数を加えて FC2ブログを軽くする! を参照してください。 よく分からない場合、エリア変数 は加えなくても大丈夫です。


3. jTwiteen(つぶやき)を表示させたい場所に以下を記入

<div id="jTwitteen" class="cmtb_m"> <noscript>スクリプトONの場合 最近のつぶやきを表示してます →</noscript> </div>

<div id="jTwitteen"></div> のみ必須。 私の共有テンプレートであれば こんな感じが良いかと。。(一例として載せておきました。) 目的の場所に表示されるように、これも必要に応じて エリア変数 を加えます。


4. テンプレートのスタイルシートに以下を記入

FC2ブログの場合、管理画面の テンプレート編集 のところにある 「スタイルシート」 に直接追加すればOKです。 この設定は あくまでも一例です。 作者さんの CSS も参考に、調整して使ってください。


/* jTwiteen (C) cross clover
http://www.cross-clover.cc/
------------------------------------- */

#jTwitteen {
position:relative;
height:155px !important;
overflow:hidden;
padding:0 20px 0 20px;
font-family:'Meiryo UI','メイリオ';
font-size:12px;
}
.jTwitteenTitle {
text-align:center;
font-weight:bold;
}
.jTwitteenBox {
background:#fff;    /* for IE7・IE8 バグ対策 */
}
.jTwitteenLeft {
float:left;
padding:10px;
}
.jTwitteenRight {
float:left;
width:460px;
}
.jTwitteenText {
margin-bottom:-7px !important;
}
.jTwitteenCreated {
float:left;
}
.jTwitteenMenu {
float:left;
padding:0 0 0 20px;
}
.jTwitteenSource {
display:none;    /* via ○○ を非表示に */
}
.jTwitteenCopyright {
margin-top:-20px !important;
color:#999;
}
.jTwitteenCopyright a {
color:#a9a9a9;
}
.jTwitteenClear {
clear:both;
}
.jTwitteenClear hr {
display:none;
}

jTwiteen を使おうとして、最初につまづいたのは 「(IE6,)IE7,IE8 で見た時に 一部のフォントがギザギザして汚く見える」 ということでした。 (上図参照)

調べてみると、上記サイトのような記事が見つかり... 要するに IE7・IE8 だけのバグ (IE9 や IE以外の主要ブラウザ ではこの問題は起こらない) ということのようです。

で、この回避方法は... 私には分からなかったのですが、
.jTwitteenBox { background:#fff; } を入れておくと、背景色を設定しない時よりマシになる ことが分かったので この対策だけしておきました。 元々白背景のところに白背景を重ねるのは 本当はイマイチだと思いますが、比べるとかなり違うようなので。。

もし、もっと有効なバグ回避方法が分かる方がいましたら 是非教えてください。


ありのごとくあつまりて(paruparu)
illust by KumaCrow

ちなみに... この可愛いアイコンは 「ブログが作りたい!」 のクマクロさんが、私のサイトのリンク用 に描いてくださったものです。

私がそれまで使っていた ツイッター用アイコン と ありのごとくあつまりて のイメージから作ったものかなと思いますが、とっても可愛いので ツイッターでも使わせていただいてます。

私の写真は(小さめですが..)このブログで1度だけ登場していますので、お暇な方(&私のファンの方!?) は是非探してみてくださいw 私の実物の雰囲気とも結構似ているかも。。


キーワード検索 : ツイッター  jQuery  プラグイン  javascript  ソース  

スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-213.html

2012/02/07 ~ | Comment (0) tweet? | ↑ ページ先頭へ ↑ |
 @arinogotoku
  • paruparu (arinogotoku) on Twitter
    ツイートが上手く表示されない時は Twilog or 公式Twitter などから見てください。

0 Comment

コメントを投稿する 記事: ツイートを1件ずつ表示する jTwitteen の設置方法


お気軽にコメントをどうぞ。
ソースコード等の < と > は (実態参照に変換されるので) そのまま使ってOKです。 & は 全角 に変えて使ってください。

  任意 : 後から修正や削除ができます。
  非公開コメントとして投稿する。(管理人にのみ公開)
 

Trackback