MS Access Tips/Sample and VBA and Blog customize etc...

サイズを記憶するフォントサイズ変更ボタン

WEBページのフォントサイズをどうするかはなかなか難しいものです。人によって、視力も違うし、ディスプレイのサイズ、解像度の設定もことなります。プラウザにも文字サイズを変更する機能あるいはズーム機能がありますが、レイアウトが崩れたり、画像が汚くなったり希望通りに行かない場合もあります。ページ上に文字サイズ変更ボタンがあればユーザビリティの向上になると思われます。

FC2ブログの共有テンプレートをみてみるとそのようなボタンが実装されているものもあります。簡単なJavaScriptで実装できるものなで、hatena chipsでもサイズ変更ボタンをだいぶ前から置いていました。しかし、変更してもそのサイズを記憶しているわけではないので、リロードしたり、ページ移動したら元のサイズに戻ってしまいます。これでは、あまり実用的ではありません。

FontSizeBtn.png

そこで、今回、サイズを記憶してページ移動しても、また、間をあけてアクセスしても、以前のサイズで表示されるように機能拡張してみました。また、大中小の3段階だけだったのを段階的に拡大、縮小できるように改良しました。

難易度:

FC2ブログの管理画面より「テンプレートの編集」でHTMLの<head> ~ </head> 内に、下記のJavaScriptコードを記述します。

2010/03/23: コード一部修正しました。

スクリプト冒頭のユーザー設定項目の部分の数値は、使用テンプレートのスタイルシートの bodyセクションの font-size の設定にあわせて変更ください。当ブログのcssでは下記のように 85% で指定してあるので上の設定になりました。

スタイルシートで bodyセクションが font-size:12px; となっていたら、規定サイズは12、単位は'px'、増減幅は1、などというように設定します。

次に <body> の直後に下記のコードを記述。

ボタン用の画像を3つ用意して、ファイルアップロードしておきます。テンプレートHTMLのヘッダー辺りのお好みの場所に下記のように記述します。http://********/*.gif の部分はアップロードした画像ファイルのURLに変更してください。

上記の通りに設置しても動作しないテンプレートの場合の対処法

2010/03/23: 追記。

css でそれぞれの要素に font-size:12px; というように固定値を設定している場合は、サイズが変更されません。例えば下記のような設定のスタイルシートです。

この場合は、body に font-size:12px; を追加して、他の要素は相対値(% など)で指定します。逆にサイズを固定のままにしておきたい要素は px指定のままにしておきます。

スクリプトのユーザー設定項目は下記のように変更します。

拍手する

13 Comments

s01 says..."共有テンプレート ac_blacksilver で"

名前:ac_blacksilver 作者:hibiki[alphachanneltk]
共有テンプレート ac_blacksilver  ダウンロード後 
共有プラグイン
サイズを記憶するフォントサイズ変更ボタン
追加しても、効かないのは、何故でしょう。
ac_blacksilver のhtml css テンプレート 修正で効きますか。
どこを修正すれば良いのか?
他の、共有テンプレートを試しましたが、効きますね。

以上の件、宜しくお願い致します。

2010.03.23 18:26 | URL | #bWCffIT2 [edit]
hatena says..."テンプレート修正法、追記しました"

s01さん、
スクリプトのユーザー設定部分と、css の修正で対処できます。

記事に追記しましたので、参照ください。

2010.03.23 21:28 | URL | #- [edit]
s01 says..."css の修正で対処出来ました"

maincontainer部分は効きました

レフトサイドバー部は効きません
http://hatenachips.blog34.fc2.com/blog-entry-204.html#more
Buttons like Windows 7 導入しています。
hatenaさんのテンプレートはサイズ変更効いていますね。
どのようにしたらよいのか? css ビギナーなので 
以上です。

2010.03.24 06:47 | URL | #bWCffIT2 [edit]
hatena says...""

ac_blacksilver テンプレートの css の

font-size: 12px;

の部分を

font-size: 100%;

font-size: 14px;

の部分を

font-size: 117%;

に変更すればOKだと思います。
(ただし body { } 内は font-size: 12px;
のままで。)

ただし、レイアウトが崩れたりバランスが悪くなる場合もありますので、
一つずつ変更していって、プレビューで確認しながら進めていくといいと
思います。

2010.03.24 20:36 | URL | #- [edit]
s01 says...""

ご指摘通りの修正で出来ました。
有難う御座いました。

2010.03.25 10:42 | URL | #bWCffIT2 [edit]
ccs says..."V1.1をDLさせていただきました。【質問】"

現在テンプレート
名前:4c_bluesky01_yo 作者:アイコンデザイナー Yo.[icon]
を使用しています。

boby{font-size:x-small; 

などで設定されているテンプレートの場合
対処法はありますでしょうか?

ちなみに現在はフォントの間隔が指定され
[L]で拡大すると行間が開いていきます。

お手数ですがお時間ございましたら、よろしくお願いします。

2010.08.08 18:56 | URL | #- [edit]
ccs says..."その後"

CSSのフォントのすべてを書き換える事にしました。

body{
font-size: small;

font: 13px;
}

その他のフォントをすべて %表示に書き換え
(対応表)※ブラウザにもよるみたいですね。
10px 77% <font-size: x-small;>
11px 85%
12px 93%
13px 100% <font-size: small;>
14px 108%
15px 116%
16px 123.1%

見た目はそのままに(あくまでMYブラウザの仕様)
LMSフォントサイズ変更が適応されました。

具体的な改善理由は判明していませんが^^
もっと良い方法や文字間隔が指定されていた
原因がわかればうれしいのです♪

2010.08.11 05:04 | URL | #- [edit]
まっしゅ says..."動作はするものの、記憶されません"

こんにちは。
livedoor Blogで使用させて頂いてます。

動作(クリックで文字のサイズの変更)は問題ないのですが、文字のサイズを変えたあとにリロードしたり、ページ移動すると設定が元に戻ってしまいます。

※hatena clipさんのブログでは同様のことを試しても設定は保存されたままです。(livedoorブログとFc2ブログでは違うところもあるかもしれないですが・・・)


宜しくお願い致します。

2013.12.01 05:36 | URL | #- [edit]
hatena says..."re:動作はするものの、記憶されません"

> 動作(クリックで文字のサイズの変更)は問題ないのですが、文字のサイズを変えたあとにリロードしたり、ページ移動すると設定が元に戻ってしまいます。

ブラウザの設定で「クッキーを許可しない」になっているということはないですか。(でも、当方のブログでは有効なのでこれはないですね。)

それ以外では、ちょっと原因が推測しかねます。

2013.12.01 08:56 | URL | #5uE6dEgY [edit]
まっしゅ says..."re:re:動作はするものの、記憶されません"

お返事ありがとうございます。

> ブラウザの設定で「クッキーを許可しない」になっているということはないですか。(でも、当方のブログでは有効なのでこれはないですね。)

もしや、と思い再度ブラウザの設定を確認してみたのですが、やはりクッキーは問題ないみたいでした。hatenaさんの仰る通り、こちらのブログだと設定が記憶されているので、livedoorとfc2の差異が絡んでくるのではないかと推測します。

そこでですが、もし差し支えなければ、livedoorブログのエンジニアさんに、こちら記事のカスタマイズ内容を紹介して、改善策を見つけたいと思うのですが、紹介しても宜しいでしょうか?

2013.12.02 21:01 | URL | #- [edit]
hatena says..."re:re:re:動作はするものの、記憶されません"

> そこでですが、もし差し支えなければ、livedoorブログのエンジニアさんに、こちら記事のカスタマイズ内容を紹介して、改善策を見つけたいと思うのですが、紹介しても宜しいでしょうか?

それは、まったくかまいません。

ただ、JS に関しては初心者ですので、プロから見たらおかしなところ満載だと思いますが。

2013.12.02 21:38 | URL | #5uE6dEgY [edit]
avilla says..."アクティブ時に画像を切り替え"

こんにちは。

多段式のフォントサイズ変更を実装する案件がありこちらの記事に辿り着き大変助かりました。
そこで1つ、追加でこちらのボタンをクリックした時にボタン画像を変更するような機能を実装したいのですが、お力添えいただけませんでしょうか?
要望としては、例えば小ボタンを押した時にアクティブ時の画像に変更したいです。
getElementByIdでclassを追加するような仕組みにできればと思うのですがどこに組み込めばいいか分からず...

お時間ありましたらご一考いただけないでしょうか。よろしくお願いします。

2014.04.15 00:46 | URL | #- [edit]
hatena says..."re:アクティブ時に画像を切り替え"

> そこで1つ、追加でこちらのボタンをクリックした時にボタン画像を変更するような機能を実装したいのですが、お力添えいただけませんでしょうか?
> 要望としては、例えば小ボタンを押した時にアクティブ時の画像に変更したいです。
> getElementByIdでclassを追加するような仕組みにできればと思うのですがどこに組み込めばいいか分からず...

最近は、CSSスプライトを使用して画像を切り替えるのが主流のようです。
「CSS ボタン」辺りをキーワードに検索すればサンプルはいろいろ見つかると思います。

例えば、

CSSスプライトを使ったロールオーバー - Webデザイン仕事で役立つ54のアイデア - MdN Design Interactive http://www.mdn.co.jp/di/articles/2906/?page=12

2014.04.15 14:33 | URL | #5uE6dEgY [edit]

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/97-88ebe0b1
該当の記事は見つかりませんでした。