文字サイズ変更方法（javaScript）

EC-CUBEへ文字サイズを変更するJavaScriptを追加する方法です。

１．jquery.js、jquery.cookie.jsをjsフォルダに格納する。
フォルダパス：/html/user_data/packages/default/js/

２．site_frame.tplのhaedの中でJavaScriptのファイルを指定する。
ファイルパス：/data/Smarty/templates/default/site_frame.tpl

＜script type="text/javascript" src="＜!--{$TPL_DIR}--＞js/jquery.js"＞＜/script＞
＜script type="text/javascript" src="＜!--{$TPL_DIR}--＞js/jquery.cookie.js"＞＜/script＞
＜script type="text/javascript" src="＜!--{$TPL_DIR}--＞js/jquery.cookie.js"＞＜/script＞

３．文字サイズを変更するボタンを用意してimageフォルダに格納する。
ファイルパス：/html/user_data/packages/default/image/fontsizechange.gif

４．style.cssをhtml/user_data/packages/default/css/に入れる。
ファイルパス：/html/user_data/packages/default/css/style.css

#fontsize-change{
　　　　　　position:absolute;
　　　　　　top:102px; left:560px;
　　　　　　width: 200px; font-size:10px;
　　　　　　}
#fontsize-change dl{
　　　　　 height: 28px;
　　　　　overflow:hidden;
　　　　　　}
#fontsize-change dt{
　　　　　　 float:left; width: 79px;
　　　　　　 height: 28px; background:url(../img/header/fontsizechange.gif) no-repeat 0 0;
　　　　　　 text-indent: -9999px;
　　　　　　　}
#fontsize-change dd{
　　　　　　 float: left; width:34px;
　　　　　　margin-right:5px;
　　　　　　}
#fontsize-change dd.l{
　　　　　　width:28px;
　　　　　　}
#fontsize-change dd a{
　　　　　　 display: block; height: 28px;
　　　　　　 text-indent:-9999px;
　　　　　　 background-image:url(../img/header/fontsizechange.gif);
　　　　　　 background-repeat:no-repeat;
　　　　　　}
#fontsize-change dd.m a {background-position:-79px 0;}
#fontsize-change dd.l a {background-position:-118px 0;}
#fontsize-change dd.xl a{background-position:-151px 0;}
#fontsize-change dd.m a:hover,#fontsize-change dd.m a:active,
#fontsize-chanfe dd.m a.cr{background-position:-79px 100%}
#fontsize-change dd.l a:hover,#fontsize-change dd.l a:active,
#fontsize-change dd.l a.cr{background-position:-118px 100%}
#fontsize-change dd.lx a:hover,#fontsize-change dd.lx a:active,
#fontsize-change dd.xl a.cr {background-position:-151px 100%}

５．site_frame.tplにJavaScriptの実行場所を書き込む。
ファイルパス：/data/Smarty/templates/default/detail.tpl

＜div id="fontsize-change"＞
　　　＜script type="text/javascript"＞
//＜![CDATA[fontsize.setup();//]]＞
　　　＜/script＞
＜/div＞

６．JavaScriptの実行ファイルを作成する。
ファイル名：fontsize.jp

var fontSize = {};
fontSize.setup = function() {
var s = '＜dl＞';
s +='＜dt＞ 文字サイズを変更＜/dt＞'
s +='＜dd class="m"＞＜a href="#" oneclick="fontSize.setStyle(￥'M￥') ; return false;"＞ 標準＜/a＞＜/dd＞';
s +=' ＜dd class="l"＞＜a href="#" oneclick="fontSize.setStyle(￥'L￥') ; return false;"＞ 大＜/a>＜/dd>' ;
s +=' ＜dd class="xl">＜a href="#" oneclick="fontSize.setStyle(￥'XL￥') ; return false;"＞ 最大＜/a＞＜/dd＞;
s +='＜/dl＞';
document.write(s);};

var fontSize = {};
/*---文字サイズ変更を実行する関数---*/
fontSize.setStyle = function(fValue) { var btn = $("#fontsize-change a");
$(btn).each(function() { this.className = ""; });
　switch(fValue) {
　　case "L" : var value = "L"; btn[1].className = "cr"; break;
　　case "XL": var value = "XL"; btn[2].className = "cr"; break;
　　default: var value = "M"; btn[0].className = "cr"; break;
　}
$.cookie("fontsize", value, { expires: 7, path: "/", domain: location.hostname, 　secure: false });
document.body.className = this.initClass;
$(document.body).addClass("fontsize" + value);};

/*---ドキュメントのロード時に呼び出す関数---*/
fontSize.init = function() {
　　　　　　く this.initClass = document.body.className;
　　　　　　 var c = $.cookie("fontsize");
　　　　　　this.setStyle(c);
　　　　　　};
$(document).ready(function(){
　　　　　fontSize.init(); });

８．作成したfontsize.jpをjsフォルダに格納する。
フォルダパス：/html/user_data/packages/default/js/

９．site_frame.tplのhaedの中でJavaScriptファイルの指定を追加する。
ファイルパス：/data/Smarty/templates/default/site_frame.tpl


を書き込む。

１０．import.cssを開いてstyle.cssを記入する。
ファイルパス：/html/user_data/packages/default/css/import.css

/*M*/
body.fontsizeM{font-size:12px}
*html body.fontsizeM{font-size:76%}
*:first-child+html body.fontsizeM { font-size:76%}
/*L*/
body.fontsizeL{font-size:14px}
*html body.fontsizeM{font-size:88%}
*:first-child+html body.fontsizeL { font-size:88%}
/*XL*/
body.fontsizeXL{font-size:16px}
*html body.fontsizeXL{font-size:100%}
*:first-child+html body.fontsizeXL { font-size:100%}



それでもできなかったらfontsize.jsを開きCookieに関するところを強制に文字化強いて動かせる
方法があります。
EC-CUBEはCookieの使用方法がややこしいためです。
この部分を文字化するのです。
まず　３８行目のところを文字化して無効にします。
そして４６行目のところ殻４９行目まで文字化して無効化します。
それでとりあえず動きます。



これで完了です。
　　　　　　　　　　　　　　



作成者：李　禎桓