Tweet
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
- Newer: iKnow!始めました
- Older: 外部cssを動的に読み込む方法
Home > > px指定やめました(&文字サイズ調節スクリプトも設置)
Tweet
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
Home > > px指定やめました(&文字サイズ調節スクリプトも設置)
Home > JavaScript > px指定やめました(&文字サイズ調節スクリプトも設置)
Tweet
ずっと気になってた(ご存知の通り、IEで文字サイズの変更ができなくなってしまうため)んですが、ようやくcssを修正できました。
あわせて、全体的に文字を大きくしました。
デザイン的にはよくないかもですが、僕自身もそんなに目が良くないので。
あと、ついでに文字サイズ変更スクリプトも設置しました。
サイドバー(右上)の自作スクリプト実験に入れてあります。
(クッキーとかで状態を保存してないのであまり実用性はないですが・・・)
こういうスクリプトが書きやすいのも%指定のメリットですね。
以上です。(3日空けといてこれだけかよ!?)
[参考]
font-size指定 | d-spica
表「表示文字サイズとセイフティな%指定値対応表」のおかげで、px→%の変更が思っていたよりずっと簡単にできました。
IE7でも、pxで指定されたフォントサイズは拡大、縮小ができない。 - TRANS [hatena]
ちょっと期待してたんですが、IE7でもやはり駄目っぽい(僕はまだ6を使っていて確認できてない)です。ということでcssの変更に踏み切りました。
※ デザインが崩れているところ等があったら教えてくれるとありがたいです。
(外部リンクのアイコンが一部表示されていないのは認識しています。)
あ、一応文字サイズ変更スクリプトのソースは続きに入れておきます。
[ソース]
<div class="plugin_data">
文字サイズ変更:<br />
<a href="#" onclick="bnResizer.set(55); return false;" title="最小">min</a>|
<a href="#" onclick="bnResizer.small(); return false;" title="小さく">-</a>|
<a href="#" onclick="bnResizer.set(75); return false;" title="標準に戻す">±0</a>|
<a href="#" onclick="bnResizer.big(); return false;" title="大きく">+</a>|
<a href="#" onclick="bnResizer.set(145); return false;" title="最大">max</a>
</div>
<script type="text/javascript">
bnResizer = new function() {
this.small = function() {
var size = parseInt(document.body.style.fontSize.replace(/%/, ''));
var newSize = size - 10;
if(newSize > 50) {
document.body.style.fontSize = newSize + '%';
}
}
this.big = function() {
var size = parseInt(document.body.style.fontSize.replace(/%/, ''));
var newSize = size + 10;
if(newSize < 150) {
document.body.style.fontSize = newSize + '%';
}
}
this.set = function(size) {
document.body.style.fontSize = size + '%';
}
}
bnResizer.set(75);
</script>
Home > JavaScript > px指定やめました(&文字サイズ調節スクリプトも設置)