共謀罪を含む改悪組織犯罪処罰法は
2010.06.25 17:57
ブログの文字を拡大するためのボタンをブログに設置する方法
私のブログでは右上に「文字拡大」「文字縮小」「リセット」のボタンがあり、文字のサイズを変更できるようになっている。このボタンについて問い合わせがあった（参照）。このボタンは私のブログでは次のようになっている。
まず、ヘッダ（<head></head>内）に次のように記述して外部のJavaScriptを読み込む。
<script type="text/javascript" language="JavaScript" src="http://www002.upp.so-net.ne.jp/self/robamimi/blog-self.js"></script>
次にbodyタグに次のように記述して読み込んだJavaScriptの一つを実行する。
<body onload="fscRef()">
ボタンのソースは次の通りである。
<table id="fsc-javascript" cellspacing="0" cellpadding="0" summary="文字サイズの変更スクリプト">
<tr><td align="center"><button onclick="fsc('larger');return false;">文字拡大</button></td></tr>
<tr><td align="center"><button onclick="fsc('smaller');return false;">文字縮小</button></td></tr>
<tr><td align="center"><button onclick="fsc('default');return false;">リセット</button></td></tr>
</table>
私のブログはソネブロから提供されたスキンのスタイルシートやＨＴＭＬソースを大幅に変更していて、他のソネブロユーザーのブログでは上の「文字拡大」ボタンが機能しない可能性があると思った。そこで、スタイルシートやＨＴＭＬソースを全く変更した覚えのない別のブログ【正己 (self7777) from Twitter：So-netブログ】で実験してみた。案の定、「文字拡大」ボタンで文字が大きくならなかった。
Firefoxの「選択した部分のソースを表示」という機能で確認したところ、「文字拡大」ボタンでbodyタグには例えば次のように font-size が追加されていた。
<body style="font-size: 21px;">
それでも文字のサイズが変わらなかったのである。これは、変わって欲しい部分に別に font-size が指定されているからであった。調べたところ、このブログ【正己の異論・反論】では指定されてなかったが、【正己 (self7777) from Twitter】では次のように指定されていた。
.articles { font-size: small; }
「body」の「font-size」が「21px」になったとしても、本文の入っているdivタグに「<div class="articles">」と指定してあれば本文のサイズは「small」になってしまう。それで、「文字拡大」ボタンを押しても文字は大きくならなかったのである。この「.articles { font-size: small; }」を無効にすれば、「文字拡大」ボタンで文字が大きくなる。（注意：他のスキンでは「.articles」以外にも font-size が指定されているかもしれませんので、それも無効にする必要があります。）
スタイルシートに記述された「.articles { font-size: small; }」は削除すれば無効にできるが、ブログのサイドバーに記述する際は次のように指定すれば良いらしい。
.articles { font-size:100%; }
これで「文字拡大」ボタンで文字が大きくなる。
では、サイドバーに「カスタムペイン」を追加して「文字拡大」などとタイトルを変え、自由入力欄にはどの様に記述すれば良いか。【正己 (self7777) from Twitter】では次のように記述した。
<div style="margin-top:0px;">
<style TYPE="text/css">
<!--
#fsc-javascript button {
font-size: 24px;
width: 150px;
padding: 0;
}
.articles { font-size:100%; }
body { font-size:16px; }
-->
</style>
<script type="text/javascript">
<!--
// 初期状態のフォントサイズを設定（ダブルクオートやクオートで括らない）
var defaultFSize = 16;
// 一回の操作で変化する値を設定（ダブルクオートやクオートで括らない）
var perOrder = 1;
uaName = navigator.userAgent;
appName = navigator.appVersion;
var fontSizeUnit = "px";
var fsckName = "fsize";
var ckDays = 365;
var ckPath = "/"
var fsCK = GetCookie(fsckName);
if ( fsCK == null ) {
currentFSize = defaultFSize;
}
else{
currentFSize = Number(fsCK);
}
function fscRef(x){
if (( document.layers )||(( appName.indexOf("Mac",0) != -1 ) && ( uaName.indexOf("MSIE",0) != -1 ))){
return false;
}
else if( document.body ){
document.body.style.fontSize = currentFSize + fontSizeUnit;
}
if(x == 1){
window.opener.location.href="https://" + window.location.hostname;
window.focus();
}
}
function fsc( CMD ){
if( CMD == "larger" ){
var newFSize = Number( currentFSize + perOrder );
SetCookie( fsckName , newFSize );
}
if( CMD == "smaller" ){
if ( currentFSize != perOrder ){
var newFSize = Number( currentFSize - perOrder );
SetCookie( fsckName , newFSize );
}
else{
var newFSize=Number(currentFSize);
}
}
if( CMD == "default" ){
var newFSize = defaultFSize;
DeleteCookie( fsckName );
}
if( document.layers ){
window.alert( "このスクリプトはNetscape Communicator4.xでは動作しません" );
return false;
}
else if(( appName.indexOf("Mac",0) != -1 ) && ( uaName.indexOf("MSIE",0) != -1)){
window.alert( "Sorry! MacIE is not supported." );
return false;
}
else{
currentFSize = newFSize;
fscRef();
}
}
function SetCookie(name,value){
var dobj = new Date();
dobj.setTime( dobj.getTime() + 24 * 60 * 60 * ckDays * 1000);
var expiryDate = dobj.toGMTString();
document.cookie = name + '=' + escape(value)+ ';expires=' + expiryDate + ';path=' + ckPath;
}
function GetCookie (name){
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen){
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
function getCookieVal (offset){
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset,endstr));
}
function DeleteCookie(name){
if (GetCookie(name)) {
document.cookie = name + '=' +
'; expires=Thu, 01-Jan-70 00:00:01 GMT;path='+ckPath;
}
}
// -->
</script>
<table id="fsc-javascript" cellspacing="0" cellpadding="0" summary="文字サイズの変更スクリプト">
<tr><td align="center"><button onclick="fscRef();return false;">保存サイズ</button></td></tr>
<tr><td align="center"><button onclick="fsc('larger');return false;">文字拡大</button></td></tr>
<tr><td align="center"><button onclick="fsc('smaller');return false;">文字縮小</button></td></tr>
<tr><td align="center"><button onclick="fsc('default');return false;">リセット</button></td></tr>
</table>
</div>
このブログ【正己の異論・反論】と異なり、ページを開いた時に前に見ていた時の文字サイズが読み込まれないので「保存サイズ」ボタンを押すことで読み込ませることにした。「保存サイズ」は「文字拡大」ボタンなどを押すたびに変わるので、使えるのはページを開いた時だけである。ページを再読み込みした後も「保存サイズ」ボタンを押せば文字サイズが再読み込み前に戻る。
ページを開いた時の最初の文字サイズは「body { font-size:16px; }」で指定する。「リセット」ボタンを押した時の文字サイズは「var defaultFSize = 16;」で指定する。混乱するので同じサイズにしておいた方が良い。「body { font-size:16px; }」を指定しないと、ソネブロが提供しているスタイルシートに従い「body { font-size: small; }」になってしまう。
さて、問い合わせをしてくださったkirikoさんにはコメント欄のように回答してしまったが、回答後に自分の回答では不十分であることに気付いた。問い合わせには「遠くの親戚や友人に赤ちゃんの成長を報告するため」とあるのに、ブラウザの設定などを変えることを助言してしまったのである。お礼のコメントに書いてある「実家に行った時に」で気付いた。すぐに両親が使うブラウザの設定などできるはずがないのである。ブログに「文字拡大」ボタンが必要だったのである。ちゃんと読まずに回答してしまって恥ずかしい。
他のサイトのJavaScriptボタンを紹介したが、あれは自由に文字サイズを変えられない点が不満である。だから私は【正己の異論・反論】に「文字拡大」ボタンを作った。JavaScriptは以前に知人のXOOPSを管理するお手伝いをしたときに見つけたものである。かなり昔なので、今はどのサイトにあったか忘れてしまったが…。この「文字拡大」ボタンは 1px ずつサイズを変えられる。それは「var perOrder = 1;」の部分で指定してある。 2px ずつ変えることも可能である。
話が逸れてしまったが、kirikoさんに回答した後、他のソネブロで【正己の異論・反論】の「文字拡大」ボタンが使えないことが悔しかったので、このエントリーのように文字サイズを変えるにはどうしたら良いか調べてみた。ソネブロ利用者で文字を拡大するボタンが欲しい人は上のJavaScript等を試して欲しい。もしも文字サイズが変わらないようだったらコメントを頂ければ、分かる範囲でお答えしたい。
読者の反応
トラックバック 0
トラックバックの受付は締め切りましたfooter(side-b)
|
一番下まで読んでくださり、 
|
|
コメント 0