EC-CUBE2.12:フォントサイズの切り替え

サンプルはこちら 左上の文字サイズをクリックしてみてください。

▼ここでのカスタマイズファイルをすべてダウンロードできます。
必要な箇所だけコピーしてご利用ください。
他のカスタマイズも含まれている場合がありますので、ファイルの上書きは絶対におやめください。
こちらから(facebookユーザーのみ)

(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)に追加する
下記記述の、’フォントサイズ’の一つ前の「10」は、登録されているブロック数により変更する。

INSERT INTO dtb_bloc (device_type_id, bloc_id, bloc_name, tpl_path, filename, create_date, update_date, php_path, deletable_flg) VALUES (10, 10, 'フォントサイズ', 'fontsize.tpl', 'fontsize', CURRENT_TIMESTAMP, CURRENT_TIMESTAMP, 'frontparts/bloc/fontsize.php', 0);

(5)cssファイルを編集する

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

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

(6)フォントサイズ変更を適用するエリアに、class=”changeArea”要素を入力する。
ここでは、「CONTENTS」エリアに適用する。
■data/Smarty/templates/default/site_main.tpl

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

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