HOME Twitter PC RSS 

スマートフォン版 ありのごとくあつまりて

スマートフォン用の共有テンプレートを 3作登録 しています。 FC2ブログユーザーさんは、是非使ってみてくださいね。 詳細はこちら

HOME > ブログカスタマイズ上級 > 文字サイズ変更ボタン をスマートフォン用テンプレートに設置

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

http://arinogotokuatumarite.blog19.fc2.com/blog-entry-240.html
文字サイズ調整ボタン を付けて任意に大きいフォントにも変更できるようにしたもの,iPad(スマートフォン用テンプレート)

スマートフォン用テンプレートに 文字サイズを デフォルト・大きめ・特大 などに調整できる jQuery のスクリプトを設置してみました。 クッキーを利用しているので、ページを送っても有効です。

iPad からFC2ブログを閲覧した場合、以前は パソコンからのアクセスと同じ扱いになっていましたが、2013年3月頃からは スマートフォン用テンプレート にも切り換えられるような仕様に変わっています。(※現在のデフォルトは PC用テンプレート のようで、共通URLでアクセスした場合は 毎回1度は PC用テンプレートが表示されます。)

PC用テンプレートで閲覧すると、上部に【 スマートフォン版で表示 】というリンクが 大きく表示されてしまうようになったので、仕様変更は賛否両論なようですが、どちらでも閲覧できるようになったのは便利になったと言えるのかもしれませんし、iPad などからも閲覧し易いようにしていく必要が出てきたと言えるのかもしれません。

iPad から実際に見てみると、不便に思う点がいくつかあります。 例えば

  1. スマホ向けテンプレで閲覧すると、ズーム(ピンチアウト)が出来ないサイトが多い。
  2. スマホ向けテンプレで閲覧すると、ズーム(ピンチアウト)が出来る場合でも、ズームをすると (画面幅での折り返し表示がされない為) 横スクロールが必要になるケースが多い。

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ブログに設置する方法

準備するもの

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 で見た時などは [大きめ] くらいが丁度よく感じる私です。。 スマートフォン用のサイトづくりは難しいですね。

スポンサーリンク

楽天写真館
今すぐ使える特別クーポンプレゼント!!
初回限定プリント1枚4円 50枚200円!送料無料など

記事URL(共通)
http://arinogotokuatumarite.blog19.fc2.com/blog-entry-240.html

Hatena Google Bookmarks Google+ Yahoo! Facebook Twitter FC2ブログランキング
コメントを見る 0件 コメントを書く PC版で読み直す

CATEGORY RSS

カテゴリ : ブログカスタマイズ上級

カテゴリーリスト (記事件数)

ブログカスタマイズ中級 (15) / ブログカスタマイズ上級 (30) / FC2共有テンプレート (16) / FC2マニア・仕様関連 (21) / アクセス解析・SEO対策 (18) / ブログ雑記・その他 (8) / TV・NET・GAME (12) / 子育て・日々の出来事 (10) / 得するお役立ち情報 (15) / 無料素材のリンク集 (11) / 無料ソフト・フォント等 (10) / Twitter・ブラウザ関連 (26) /

PC版へ変更
トップページへ
ページ先頭へ戻る

※2014-04-29まで FC2ブログ有料プラン を適応中です。