このページの記事目次 （カテゴリー: ブログカスタマイズ上級 30 件）
total 8 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 スマートフォン ブラウザ
スポンサーリンク
別に 検索結果以外でも使えるのですが、FC2ブログで使える変数（公式マニュアル）に <%total_num> が追加されているはご存じですか？ これ、どうやら元々使えていたらしいのですが、マニュアルに載ったのは 2012年1月 あたり？比較的最近かなと思います。
<%total_num> 「公開」状態の記事の数
※どこでも有効な単変数 の項目に入っていますが、○○件 などのように表示させたい場合には、エリアを限定して表示させる必要があると思います。
この変数は トップページなどでは 全記事件数、 カテゴリー別ページでは そのカテゴリーに該当する記事件数、 検索結果ページでは その該当記事件数... というようにエリアによって表示される値が異なります。 PC版，スマートフォン版，携帯版 それぞれのテンプレートで機能しますので、上手く利用すれば閲覧性が良くなるかも。。
クリックで画像を拡大します [
実際の検索結果ページ ]
と、いう訳で ページ上部の 便利ナビ のところに追加してみました。 ここには元々 エリア変数 を入れてあるので、<%total_num> 件 などを追加するだけでOKです。
[ 実際のカテゴリー別ページ ]
スマホ用テンプレート や 携帯用テンプレート でも使えますが、PC用テンプレート とは エリア変数の分類 が少し異なりますので、そこだけ間違わないように。。
※スマホ版・携帯版の <!--page_area--> には <!--index_area--> の他に <!--category_area--> と <!--date_area--> も含まれます。
単純に... こんな感じで指定すればOK！
<!--category_area-->
<%sub_title>（<%total_num> 件）
<!--/category_area-->
また、エリア限定ですが 「トップページなどでは 全記事件数」 なのでこれまでスクリプトで算出していた 総記事件数の表示 がこの変数だけで表示できるようにもできます。
色々試してみると、意外と 使い道の多い変数 ですよ。。
キーワード検索 ： FC2ブログ テンプレート 変数 ブログ内検索 便利ナビ
スポンサーリンク
最近は 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
スポンサーリンク
FC2ブログを スマートフォン（iPhone， Android， Windows Mobile 等） 及び iPod touch から閲覧する時に適応される テンプレート、これをカスタマイズ出来るようになりました！ 2011年8月30日頃～ 一部サーバーで導入， 2011年9月7日 公式アナウンス 有り
でも、「iPhone とか持ってないし...」 という方も多いですよね。 私も持っていないので 殆どが手探りの状態ですが、スマートフォンを持っていなくてもプレビューすることは可能ですので、その方法をいくつか紹介します。
まず、知りたいのは 今どんな見え方になっているかですよね。 現在FC2ブログで用意されている スマホ用公式テンプレートは 2種類あるのですが...
追記 （2012/04/24） ：
今は 公式・共有で100種類以上の スマートフォン用テンプレート が使えるようになっています。
IE や Sleipnir 等 （Trident エンジン） のブラウザでは 確認できない CSS設定 がいくつか入っています。
また、それ以外のブラウザでも （カスタマイズしない状態では） 各所のリンクをクリックすると パソコンでの表示に戻ってしまうので、色々と不都合があります。 （※カスタマイズすれば、辿りやすいリンクに変更も可能）
と、いう訳で...
Safari のユーザーエージェントを変更して iPhone の実際の表示に近いもので 動作確認（プレビュー）をする方法
と、Paroday（@paroday）さん から教えて頂いたので、早速 Safari（Windows版）をダウンロード。 以下の手順で設定しました。 簡単です^^
最初に 1～3 の設定をしたら、後は 4 のアイコン → 開発 → ユーザエージェント → Safari iOS 4.3.3 - iPhone を選択 （メニューの 開発 からでも同様） でOKです。
これで見ると、FC2ブログの広告表示 や 「スマートフォン版テンプレート」 から 「パソコン版テンプレート」 に切り替えた時の表示なども 実際に近い状態でページが辿れ、表示確認 ができます。 公式テンプレートのままでは ちょっと問題がある ということにも気付くかも。。 使いやすく修正してみたり、アクセス解析のタグ を入れたり... 今後はいくらでもできますね！ カスタマイズに関しては また別の記事にまとめます。。。
上記は FC2ブログで使われているアドレスの一部ですが、パソコンから UserAgent を変えずにクリックした時と、設定を iPhone に変えてクリックした時とでは 表示されるページが異なりますので試してみてくださいね。
Safari（横幅）を 限界まで小さくすると、丁度 320px になります。 iPhone の ディスプレイ解像度 は 3.5インチサイズで 480×320ピクセル （上のSafariの画像は 横320px）です。 手軽に サイズを合わせられるのも便利ですよ。
ちなみに... 最初の画像にある 「パソコンから iPhone での表示（みたいな）テストが出来る」 iPhone 3G/4G tester はちょっとクセがあって、スマホ用アドレス のままでは テスト出来ません。。 短縮アドレス なら確認できるので、パラメータを省略しているからかな と思います。
http://arinogotokuatumarite.blog19.fc2.com/?sp 等を一旦短縮すれば使えます。
スマートフォン各OS で使われるブラウザは、実際には色々あります。 なので、ここで紹介した方法は あくまでも「疑似（それっぽい表示）」です。
スマートフォン の OS と 主なブラウザ
主流スマートフォン等 の
OS と 主な
ブラウザ ※（ ）内がブラウザ
- iPhone OS （Mobile Safari， Sleipnir Mobile）
- Google Android （Chrome Lite， Opera Mobile， Opera Mini， Sleipnir Mobile）
- Windows Mobile （Internet Explorer Mobile， Opera Mobile）
- BlackBerry （Opera Mobile）
- iPod touch※ （Mobile Safari）
※iPod touch は厳密には 「スマートフォンの分類には入らない」 ようですが、スマートフォン用テンプレートが適応されます。 なお、 iPad の ブラウザも Mobile Safari ですが、PC用テンプレートが適応されます。 Wii や DS 等のゲーム機も PC用テンプレートです。
Android （アンドロイド） 携帯端末一覧
そもそも、「スマートフォンって何？ ドコモの Xperia が Android 携帯 ってことは知っているけど、他の機種はよく知らない」 というレベルだった私。。 アクセス解析などを元に Android の携帯機種 を調べてみましたが、色々あり過ぎて調べきれない。。。
という訳で、以下はそれをまとめてあったサイトから引用させていただきました。
これほど多いとさすがに把握しきれないですね。
docomo
Android搭載端末一覧！～NTTドコモ編～ | andronavi (アンドロナビ)
Xperia ray SO-03C｜MEDIAS WP N-06C｜Xperia acro SO-02C｜GALAXY S II SC-02C｜P-07C｜F-12C｜AQUOS PHONE f SH-13C｜Optimus bright L-07C｜AQUOS PHONE SH-12C｜Xperia arc SO-01C｜MEDIAS N-04C｜Optimus chat｜REGZA Phone｜LYNX 3D｜GALAXY S｜LYNX｜Xperia｜HT-03A
au
Android搭載端末一覧！～au編～ | andronavi (アンドロナビ)
MIRACH IS11PT｜Xperia acro IS11S｜INFOBAR A01｜G’zOne IS11CA｜AQUOS PHONE IS11SH｜AQUOS PHONE IS12SH｜REGZA Phone IS11T｜htc EVO WiMAX ISW11HT｜SIRIUSα IS06｜IS05｜REGZA Phone IS04｜IS03｜IS01
SoftBank
Android搭載端末一覧！～ソフトバンクモバイル編～ | andronavi (アンドロナビ)
Vision 007HW｜Yahoo! Phone 009SH Y｜007SH KT｜AQUOS PHONE THE PREMIUM 009SH｜シンプルスマートフォン 008Z｜AQUOS PHONE THE HYBRID 007SH J｜Sweety 003P｜AQUOS PHONE THE HYBRID 007SH｜AQUOS PHONE 006SH｜GALAPAGOS 005SH｜DM009SH｜Libero｜DELL Streak｜GALAPAGOS 003SH｜HTC Desire HD｜Desire｜SoftBank 004HW
キーワード検索 ： スマートフォン iPhone ブラウザ プレビュー テンプレート
スポンサーリンク
iPhone表示は、ブラウザ『Safari』で比較的近い確認できると思います。ブラウザメニューの設定→詳細→開発表示チェック。メニューの開発→ユーザエージェント（iPhone）。ウインドウ狭める。 http://www.apple.com/jp/safari/
![【送料無料】0さいー4さい こどもずかん (4冊セット)英語つき [よしだじゅんこ]](http://hbb.afl.rakuten.co.jp/hgb/?pc=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fbook%2fcabinet%2f0581%2f05810817.jpg%3f_ex%3d128x128&m=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fbook%2fcabinet%2f0581%2f05810817.jpg%3f_ex%3d80x80)
共有テンプレート PC用：3作， スマートフォン用：3作， 携帯用：2作 を公開しています。
