EC-CUBE：フォントサイズの切り替え

（1）■html/jsフォルダに「jquery.font_size」フォルダを追加
jquery.font_sizeの中身→font_size.js　jquery.cookie.js

（2）画像の作成
■html/user_data/packages/default/img/fontsizeフォルダを作成し、次の画像ファイルを置く。

左から、big.png　big_ov.png　fontsize_bg.png　standard.png　standard_ov.png

（3）■data/Smarty/templates/default/site_frame.tpl

 <!--フォントサイズ-->
 <script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.font_size/jquery.cookie.js"></script>
 <script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.font_size/font_size.js"></script>

（4）ブロックを新規作成する

①　コールPHP　■html/frontparts/bloc/fontsize.php

 <?php

// {{{ requires
 require_once realpath(dirname(__FILE__)) . '/../../require.php';
 require_once CLASS_EX_REALDIR . 'page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Fontsize_Ex.php';

// }}}
 // {{{ generate page

$objPage = new LC_Page_FrontParts_BLoc_Fontsize_Ex();
 $objPage->blocItems = $params['items'];
 register_shutdown_function(array($objPage, "destroy"));
 $objPage->init();
 $objPage->process();
 ?>

②　拡張クラス　■data/class_extends/page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Fontsize_Ex.php

 <?php

// {{{ requires
 require_once CLASS_REALDIR . 'pages/frontparts/bloc/LC_Page_FrontParts_Bloc_Fontsize.php';

class LC_Page_FrontParts_Bloc_Fontsize_Ex extends LC_Page_FrontParts_Bloc_Fontsize {

// }}}
 // {{{ functions

/**
 * Page を初期化する.
 *
 * @return void
 */
 function init() {
 parent::init();
 }

/**
 * Page のプロセス.
 *
 * @return void
 */
 function process() {
 parent::process();
 }

/**
 * デストラクタ.
 *
 * @return void
 */
 function destroy() {
 parent::destroy();
 }
 }
 ?>

③　ページクラス　■data/class/page/frontparts/bloc/LC_Page_FrontParts_Bloc_Fontsize_.php

 <?php

// {{{ requires
 require_once CLASS_REALDIR . 'pages/frontparts/bloc/LC_Page_FrontParts_Bloc.php';

class LC_Page_FrontParts_Bloc_Fontsize extends LC_Page_FrontParts_Bloc {

// }}}
 // {{{ functions

/**
 * Page を初期化する.
 *
 * @return void
 */
 function init() {
 parent::init();
 }

/**
 * Page のプロセス.
 *
 * @return void
 */
 function process() {
 $this->action();
 $this->sendResponse();
 }

/**
 * Page のアクション.
 *
 * @return void
 */
 function action() {
 }

/**
 * デストラクタ.
 *
 * @return void
 */
 function destroy() {
 parent::destroy();
 }
 }
 ?>

④　テンプレート　■data/Smarty/templates/default/frontparts/bloc/fontsize.tpl

<div class="fontsize_area bloc_outer">

<div id="fontsize_box">

<div id="fontsize">

<div><img class="changeBtn" src="<!--{$TPL_URLPATH}-->img/fontsize/big.png" alt="大"></div>

<div><img id="standard" class="changeBtn" src="<!--{$TPL_URLPATH}-->img/fontsize/standard.png" alt="標準"></div>

</div>

</div>

<div class="clear"></div>

</div>

⑤　データベースdtb_blocテーブルに追加する
————————————————
device_type_id：10
bloc_id：14（環境に応じて）
bloc_name：フォントサイズ
tpl_path：fontsize.tpl
filename：fontsize
create_date ：作成日
update_date：更新日
php_path：frontparts/bloc/fontsize.php
deletable_flg：0
————————————————

（5）cssファイルを編集する

■html/user_data/packages/default/css/bloc.css（適当な箇所に追記）

 /* ===============================================
 ▼フォントサイズの切り替え
 =============================================== */
 .fontsize_area {
 }
 .fontsize_area #fontsize_box {
 width:140px;
 margin:0 auto;
 }
 #fontsize_box #fontsize {
 padding-left:69px;
 background:url(../img/fontsize/fontsize_bg.png) no-repeat;
 }
 #fontsize_box div {
 float:left;
 margin:0;
 padding:0;
 cursor:pointer;
 }

（6）フォントサイズ変更を適用するエリアを「CONTENTS」エリアにする場合
classに「changeArea」を追加する。
■data/Smarty/templates/default/site_main.tpl

 <!--{* ▼CONTENTS *}-->
 <div id="container" class="clearfix changeArea">

（7）文字の大きさや初期フォントサイズ等の設定は、font_size.jsで行う。