ITOBEN STYLE > EC-CUBEデザインテンプレート > EC-CUBE:ソーシャルブックマークとフォントサイズの切り替え 2012年2月25日カテゴリー: EC-CUBEデザインテンプレート EC-CUBE:ソーシャルブックマークとフォントサイズの切り替え 内容を新しく書き換えました。 ↓こちらの方を見ていただいた方がよろしいかと思います。 EC-CUBE:フォントサイズの切り替え EC-CUBE:FacebookやTwitterなどのソーシャルブックマークの表示 いいね!やツイート、Google+などのソーシャルボタンを表示すると同時に、文字サイズを変更できるボタンを設定します。 (1)■html/jsフォルダに「jquery.socialbutton」と「jquery.font_size」フォルダを追加 jquery.socialbuttonの中身→jquery.socialbutton-1.8.1.js ssl_jquery.socialbutton-1.8.1.js jquery.font_sizeの中身→font_size.js jquery.cookie.js (2)■data/Smarty/templates/default/site_frame.tpl ———————————————— ———————————————— (3)ブロックを新規作成する ★ブロックは、ヘッダー部の下「TOP COLUMN」のエリアに配置する。トップページ・商品一覧ページ・商品詳細ページなどに配置。 ▼管理画面>デザイン管理からブロックを作成するときは、下記の①~③は飛ばして、④のテンプレートのコードを貼り付ける。⑤も飛ばす。 ———————————————— ブロック名:ソーシャルボタン・フォントサイズ ファイル名:socialbtn_fontsz ———————————————— ▼今後、ブロックに独自機能をもたせる可能性がある場合は、拡張ファイル等の作成から行う。 ① コールPHP ■html/frontparts/bloc/socialbtn_fontsz.php ———————————————— blocItems = $params[‘items’]; register_shutdown_function(array($objPage, “destroy”)); $objPage->init(); $objPage->process(); ?> ———————————————— ② 拡張クラス ■data/class_extends/page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Socialbtn_fontsz_Ex.php ———————————————— ———————————————— ③ ページクラス ■data/class/page/frontparts/bloc/LC_Page_FrontParts_Bloc_Socialbtn_fontsz_.php ———————————————— action(); $this->sendResponse(); } /** * Page のアクション. * * @return void */ function action() { } /** * デストラクタ. * * @return void */ function destroy() { parent::destroy(); } } ?> ———————————————— ④ テンプレート ■data/Smarty/templates/default/frontparts/bloc/socialbtn_fontsz.tpl ———————————————— ———————————————— ⑤ データベースdtb_blocテーブルに追加する ———————————————— device_type_id:10(PC用ページに追加、携帯は1、スマホは2) bloc_id:10(環境に応じて) bloc_name:ソーシャルボタン・フォントサイズ tpl_path:socialbtn_fontsz.tpl filename:socialbtn_fontsz create_date :作成日 update_date:更新日 php_path:frontparts/bloc/socialbtn_fontsz.php deletable_flg:0 ———————————————— (4)cssファイルを編集する ■html/user_data/packages/default/css/contents.css(変更) ———————————————— #topcolumn , #bottomcolumn , #footerbottomcolumn { margin: 0 auto; padding:10px 0 0 15px; width: 950px; background: #fff; text-align: left; } ↓変更 #topcolumn { margin: 0 auto; width: 950px; background: #fff; text-align: left; } #bottomcolumn , #footerbottomcolumn { margin: 0 auto; padding: 15px; width: 950px; background: #fff; text-align: left; } ———————————————— ■html/user_data/packages/default/css/bloc.css(適当な箇所に追記) ———————————————— /* =============================================== ▼ソーシャルブックマークとフォントサイズの切り替え =============================================== */ #socialbtn_fontsz { background-color:#F7F7F7; border:1px solid #CCC; padding:5px 5px 0 5px; } #socialbtn_fontsz #socialbtn_box { float:left; } #socialbtn_fontsz #fontsize_box { float:right; width:140px; text-align:right; background:url(../img/fontsize/fontsize_bg.png) no-repeat; } #socialbtn_box table { padding:0; margin:0; border:none; } #socialbtn_box table td { padding:0 5px 0 0; border:none; } #fontsize_box ul li { display:inline; margin:0; padding:0; cursor:pointer; } #fontsize_box ul li #standard { margin-left:-5px; } ———————————————— (5)フォントサイズ変更を「CONTENTS」エリアに適用する。 classに「changeArea」を設定する。 ■data/Smarty/templates/default/site_main.tpl ———————————————— changeArea“> ———————————————— (6)フォントサイズ等の指定は、font_size.jsで行う。 (7)mixi登録キーについて ① mixi Developer Center http://developer.mixi.co.jp/connect/developer_registration/developer/ ② mixiアカウントとメール認証(携帯電話)が必要 ③ mixi Developer Centerの右上「ログイン」 ④ mixi Pluginをクリック→新規サービス追加
内容を新しく書き換えました。
↓こちらの方を見ていただいた方がよろしいかと思います。
EC-CUBE:フォントサイズの切り替え
EC-CUBE:FacebookやTwitterなどのソーシャルブックマークの表示
いいね!やツイート、Google+などのソーシャルボタンを表示すると同時に、文字サイズを変更できるボタンを設定します。
(1)■html/jsフォルダに「jquery.socialbutton」と「jquery.font_size」フォルダを追加
jquery.socialbuttonの中身→jquery.socialbutton-1.8.1.js ssl_jquery.socialbutton-1.8.1.js
jquery.font_sizeの中身→font_size.js jquery.cookie.js
(2)■data/Smarty/templates/default/site_frame.tpl
————————————————
————————————————
(3)ブロックを新規作成する
★ブロックは、ヘッダー部の下「TOP COLUMN」のエリアに配置する。トップページ・商品一覧ページ・商品詳細ページなどに配置。
▼管理画面>デザイン管理からブロックを作成するときは、下記の①~③は飛ばして、④のテンプレートのコードを貼り付ける。⑤も飛ばす。
————————————————
ブロック名:ソーシャルボタン・フォントサイズ
ファイル名:socialbtn_fontsz
————————————————
▼今後、ブロックに独自機能をもたせる可能性がある場合は、拡張ファイル等の作成から行う。
① コールPHP ■html/frontparts/bloc/socialbtn_fontsz.php
————————————————
blocItems = $params[‘items’];
register_shutdown_function(array($objPage, “destroy”));
$objPage->init();
$objPage->process();
?>
————————————————
② 拡張クラス ■data/class_extends/page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Socialbtn_fontsz_Ex.php
————————————————
————————————————
③ ページクラス ■data/class/page/frontparts/bloc/LC_Page_FrontParts_Bloc_Socialbtn_fontsz_.php
————————————————
action();
$this->sendResponse();
}
/**
* Page のアクション.
*
* @return void
*/
function action() {
}
/**
* デストラクタ.
*
* @return void
*/
function destroy() {
parent::destroy();
}
}
?>
————————————————
④ テンプレート ■data/Smarty/templates/default/frontparts/bloc/socialbtn_fontsz.tpl
————————————————
————————————————
⑤ データベースdtb_blocテーブルに追加する
————————————————
device_type_id:10(PC用ページに追加、携帯は1、スマホは2)
bloc_id:10(環境に応じて)
bloc_name:ソーシャルボタン・フォントサイズ
tpl_path:socialbtn_fontsz.tpl
filename:socialbtn_fontsz
create_date :作成日
update_date:更新日
php_path:frontparts/bloc/socialbtn_fontsz.php
deletable_flg:0
————————————————
(4)cssファイルを編集する
■html/user_data/packages/default/css/contents.css(変更)
————————————————
#topcolumn ,
#bottomcolumn ,
#footerbottomcolumn {
margin: 0 auto;
padding:10px 0 0 15px;
width: 950px;
background: #fff;
text-align: left;
}
↓変更
#topcolumn {
margin: 0 auto;
width: 950px;
background: #fff;
text-align: left;
}
#bottomcolumn ,
#footerbottomcolumn {
margin: 0 auto;
padding: 15px;
width: 950px;
background: #fff;
text-align: left;
}
————————————————
■html/user_data/packages/default/css/bloc.css(適当な箇所に追記)
————————————————
/* ===============================================
▼ソーシャルブックマークとフォントサイズの切り替え
=============================================== */
#socialbtn_fontsz {
background-color:#F7F7F7;
border:1px solid #CCC;
padding:5px 5px 0 5px;
}
#socialbtn_fontsz #socialbtn_box {
float:left;
}
#socialbtn_fontsz #fontsize_box {
float:right;
width:140px;
text-align:right;
background:url(../img/fontsize/fontsize_bg.png) no-repeat;
}
#socialbtn_box table {
padding:0;
margin:0;
border:none;
}
#socialbtn_box table td {
padding:0 5px 0 0;
border:none;
}
#fontsize_box ul li {
display:inline;
margin:0;
padding:0;
cursor:pointer;
}
#fontsize_box ul li #standard {
margin-left:-5px;
}
————————————————
(5)フォントサイズ変更を「CONTENTS」エリアに適用する。
classに「changeArea」を設定する。
■data/Smarty/templates/default/site_main.tpl
————————————————
————————————————
(6)フォントサイズ等の指定は、font_size.jsで行う。
(7)mixi登録キーについて
① mixi Developer Center http://developer.mixi.co.jp/connect/developer_registration/developer/
② mixiアカウントとメール認証(携帯電話)が必要
③ mixi Developer Centerの右上「ログイン」
④ mixi Pluginをクリック→新規サービス追加