ITOBEN STYLE > EC-CUBEデザインテンプレート > EC-CUBE:フォントサイズの切り替え 2012年3月21日カテゴリー: EC-CUBEデザインテンプレート 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 [php] [/php] (4)ブロックを新規作成する ① コールPHP ■html/frontparts/bloc/fontsize.php [php] blocItems = $params[‘items’]; register_shutdown_function(array($objPage, “destroy”)); $objPage->init(); $objPage->process(); ?> [/php] ② 拡張クラス ■data/class_extends/page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Fontsize_Ex.php [php] [/php] ③ ページクラス ■data/class/page/frontparts/bloc/LC_Page_FrontParts_Bloc_Fontsize_.php [php] action(); $this->sendResponse(); } /** * Page のアクション. * * @return void */ function action() { } /** * デストラクタ. * * @return void */ function destroy() { parent::destroy(); } } ?> [/php] ④ テンプレート ■data/Smarty/templates/default/frontparts/bloc/fontsize.tpl [php] [/php] ⑤ データベース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(適当な箇所に追記) [php] /* =============================================== ▼フォントサイズの切り替え =============================================== */ .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; } [/php] (6)フォントサイズ変更を適用するエリアを「CONTENTS」エリアにする場合 classに「changeArea」を追加する。 ■data/Smarty/templates/default/site_main.tpl [php] [/php] (7)文字の大きさや初期フォントサイズ等の設定は、font_size.jsで行う。
(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
[php]
[/php]
(4)ブロックを新規作成する
① コールPHP ■html/frontparts/bloc/fontsize.php
[php]
blocItems = $params[‘items’];
register_shutdown_function(array($objPage, “destroy”));
$objPage->init();
$objPage->process();
?>
[/php]
② 拡張クラス ■data/class_extends/page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Fontsize_Ex.php
[php]
[/php]
③ ページクラス ■data/class/page/frontparts/bloc/LC_Page_FrontParts_Bloc_Fontsize_.php
[php]
action();
$this->sendResponse();
}
/**
* Page のアクション.
*
* @return void
*/
function action() {
}
/**
* デストラクタ.
*
* @return void
*/
function destroy() {
parent::destroy();
}
}
?>
[/php]
④ テンプレート ■data/Smarty/templates/default/frontparts/bloc/fontsize.tpl
[php]
[/php]
⑤ データベース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(適当な箇所に追記)
[php]
/* ===============================================
▼フォントサイズの切り替え
=============================================== */
.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;
}
[/php]
(6)フォントサイズ変更を適用するエリアを「CONTENTS」エリアにする場合
classに「changeArea」を追加する。
■data/Smarty/templates/default/site_main.tpl
[php]
(7)文字の大きさや初期フォントサイズ等の設定は、font_size.jsで行う。