このページの記事目次 （タグ: フォント の検索結果 5 件）
total 2 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 スマートフォン ブラウザ
スポンサーリンク
Windows Vista 以降のOSからは 標準搭載されている 「メイリオ」 フォント。
だだっぴろいフォントなので、嫌われることもあるようですが．．． 私のテンプレートでは 第一フォントに 「メイリオ」 を指定しています。 ちなみに... 殆ど 無意味な位置 に 「meiryoKe_PGothic」 という非標準フォントも何となく入れています。
XP のパソコンで 私のサイトを見ている方は、標準では 「ＭＳ Ｐゴシック」 が適応されていると思いますが、「ＭＳ Ｐゴシック」 は 12px 程度の文字なら読みやすいですが、それより大きくなってくると．．． ギザギザして かなり読みにくいのではないでしょうか？
過去の記事 [ XP×MS Pゴシック がこんなに綺麗になるとは ] では gdi++ Helium版 というフリーソフトを使って 「ＭＳ Ｐゴシック」 などでもキレイに表示させる方法 を紹介しましたが．．． ちょっとぼやーんとしてしまうのでので 長く見ていると目が疲れてきます。
なので、XP に 「メイリオ」 を インストールする ことにしました。 今更...!?
前にも それができるらしいこと、この図のページの存在 は知っていたのですが、その時は 何故かインストールできませんでした。「IE6 のままだったからかなぁー」 と今は思っているのですが．．．??
Windows XP に 「メイリオ」 をインストールする方法
Windows XP 向け ClearType 対応メイリオ バージョン 5.00
マイクロソフトより 公式ダウンロード が可能です。（無料）
ダウンロード と インストール
Microsoft ダウンロードセンター » Windows XP 向け ClearType 対応日本語フォント
↑ このページより、内容を確認の上 [ 続行 ] をクリックします。
後は、ナビゲーション通りに進めば OKです。 システムフォントへの インストール まで自動で行ってくれます。 但し、「メイリオ」 は フォントの設定 を ClearType にしないとギザギザに見えてしまいますので、この設定を確認します。
ClearType の設定 （確認） 方法
キーワード検索 ： メイリオ フォント 無料
スポンサーリンク
Vista を購入して以来、 我が家の XPパソコンは めっきり出番が少なくなりました。 が、それでも 旦那とパソコン争奪戦になった場合には、しぶしぶ使うハメに。。。
XP を常用していた時にはあまり感じませんでしたが Vista で メイリオ に見慣れてしまうと、MS Pゴシック （正確には "ＭＳ Ｐゴシック"） で表示された自分のサイトを見ると、かなりギザギザが目立って、よ・読みにくい・・
ところが、あるフリーソフトを使うと、「ちちんぷいぷい！」 XP×MS Pゴシック でも、こんな風にキレイに表示できるようになっちゃいます。
『あられフォント』 にそっくり＆可愛い♪
これ、結構 有名なソフトらしいのですが、私は今頃 その存在を知りました。
使ったのは、gdi++ というフリーソフトの 後継ソフト gdi++ Helium版 です。
[gdi0909.zip] GDI++初心者用スターターパック
で、私のようなせっかちな人は 「取り敢えず使っちゃえ」 と急ぎがちですが、このソフトの場合は やっぱり ReadMe などにはじっくり目を通しておいた方が安全かもしれません。
クリックで画像を拡大します
キーワード検索 ： フリーソフト Vista メイリオ フォント
スポンサーリンク
お気に入りのフリーフォントを載せてみました。 （本当は...昔作ったホームページからの抜粋です
） 特に 【 ありのごとくあつまりて 】 のタイトル画像に使っている 『あられフォント』 は私のお気に入りで、フリー版は 漢字が教育漢字1,500文字程度に限られていますが、英字，数字，カタカナ，ひらがな，漢字（一部） が収録されているので、かなり使えます。 （ローマ字入力にも対応♪）
ちなみに、『Switch Font』 という フリーソフト があると システムにインストールしていないフォントを 一時的に使うことができたり、 絵文字フォントのキーボードレイアウトも簡単に判って便利です。 （ScreenShot）
※二次配布可能なものは 別途 ダウンロード用ページ を用意しました。
あられ-教漢 （ ABC abc 123 アイウ あいう 教育漢字 ）
DownLoad TYPE-LABO check !
Efon，Kfon （ ABC abc 123 ）
DownLoad クラゲジルシ エヌプラス
キーワード検索 ： フォント ダウンロード
スポンサーリンク
申し訳ありません。 お探しの記事は現在、この ユーザータグ （Keyword） を設定していない可能性があります。 右上の検索BOXで 再度用語を短めに入力していただくと記事が見つかる場合があります。
