2009年10月30日金曜日

2009年10月27日火曜日

文字サイズ変更方法(javaScript)

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

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

2.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>

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

4.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%}

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

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

6.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(); });

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

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


を書き込む。

10.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の使用方法がややこしいためです。
この部分を文字化するのです。
まず 38行目のところを文字化して無効にします。
そして46行目のところ殻49行目まで文字化して無効化します。
それでとりあえず動きます。



これで完了です。
              



作成者:李 禎桓

2009年10月21日水曜日

WEBページにQQを設置する

QQとは中国で多く普及しているチャットソフトで、MSNメッセンジャーと同じようなものです。
中国サイトの陶宝網(日本サイトの楽天みたいな感じ)で商談などをするときに、このQQを使うところが多いようです。

ソフトウェアは以下のHPで入手できます。(中国語版と英語版)
http://im.qq.com/
日本語のOSで利用する場合はMicrosoft AppLocaleでアプリケーションをUTF-8で実行する必要があります。

WEBページやブログなどにQQを起動するボタンを簡単に設置する事が出来ます。
QQを設置しますと、設置したQQユーザがログインしているときにログイン状態が表示されます。
ログイン状態を表すQQのアイコンをクリックすると、WEBチャットが開始されます。
利用者はQQをインストールしておく必要はありません。


WEBページにQQを設置する手順

1.QQを設置するサイトを開きます。→http://imis.qq.com/webpresence/code.shtml

このページが開いたらOKです。


2.設置するアイコンを選択します。左がオンライン状態で、右がオフライン状態です。

3.次にQQを設置する基本情報を入力します。



  1. QQのログインIDを入力
  2. 有効期間を(30日、90日、180日、1年)の中から選択する。
  3. 使用するサイトのアドレスを入力(登録できるサイトは5つまでです。)
  4. 画像の説明を入力
  5. QQのチャット機能を使用可能にしたくない場合はチェックをはずして下さい。
  • 「写真送受信可能」
  • 「ファイル送受信可能」
  • 「音声送受信可能」
  • 「WEBカメラ使用可能」


4.次にソースコードを生成します。左がWEBページ用、右がブログなどの掲示板用です。ボタンを押して少し待っていると生成が完了します。

5.次に中央のボタンををしたらWEBサイトに適用され生成したソースコードが使用できるようになります。

6.このページが出てきたら設定が終了です。このようなイメージで使用してくださいと言ったページですので出てきたページを閉じて構いません。

7.最後に生成されたソースコードをWEBサイトに張り付ければすぐ使用することが出来ます。


作成者:田崎 勝也

チームブログ開設

これからチーム全員でリレー形式でブログを更新していきます。

<チームメンバー>
田崎 勝也
姜 豊
李 禎桓
劉 莉

<メインチームサイト>
http://jec07jzg8.s1.bindsite.jp/