このページの記事目次 （タグ: jQuery の検索結果 10 件）
total 3 pages 次のページ →
--/--/-- (--)
カテゴリー： スポンサー広告
上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサーリンク
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。
URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-.html
--/--/-- ～ |
Comment (-)
tweet? |
↑ ページ先頭へ ↑ |
スマートフォン用テンプレートに 文字サイズを デフォルト・大きめ・特大 などに調整できる jQuery のスクリプトを設置してみました。 クッキーを利用しているので、ページを送っても有効です。
iPad からFC2ブログを閲覧した場合、以前は パソコンからのアクセスと同じ扱いになっていましたが、2013年3月頃からは スマートフォン用テンプレート にも切り換えられるような仕様に変わっています。（※現在のデフォルトは PC用テンプレート のようで、共通URLでアクセスした場合は 毎回1度は PC用テンプレートが表示されます。）
PC用テンプレートで閲覧すると、上部に【 スマートフォン版で表示 】というリンクが 大きく表示されてしまうようになったので、仕様変更は賛否両論なようですが、どちらでも閲覧できるようになったのは便利になったと言えるのかもしれませんし、iPad などからも閲覧し易いようにしていく必要が出てきたと言えるのかもしれません。
iPad から実際に見てみると、不便に思う点がいくつかあります。 例えば
- スマホ向けテンプレで閲覧すると、ズーム（ピンチアウト）が出来ないサイトが多い。
- スマホ向けテンプレで閲覧すると、ズーム（ピンチアウト）が出来る場合でも、ズームをすると （画面幅での折り返し表示がされない為） 横スクロールが必要になるケースが多い。
1つ目は スマートフォン用テンプレートなどに maximum-scale=1.0, user-scalable=no という設定がされているケースが多いためです。 FC2ブログの公式テンプレートもそのようになっていて、私も最初そのままにしていましたが、何故ズームをさせないのか嫌がらせにしか思えないので、この設定は変更してあります。
公式テンプレ等 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no," />
↓
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,
maximum-scale=3.0,
user-scalable=yes" />
本題ではないので解説は省略しますが、↓サイトなどが分かりやすく解説されています。
さらに厄介なのは
FC2のスマートフォン用広告変数 で自動で挿入されるスクリプトに
<!-- sp resize --><script type="text/javascript">(function() {var resize = function() {document.body.style.width = '320px';};if (window.addEventListener) {window.addEventListener('load', resize, false);} else if (window.attachEvent) {window.attachEvent('onload', resize);}})();</script><!-- /sp resize -->
という、表示サイズを 320px にするスクリプトが入っていることです。 なのに ズーム（ピンチアウト）できないサイトが多く、細長いまま見るしかないという。。
ちなみにこの表示サイズ変更は スタイルシートに body { width: auto !important; } を入れることで回避できます。 （なお、広告変数で表示されるスクリプトなため、このサイトを含む有料版を利用中のサイト や 広告免除サイト ではこのスクリプトは挿入されません。） 個人的には、完全にページを読み込んだ後に 表示サイズが変わるのは好きではないので、共有テンプレートにもこの設定を入れていますが、問題なく ズーム できるようにしてあれば このスクリプト（サイズ変更）も悪くはないかも。。
maximum-scale=1.0, user-scalable=no は嫌ですね。。
2つ目は スマートフォン用テンプレートの多くが1カラムで作られているため と 「自動で折り返しをしない」という iPad の仕様によるもののようです。 （※iPad を例にしましたが、ズームでは折り返しされないブラウザが殆どなようで、私の使っている WiiU や 3DS でも同様です。 ズームしても画面幅で改行をしてくれるのは Android版の Opera Mobile くらいかも...。）
取り敢えず、ズームでは改行されないブラウザがあることが分かったので、本文のフォントは大きめに...とは思っていますが、実際にはブラウザ（解像度）によって 小さく感じることは多々あると思うので、文字サイズを大きくできるスクリプトを設置しました。
文字サイズを変更できるスクリプトを FC2ブログに設置する方法
準備するもの
- jQuery 本体
Googleのサーバーから直接読み込んで使用する場合、準備は不要です。 私が使っているのは バージョン1.2.3（少し古いバージョンのもの） ですが、各自で選択してください。
※FC2ブログのスマートフォン用公式テンプレートなどでは 元々 jQuery（現在は Ver.1.3.2） が設定されていますので、入っている場合はそれを利用すればOKです。
- jquery.cookie.js (2 KB)
jquery-cookie · GitHub から入手できます。 デフォルトでは 7日間 の設定です。
※FC2ブログでは ファイル名に .(ドット) が含まれているとアップロードできないので、予め、ファイル名を jquery_cookie.js などのように変更しておいたものを利用してください。
- jquery.fontsizechange.js
Web Mugen さんのサイトで紹介されているソースをコピーして、フォントの拡大率などは必要に応じて変更し、文字コードを指定して保存します。（FC2ブログの場合 utf-8 で。ファイル名は .(ドット) を含まない jquery_fontsizechange.js などにしておきます。）
フォントの拡大率は、デフォルトでは var fontSize = [100,116,131]; という設定で、100％，116％，131％ になっていますが、私はそのまま利用しています。
1. <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-○○.fc2.com/○/○/○/ブログID/jquery_cookie.js"></script>
<script type="text/javascript" src="http://blog-imgs-○○.fc2.com/○/○/○/ブログID/jquery_fontsizechange.js" charset="utf-8"></script>
赤文字部分にはアップロードしたファイルのパスを入れてください。
<script src="http://static.fc2.com/js/lib/jquery.js" type="text/javascript"></script> などが入っている場合は jQuery本体は不要ですので、それより下に jquery_cookie.js と jquery_fontsizechange.js だけを入れてください。
2. サイズを変更したい部分
このサイトでは スマートフォン用テンプレートの記事ページ 「記事内容など」 のみに設定していますので、それを例にしています。 <!--permanent_area--> ～ <!--/permanent_area--> が個別記事ページで表示されるエリアなので、その中だけに入れてあります。
<!--permanent_area-->
<!--▼▼個別記事ページ▼▼-->
<ul id="fontSize">
<li class="changeBtn">デフォルト</li>
<li class="changeBtn">大きめ</li>
<li class="changeBtn">特大</li>
</ul>
<div id="changeArea">
文字サイズを変更したいエリア
（記事の内容，他）
</div><!--/id=changeArea-->
<!--▲▲個別記事ページ▲▲-->
<!--/permanent_area-->
3. スタイルシートの設定例
私の例ですので、適当に変更してください。IE以外のブラウザでは 概ね図のとおりに表示されると思います。（IEだとボーダーの位置が何故か上に付いちゃいます。。）
ul#fontSize {
list-style: none;
color: #fff;
margin-left: 0;
border-bottom: 1px dashed #999; /*IEでは何故か上にボーダーが*/
}
ul#fontSize:after {
content: "";
display: block;
clear: both;
}
ul#fontSize li {
background: #999;
padding: 2px 10px 1px;
margin-right: 6px;
float: left;
cursor: pointer;
-webkit-border-radius: 11px 11px 0 0;
border-radius: 11px 11px 0 0;
}
ul#fontSize li:hover {
background-color: #5dbec3; /*見本はピンクですがここでは水色に変えてます*/
}
ul#fontSize li.active {
background-color: #444;
border-bottom: 1px solid #222;
}
ul#fontSize li.active:hover {
background-color: #444;
}
なお、＃changeArea （文字サイズを変更したいエリア） 内に 記事タイトル，カテゴリー名，その他 が含まれる場合、スタイルシートで font-size を 設定してあるケースは多いと思いますが、%設定 にしてあるものは［大きめ］［特大］が機能しますが、px設定 にしてあるものについては そのまま固定 になります。 スマートフォン向けのテンプレートなどでは、全ての font-size を px で設定しているケースも多いので、変動させたい部分は font-sizeのパーセント表記一覧 などを参考に ％設定 に直しておく必要があります。
画像サイズはそのままで 文字だけを拡大できる というのは便利ですよね。 実際、iPad や 解像度の高いPC で見た時などは ［大きめ］ くらいが丁度よく感じる私です。。 スマートフォン用のサイトづくりは難しいですね。
参照 ： このカスタマイズをする前に読んでおくと便利かも。。
関連記事
スポンサーサイト
キーワード検索 ： jQuery javascript フォント iPad スマートフォン ブラウザ
スポンサーリンク
最近は PC・スマートフォン・タブレット時代 などとも言われるように、ブログの閲覧環境も多種多用になっていますね。 現在、FC2ブログでは PC用・スマートフォン用・携帯（ガラケー）用 のテンプレートがあります。 振り分けは 以下のような感じ。
- PC用テンプレート が適応
PC，iPad，3DS，DSi，Wii，PSP，PS3，PSVita...等
追記 ： 2013年3月頃～ iPad はスマホ用にも切り替え可能になっています。
- スマホ用テンプレート が適応
※殆どのFC2ブログで、PC用テンプレートとの切り替えが可能
iPhone，iPod touch，Android，Windows Mobile，BlackBerry，...等
- 携帯用テンプレート が適応
スマートフォンに分類されない 各社携帯電話
下の図は、このサイトで良くアクセスされるページ（1週間分の上位集計）です。
クリックで画像を拡大します
主なスマートフォン，任天堂ゲーム機 及び 表示幅 800px以下 の環境では lightBox は機能しないようにしてあります。 画像をクリックすると単純に 別タブ（_blank）で大きい画像を開きます。
という訳で、このサイトの問題を少しでも減らすため、2つの対策をしてみました。
- ある条件の時は lightBox を機能させない
jQuery lightBox （拡大した画像や背景の何処をクリックしても閉じられるようにしてある） を タッチ操作のもの（iPad，iPod，iPhone，Android の場合)
と、3DS などモニターの小さいものの場合と、動作が若干不安定になる Wii では実行しないで、普通にリンクで開くようにしたい！
- ナビゲーションメニューの誤タップ対策
タッチ操作のもの（iPad，iPod，iPhone，Android，3DS 等） では、:hover（マウスオーバー）でプルダウンメニューが開くことはない為、以前のものでは、プルダウンさせたくても誤タップ（誤クリック）していまうケースも多いかも。。 ※アクセスできないことはないのですが、操作にコツが必要でした。
クリックで画像を拡大します
クリックで画像を拡大します
FC2ブログ共有テンプレート 『ari_seo1』『ari_seo2M』『ari_seo2L』 のナビゲーションは 今のところ 旧タイプ のままで、この部分を修正する予定はしていません。 ユーザーさんは、使いやすいものを選んで 必要に応じて各自で書き換えて使ってください。
1. ある条件の時は lightBox を機能させない
<script type="text/javascript">
// <![CDATA[
$(function(){
var agent = navigator.userAgent;
if( ($(window).width() > 800) && (agent.search(/(Android)|(iPhone)|(iPad)|(iPod)|(Nintendo)/i) == -1) ) {
$('#content a[rel*=lightbox]').lightBox();
}
// ]]>
</script>
関連記事
協力 （今回もコードのチェックと動作確認などでお世話になりました。）
追記 （2012/04/05） ：
$(window).width() が取得する値が DS で見た時に期待とは異なっていたので、 $('html').prop('clientWidth') を試してみたところ、IE や Firefox ではOKなのに、Chrome と Opera で起動しなくなってしまいました。 さらに $('html').width() も試してみたのですが、これもブラウザ表示領域とは異なる感じでした。 なかなか難しいですね。。 取り敢えず $(window).width() か $('html').width() のどちらかが無難なのかも。。
別に lightBox に限らず応用できると思います。 「if width（表示幅）が 800pxより大きく、且つ、スマートフォン用UA（ユーザーエージェント）でない場合・・・」 が目的の条件式 にしてあります。 801px以上 としたのは、Wii（Wii版 Opera9）の解像度が 横800px（固定）だからです。 何故か カクカクオーバーレイが機能する時と、クルクルするだけでいつまでも画像が表示されないケースがあるようなので... （法則は不明） 普通に画像を開く方が 良心的な気がします。
追記 （2012/04/04） ：
3DS の $(window).width() ウィンドウサイズは 横980px でした （モニターは 横320px， 他 ズーム次第で変動..）。 そのため、除外対象に Nintendo を加え 3DS や DSi を除外できるように変えました。 当然、Wii も含まれます。 800px には拘らなくても良いかも。。
※PS3（プレイステーション3） からのアクセスもちょこちょこありますが、こちらは 解像度 1,920x1,080 の場合が多く、かなり快適に使えるみたいなので lightBox もおそらくスムーズに動くのではないかなと... 予想。 PSP は 800px以下 なので、除外対象になります。
それ以外のものも 機能はするけれど、開いたものを触って不意に閉じてしまったり... など閲覧者の予測しにくい動作になるよりは、普通にリンクで開く方がいいかなと思いました。
2. ナビゲーションメニューの誤タップ対策
※共有テンプレートユーザーさん向けの説明 になります。
ナビゲーションメニューの該当部分 を以下のように変更。
※ class="navitop" が入っているリンクです。 間違えないようにご注意ください。
<a href="
javascript:void(0);" class="navitop<!--各エリア変数--> this<!--/各エリア変数-->">
こんな感じにします。 href=" " を省いてしまうと、IE6，IE7 では :hover が効かなくなってしまうので、href="javascript:void(0);" （何もしない） を入れておきます。
リンク先はないので target="_blank" なども削除しておいてください。
これだけでもOKなのですが、リンクではない部分とリンクを明確にするために
スタイルシートの該当部分に
#nav .navitop {
（中略）
cursor:default;
}
を追加しておくと良いかと思います。
その場合、プルダウン無しでリンクを残す部分には
<a href="./archives.html" class="navitop<!--各エリア変数--> this<!--/各エリア変数-->"
style="cursor:pointer" title="サイトマップへ">
のようにしておくとリンクと判りやすいと思います。
iPad など タッチ操作のものでは、タップ（クリック）してプルダウンを開くような動作になります。 プルダウンするメニューが長くなっている場合、下の方は 環境によっては選択しにくいと思いますので、その辺りも考慮してみると良いかもしれません。。
今回の変更は、テンプレユーザーさんからの要望 がキッカケで考えてみたものです。 確かにこの方が良さそうな感じもしたので、このサイトのものも変更してみました。
少しずつでも 閲覧しやすいブログ に近づけていきたいですね。。
あ... ちなみに私、スマートフォン持ってないです。。 しょぼ～ん
追記 ： 2012/04/28～ 旦那が iPad を持つようになったので 動作確認はOKです。
キーワード検索 ： スマートフォン iPad iPhone DS Wii jQuery Lightbox
スポンサーリンク
自分のつぶやきを jQuery の 『jCarousel Lite』 を利用して 1件ずつ自動でスクロール表示 するようにしてみました。 ツイートを何件ずつ表示するか、自動でスクロールさせるか・手動で送るようにするか などは自由に変更できるし、単純にリストで出力したものを利用しているだけなので、色々応用の効く方法だと思います。
※実際の表示は 個別記事ページの記事下 とトップページ にあります。
つい先日、jQuery 『jTwitteen』 というのを試したばかりなのですが... どうしても IE8以下 で見た時のフォントの汚さが気になってしまって、方法を変更することにしました。
[ デモページ / 関連記事 ： ツイートを1件ずつ表示する jTwitteen の設置方法 ]
今回利用した 『jCarousel Lite』 は元々テンプレに設置していたものです。
[ 記事 ： jCarousel Lite をカスタマイズして記事毎に！ ] でも紹介したものですが、基本は ↓こんな感じ。 これは オートスクロールはOFF の状態ですが、自動も可能。
要は、リスト<li> で自分のツイートを表示するようにしたら これが使えたのですが、設置する上でかなり苦労した部分もあるので 方法を紹介しておきます。 各ツイートへの 「@返信，リツイート，お気に入り」 ボタンも付けてみました。
つぶやきを jCarousel Lite で、1件ずつ表示させる方法
取り敢えず FC2ブログ向け に説明を入れておきます。 私が実際に使っている id，class名 とは一部異なりますので ご注意ください。 Windows 7，Vista，XP， Wii， 3DS， iPad / Firefox， Google Chrome， Opera， Safari， IE6 ～9 等 で動作確認済みです。
1. スクリプトの準備
- jQuery ライブラリ本体
Googleのサーバーから直接読み込んで使用する場合、準備は不要です。 私が使っているのは バージョン1.2.3 です。 それ以上なら機能すると思います。
[ 参照 ： Google AJAX Libraries APIを利用しよう！ | THE HAM MEDIA ]
- jcarousellite_1.0.1.min.js (2 KB)
jCarousel Lite Download からDLした .jsファイル を ファイルサーバーにアップロードします。※FC2ブログでは ファイル名に .(ドット) が含まれているとアップできないので... 予め、ファイル名を jcarousellite.js などのように変更しておいてください。
- blogger_tw.js (3 KB)
http://twitter.com/javascripts/blogger.js を私がカスタマイズしたものです。
blogger_tw.js をDLして （必要なら編集し） アプロードしておきます。
↑ これ以外にも色々サンプルを用意しました。 取り敢えず、これでテストしてみて 動作OK なら 他のと差し替えると良いかと思います。 （詳細は 記事とコメントを参照）
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/ ～ /jcarousellite.js"></script>
<script type="text/javascript" src="http://blog-imgs-00.fc2.com/a/b/c/ ～ /blogger_tw.js" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#jcarousel_tw .anyClass").jCarouselLite({ btnNext:"#jcarousel_tw .next", btnPrev:"#jcarousel_tw .prev", auto:5000, speed:1000, vertical:true, visible:1 });
});
</script>
- 赤文字部分 には、アップロードしたファイルのパスを入れてください。
- blogger_tw.js は 日本語を含んでいるので、文字コードを指定してあります。
- auto:5000, speed:1000, vertical:true, visible:1
jcarousellite.js デフォルトの値は、auto:null（オートスクロールしない）, speed:200（スライドスピード）, vertical:false（≒横方向スライド）, visible:3（可視リスト3件） です。 『jCarousel Lite』 をツイッターでのみ利用するのであれば、js ファイル（該当箇所）を 直接書き換えておいても良いかも。。
- auto:5000（1つを5秒表示） speed:200（スライドの移動スピード）
3. 表示させたい場所に以下を記入 （通常は CSS設定後）
<div id="jcarousel_tw">
<div class="next"></div><div class="prev"></div>
<div class="anyClass">
<span class="myTwitter"><a href="http://twitter.com/arinogotoku" title="Twitter へ" target="_blank">@arinogotoku</a></span><br />
<ul id="twitter_update_list"><li>つぶやきを取得・表示しています...
</li></ul>
</div><!--/anyClass-->
</div><!--/jcarousel_tw--><br style="clear:both" />
- 太字部分 のみ必須。 <li> に入れた内容は javascript OFF の場合と、読み込み中 及び ツイートが取得できなかった場合 に表示されます。
- 灰色文字部分 は 任意のユーザーに変更してください。 入れなくてもOKです。
4. </body> 直前などに以下を記入
<script type="text/javascript" src="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=arinogotoku&include_rts=true&count=7&callback=twitterCallback2"></script>
- 赤文字部分 に、取得したいユーザーのID と 表示したい件数 を入れます。
- include_rts=true というパラメータを追加することで、公式RT も取得できるようになります。 逆に 公式RT は省略したければ、この設定を外せばOKです。 （表示件数は、いずれの場合も 公式リツイートを含む件数 になるようです。）
※現在の私の設定は count=7 → count=10 に変えています。
- 余談 ： 最初、 http://twitter.com/statuses/user_timeline/arinogotoku.json? を使う方法を試したのですが、これでは include_rts の設定が使えず、公式RT を拾う方法がないようです。 http://api.twitter.com/1/statuses/user_timeline.json? を利用します。
5. スタイルシートの設定例
以前、一般的な『jCarousel Lite』での設定例 を載せたので、それに合わせてあります。 前回のソースを使っている方は 緑色部分を追加すればOK です。
CSS の設定は あくまでも一例です。 全体のサイズ を入れておきます。
.prev と .next 部分は 背景画像を使った場合の設定例です。 方法は 色々あると思いますが．．． 私の場合は 横30px，縦78px の画像 を位置だけずらして使っています。
例えば、矢印画像など 色違いの画像を上下に並べて 「1つの画像に合成したもの」 を利用すればOKです！
※IE6以下では :hover 部分の設定は 無効になります。
/* jCarousel Lite
------------------------------------- */
/* 全体のサイズ設定 */
.anyClass {
height:180px !important;
overflow:hidden;
}
/* 余白のリセット */
.anyClass ul,
.anyClass li {
margin:0;
padding:0;
}
/* 個々のリストの設定 */
.anyClass li {
list-style:none;
float:left;
height:150px;
text-align:center;
font-size:11px;
}
/* 前へ（PREV）の設定 */
.prev {
float:left;
margin:41px 5px 0 0;
width:30px;
height:39px;
background:url(http://・・・/前へ用画像.png) no-repeat;
cursor:pointer;
}
.prev:hover {
background:url(http://・・・/前へ用画像.png) no-repeat 0 -39px;
}
/* 次へ（NEXT）の設定 */
.next {
float:right;
margin:41px 0 0 5px;
width:30px;
height:39px;
background:url(http://・・・/次へ用画像.png) no-repeat;
cursor:pointer;
}
.next:hover {
background:url(http://・・・/次へ用画像.png) no-repeat 0 -39px;
}
#jcarousel_tw .anyClass {
background:#fff url(http://アイコン画像・・・) no-repeat 5px 20px !important;
background-attachment:fixed;
}
#jcarousel_tw .anyClass li {
width:400px;
padding:5px 0 15px 100px;
text-align:left;
font-size:12px;
word-break:break-all;
}
/* ツイートの内容の装飾（省略可） */
#jcarousel_tw .tweet_body {
line-height:1.4;
}
/* ツイートの時間，返信メニューなど */
#jcarousel_tw .tweet_menu {
margin-top:10px;
text-align:right;
}
/* 背景アイコン下の @arinogotoku 部分 */
.myTwitter {
position:relative;
top:115px;
z-index:10;
font-size:11px;
}
短縮アドレスの展開 や 返信ツイート非表示 のカスタマイズ
URLパラメータに include_entities=1 （補足: include_entities=true だと何故か動かないそうです。） を指定すると、expanded_url（t.co に短縮される前の 元のURL） や display_url（ツイッターで表示されるリンクの表示） などのデータが扱えるようです。
- t.co の短縮アドレスを展開して表示したい場合 （実装済み）
- 返信ツイート（@ユーザー名で始まるもの） を非表示にしたい場合
追記 （2012/03/11） ：
コメント にて COLTdeGOさん から色々教えていただきました♪└┤*´∀｀*├┘♪
- t.co を展開 （表示もアドレスも 短縮前の状態に）
- t.co を展開 （表示は t.co のままで、リンクは展開されているもの）
- t.co を展開 （表示は display_url で、リンクは展開されているもの）
- 公式RT は表示して、@ユーザー への返信ツイートのみ除外する方法
※詳細は この記事のコメント（まとめは No.311 など） を参照してください。
「公式ウィジェットじゃ物足りない！」 という方などは是非使ってみてください。
キーワード検索 ： ツイッター jQuery javascript カスタマイズ
スポンサーリンク
自分のツイート（つぶやき）をスライドショーのように1件ずつ自動で表示させることのできる jQuery 『jTwitteen』 を試してみました。
クリックで デモページ に移動します。
個別記事ページの記事下 と トップページ に表示するようにしてみましたが、どうでしょうか。。 取得する件数を何件にするか、ツイートメニュー（返信・リツイート・お気に入り）を表示するか...等 は jQuery の設定で変更可能です。 また、スタイルシートを弄ることで ある程度 自分好みにカスタマイズできるのも特徴かなと思います。
2012/03/01～ 表示方法を 『jCarousel Lite』 を使うものに変更しました。
[ 関連記事 ： 自分のつぶやきをオートスクロールで表示 （jCarousel Lite を活用） ]
元々は、私のテンプレユーザーさんでもある だっきゃさんのサイト で、『Twitteen』 というプラグイン が設置されているのを見て、「何か面白い♪」 と思ったのがきっかけです。
こちらはプラグイン版なので、作者さんのサイトで発行されるソースを貼り付けるだけという手軽さが魅力かも。。 タイプライターバージョン と 横スクロールバージョン があるようです。
jQuery版 の 『jTwitteen』 は自分で設定しないといけないので、及び下の図のようなちょっとした問題もあったので... FC2ブログでの設置方法を残しておこうと思います。
jTwitteen 設置方法 （FC2ブログ編）
1. スクリプトの準備
- jQuery ライブラリ本体
私が使っているのは バージョン1.2.3 です。 ダウンロードしたものを使うか、Googleのサーバーから直接読み込んで使用します。
[ 参照 ： Google AJAX Libraries APIを利用しよう！ | THE HAM MEDIA ]
- 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; } を入れておくと、背景色を設定しない時よりマシになる ことが分かったので この対策だけしておきました。 元々白背景のところに白背景を重ねるのは 本当はイマイチだと思いますが、比べるとかなり違うようなので。。
もし、もっと有効なバグ回避方法が分かる方がいましたら 是非教えてください。
ちなみに... この可愛いアイコンは 「ブログが作りたい！」 のクマクロさんが、私のサイトのリンク用 に描いてくださったものです。
私がそれまで使っていた ツイッター用アイコン と ありのごとくあつまりて のイメージから作ったものかなと思いますが、とっても可愛いので ツイッターでも使わせていただいてます。
私の写真は（小さめですが..）このブログで1度だけ登場していますので、お暇な方（＆私のファンの方!?） は是非探してみてくださいｗ 私の実物の雰囲気とも結構似ているかも。。
キーワード検索 ： ツイッター jQuery プラグイン javascript ソース
スポンサーリンク
申し訳ありません。 お探しの記事は現在、この ユーザータグ （Keyword） を設定していない可能性があります。 右上の検索BOXで 再度用語を短めに入力していただくと記事が見つかる場合があります。
立ち読みページ
花粉症の長男用マスク
次男用（これでも大きい..）
20Lを2コ購入。コック付。
