jQuery no.240.218.215.213 【ありのごとくあつまりて】

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

このページの記事目次（タグ: jQuery の検索結果 10 件）

文字サイズ変更ボタンをスマートフォン用テンプレートに設置 [2013/05/26]
iPad，iPhone，Android，DS，Wii など閲覧時の操作性対策を2つ [2012/04/03]
自分のつぶやきをオートスクロールで表示（jCarousel Lite を活用） [2012/03/09]
ツイートを1件ずつ表示する jTwitteen の設置方法 [2012/02/07]

total 3 pages 次のページ　→

文字サイズ変更ボタンをスマートフォン用テンプレートに設置

2013/05/26 (日) カテゴリー：ブログカスタマイズ上級

文字サイズ調整ボタンを付けて任意に大きいフォントにも変更できるようにしたもの，iPad（スマートフォン用テンプレート）

スマートフォン用テンプレートに文字サイズをデフォルト・大きめ・特大などに調整できる 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のスマートフォン用広告変数で自動で挿入されるスクリプトに

<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>

という、表示サイズを 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://static.fc2.com/js/lib/jquery.js" type="text/javascript"></script>　などが入っている場合は jQuery本体は不要ですので、それより下に jquery_cookie.js と jquery_fontsizechange.js だけを入れてください。

2.　サイズを変更したい部分

このサイトではスマートフォン用テンプレートの記事ページ「記事内容など」のみに設定していますので、それを例にしています。  ～  が個別記事ページで表示されるエリアなので、その中だけに入れてあります。

<ul id="fontSize">
<li class="changeBtn">デフォルト</li>
<li class="changeBtn">大きめ</li>
<li class="changeBtn">特大</li>
</ul>

<div id="changeArea">

文字サイズを変更したいエリア
（記事の内容，他）

</div>

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 スマートフォンブラウザ

お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。

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

2013/05/26 ～ | Comment (0) tweet? | ↑ ページ先頭へ ↑ |

iPad，iPhone，Android，DS，Wii など閲覧時の操作性対策を2つ

2012/04/03 (火) カテゴリー：ブログカスタマイズ上級

最近は 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週間分の上位集計）です。

アクセス解析：
PC用テンプレートでの閲覧を辿ると iPad, DS, Wii 等の他、「iPhone や Android 等のPC版表示」でもアクセスされていることが判ります。

クリックで画像を拡大します

主なスマートフォン，任天堂ゲーム機及び表示幅 800px以下の環境では lightBox は機能しないようにしてあります。画像をクリックすると単純に別タブ（_blank）で大きい画像を開きます。

という訳で、このサイトの問題を少しでも減らすため、2つの対策をしてみました。

ある条件の時は lightBox を機能させない　
jQuery lightBox （拡大した画像や背景の何処をクリックしても閉じられるようにしてある）をタッチ操作のもの（iPad，iPod，iPhone，Android の場合) と、3DS などモニターの小さいものの場合と、動作が若干不安定になる Wii では実行しないで、普通にリンクで開くようにしたい！
ナビゲーションメニューの誤タップ対策　
タッチ操作のもの（iPad，iPod，iPhone，Android，3DS 等）では、:hover（マウスオーバー）でプルダウンメニューが開くことはない為、以前のものでは、プルダウンさせたくても誤タップ（誤クリック）していまうケースも多いかも。。 ※アクセスできないことはないのですが、操作にコツが必要でした。

【 ↓　続きを表示する　↓ 】

【　続きを閉じる　】

旧ナビゲーション： iPad などのタッチパネルでの操作を特に意識しなかったもの

クリックで画像を拡大します
現ナビゲーション：タッチパネルでの操作時に誤タップすることがないようにしたもの

クリックで画像を拡大します

FC2ブログ共有テンプレート『ari_seo1』『ari_seo2M』『ari_seo2L』のナビゲーションは今のところ旧タイプのままで、この部分を修正する予定はしていません。ユーザーさんは、使いやすいものを選んで必要に応じて各自で書き換えて使ってください。

1.　ある条件の時は lightBox を機能させない

追記（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です。