EC-CUBE 開発コミュニティ

> フロント機能 > TOPとその他ページのデザイン変更

フロント機能

投稿者	スレッド
kameleon	投稿日時: 2007/5/2 1:07 対応状況: −−−
常連登録日: 2007/4/25 居住地: 東京都投稿: 39	TOPとその他ページのデザイン変更 TOPページのヘッダーとその他ページのヘッダーのデザインを別々にすることは可能でしょうか？またはTOPのMAINとその他ページのMAINを別々にファイルをわけることは可能でしょうか？マニュアルサイトやこのコミュニティで関連するような内容を検索してみましたが、いまいち答えにつながるようなものを検索しきれなかったので、同じような質問があったらすみません・・・よろしくお願い致します。

nanasess	投稿日時: 2007/5/2 7:12 対応状況: −−−
神登録日: 2006/9/9 居住地: 投稿: 2327	Re: TOPとその他ページのデザイン変更大河内です. 引用： kameleonさんは書きました： TOPページのヘッダーとその他ページのヘッダーのデザインを別々にすることは可能でしょうか？またはTOPのMAINとその他ページのMAINを別々にファイルをわけることは可能でしょうか？可能ですが, 少々複雑です... ただ, オリジナルで作った MAIN は, ドラック & ドロップのレイアウトができなくなってしまいますので, レイアウト変更の際はソースを編集することになってしまいます. （頑張ればドラッグ & ドロップできるようにもなるかも）手前味噌で恐縮ですが, このサイトでは, 最初に表示される DirectoryIndex にあたるページと index.php のヘッダ及びフッタ, MAIN はすべて別のものを使用しています. ttp://www.lotus-heaven.jp/ # 客先の意向でデザインとカスタマイズがかなり中途半端で恐縮です... ざっくり説明すると, 1. 別にしたい PHPのページを作成, ファイル管理からアップロード（FTP等でも可） 2. 別にしたい, ヘッダ, フッタ, MAIN をブロック編集で作成 3. 2 を include させる .tpl ファイルを作成（ブロック編集でもできると思います） 4. 1 で, 3 のテンプレートを使用するように設定こんな解説ではさすがに解りづらいと思いますのでソースを晒してしまいましょうまず, 1 の PHPファイル（index_main.php) <?php require_once("../require.php"); class LC_Page { function LC_Page() { / 必ず変更する / $this->tpl_css = '/css/layout/contact/index.css'; // メインCSSパス $this->tpl_title = ' タイトル'; } } class SC_IndexView extends SC_SiteView{ function SC_IndexView() { parent::SC_SiteView(); $this->_smarty->template_dir = TEMPLATE_FTP_DIR; $this->_smarty->compile_dir = COMPILE_DIR; $this->initpath(); } } $objPage = new LC_Page(); $objView = new SC_IndexView(); // レイアウトデザインを取得 $objPage = sfGetPageLayout($objPage); $objPage->arrNews = lfGetNews($objQuery); // 画面の表示 $objView->assignobj($objPage); $objView->display("index_frame.tpl"); //----------------------------------------------------------------------------------------------------------------------------------- function lfGetNews(){ $conn = new SC_DBConn(); $sql = "SELECT , cast(substring(news_date,1,10) as date) as news_date_disp FROM dtb_news WHERE del_flg = '0' ORDER BY rank DESC"; $list_data = $conn->getAll($sql); return $list_data; } ?> 3 のファイル(index_frame.tpl) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <!--{ * Copyright(c) 2000-2006 LOCKON CO.,LTD. All Rights Reserved. * * http://www.lockon.co.jp/ *}--> <head> <meta http-equiv="Content-Type" content="text/html; charset=<!--{$smarty.const.CHAR_CODE}-->"> <meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" href="<!--{$smarty.const.URL_DIR}-->user_data/css/index.css" type="text/css" media="all"> <link rel="stylesheet" href="<!--{$smarty.const.URL_DIR}-->css/common.css" type="text/css" media="all"> <link rel="stylesheet" href="<!--{$tpl_css}-->" type="text/css" media="all"> <script type="text/javascript" src="<!--{$smarty.const.URL_DIR}-->js/css.js"></script> <script type="text/javascript" src="<!--{$smarty.const.URL_DIR}-->js/navi.js"></script> <script type="text/javascript" src="<!--{$smarty.const.URL_DIR}-->js/win_op.js"></script> <script type="text/javascript" src="<!--{$smarty.const.URL_DIR}-->js/site.js"></script> <title><!--{$tpl_title\|escape}--></title> <meta name="author" content="loree Rodkin,ローリーロドキン,ロドキン"> <meta name="description" content="セレブに人気のローリーロドキン(Loree Rodkin)を中心に人気ブランドのセレクトショップです"> <meta name="keywords" content="ロドキン,ローリーロドキン,ブルガリ,loree Rodkin"> <link rel="alternate" type="application/rss+xml" title="Lotus Heaven 新着情報" href="<!--{$smarty.const.SITE_URL}-->rss/index.php"> <script type="text/javascript"> <!-- <!--{$tpl_javascript}--> //--> </script> </head> <body> <div id="container"> <div id="contents"> <!--{include file='../include/bloc/indexheader.tpl'}--> <!--{include file='../include/bloc/indexmain.tpl'}--> <!--{include file='../include/bloc/indexfooter.tpl'}--> </div> </div> </body> </html> 2 のファイルはそれぞれ以下のようになっています MAIN indexmain.tpl `<div id="main"> <!--{include file='../include/bloc/indexflash.tpl'}--> <!--{include file='../include/bloc/indexnews.tpl'}--> <table class="mainContents"> <tr> <td><!--{include file='../include/bloc/indexinfo1.tpl'}--></td> <td><!--{include file='../include/bloc/indexinfo2.tpl'}--></td> </tr> </table> <!--{include file='../include/bloc/indexinfo3.tpl'}--> <!--{include file='../include/bloc/indexbrand.tpl'}--> </div>` ヘッダ indexheader.tpl <div id="header"> <h1><!--{$arrSiteInfo.shop_name}-->/<!--{$tpl_title\|escape}--></h1> <img src="<!--{$smarty.const.URL_DIR}-->user_data/indexheader.jpg" usemap="#MAP" width="1000" height="103" border="0" alt=""> <map name="MAP" id="MAP"><area shape="rect" coords="397,58,499,85" href="<!--{$smarty.const.URL_DIR}-->" title="トップページへ" alt="トップページへ"> <area shape="rect" coords="502,58,602,85" href="<!--{$smarty.const.URL_DIR}-->index.php" title="SHOPへ" alt="SHOPへ"> <area shape="rect" coords="607,58,707,83" href="<!--{$smarty.const.URL_DIR}-->abouts/index.php" title="店舗案内へ" alt="店舗案内へ"> <area shape="rect" coords="712,57,811,83" href="<!--{$smarty.const.URL_DIR}-->entry/kiyaku.php" title="会員登録をしてメルマガをGET！" alt="会員登録をしてメルマガをGET!"> <area shape="rect" coords="816,58,915,84" href="<!--{$smarty.const.URL_DIR}-->contact/index.php" title="お問合せはこちらから" alt="お問合せ"> </map> </div> フッタ indexfooter.tpl <div id="footer"> <p>※この店舗では各ブランドの正規販売店より直接輸入致しておりますので、安心してお買い求め下さい。</p> <div id="copyright"><!--{$smarty.const.COPYRIGHT}--> Developmented by Loop AZ, Inc.</div> </div> <!-- Google Code for default Conversion Page --> <script type="text/javascript"> <!-- var google_conversion_type = 'landing'; var google_conversion_id = 9999999999; var google_conversion_language = "ja"; var google_conversion_format = "1"; var google_conversion_color = "FFFFFF"; //--> </script> <script type="text/javascript" src="http://www.googleadservices.com/pagead/conversion.js"> </script> <noscript> <img height="1" width="1" border="0" src="http://www.googleadservices.com/pagead/conversion/00000000/extclk?script=0" alt=""> </noscript> MAIN のブロックで, さらに別のブロックを include させているので結構複雑ですが, こんな感じでやってます. index_main.php へアクセスすると, オリジナルのページが表示されます. # このあたりを, 一度しっかりまとめたいと思いつつ, なかなか時間がとれず...

kameleon	投稿日時: 2007/5/2 13:35 対応状況: −−−
常連登録日: 2007/4/25 居住地: 東京都投稿: 39	Re: TOPとその他ページのデザイン変更大河内　様ご対応ありがとうございます！度々申し訳ございませんが、下記内容についても教えて頂いてよろしいでしょうか？引用： 1. 別にしたい PHPのページを作成, ファイル管理からアップロード（FTP等でも可） 2. 別にしたい, ヘッダ, フッタ, MAIN をブロック編集で作成 3. 2 を include させる .tpl ファイルを作成（ブロック編集でもできると思います） 4. 1 で, 3 のテンプレートを使用するように設定 1.のアップロード先は html/user_data/ でいいのでしょうか？ 2.の別にしたいブロックの保存先は、html/user_data/include/bloc/ でしょうか？細かくてお手数ですが、ご返答お待ちしております。よろしくお願い致します。

nanasess	投稿日時: 2007/5/2 14:05 対応状況: −−−
神登録日: 2006/9/9 居住地: 投稿: 2327	Re: TOPとその他ページのデザイン変更大河内です. 引用： 1.のアップロード先は html/user_data/ でいいのでしょうか？ 2.の別にしたいブロックの保存先は、html/user_data/include/bloc/ でしょうか？はい. ご認識の通りで OK です. 上記の保存先の構成にしてやれば, すべて EC-CUBE の管理画面から編集やアップロードが可能なので便利です. 別のディレクトリに保存しても, パスの設定を変えてやれば対応できると思います.

kameleon	投稿日時: 2007/5/2 18:25 対応状況: −−−
常連登録日: 2007/4/25 居住地: 東京都投稿: 39	Re: TOPとその他ページのデザイン変更すみません、もしかしたら初歩的なところで分かっていないのかも知れないんですが、 index.phpがデフォルトでトップページとして指定されていますが、 index_main.phpをTOPページとして作ることはできるのでしょうか？

nanasess	投稿日時: 2007/5/2 21:13 対応状況: −−−
神登録日: 2006/9/9 居住地: 投稿: 2327	Re: TOPとその他ページのデザイン変更大河内です. はい. 可能です. Apache の設定にもよりますが... http://example.jp/user_data/index_main.php を TOP ページにしたい場合は, `DirectoryIndex user_data/index_main.php index.php` とすることで, http://example.jp/ にアクセスすると index.php ではなく, user_data/index_main.php が TOP ページとして表示されます. しかし, これは AllowOverride Indexes が有効になっていないとできないので, レンタルサーバーなどでは難しいかもしれません. (Indexes が .htaccess で設定許可されていない場合があるため) 具体的には, httpd.conf で AllowOverride Indexes にして, DocumentRoot の .htaccess で, 下記のようにできれば良い感じです. `DirectoryIndex user_data/index_main.php index.php Options -Indexes`

kameleon	投稿日時: 2007/5/4 17:47 対応状況: −−−
常連登録日: 2007/4/25 居住地: 東京都投稿: 39	Re: TOPとその他ページのデザイン変更マニュアルサイトを見ていたらやりたいことに近い内容を見つけました。説明して頂いたのにすみません。 http://wiki.ec-cube.net/index.php?%A5%C7%A5%B6%A5%A4%A5%F3%A5%AB%A5%B9%A5%BF%A5%DE%A5%A4%A5%BA%2F07_%A5%B1%A1%BC%A5%B9%A5%B9%A5%BF%A5%C7%A5%A3%2F%A5%C8%A5%C3%A5%D7%A5%DA%A1%BC%A5%B8%A4%CB%C2%E7%A4%AD%A4%AF%A5%E1%A5%A4%A5%F3%B2%E8%C1%FC%A4%F2%BA%EE%A4%EA%A4%BF%A4%A4 具体的に、下記の指定をどのファイルにしたらいいのでしょうか？ <!--{assign var=●● value="`$smarty.const.URL_DIR`index.php"}--> <!--{ if $smarty.server.PHP_SELF==$●●}--> <!--▼TOPIMAGE--> <table width="780" border="0" cellspacing="0" cellpadding="0" summary=" "> <tr> <td><img src="<!--{$smarty.const.SITE_URL}-->img/top/image.jpg" width="780" height="208" alt="ふとんやさんです"></td> </tr> </table> <!--▲TOPIMAGE--> <!--{/if}--> また、index.phpにデザインカスタマイズ / 07_ケーススタディ / トップページに大きくメイン画像を作りたいトップページに大きくメイン画像を作りたい † Edit コンテンツの３カラムをまたいだ大きなメイン画像を作成したい。 001.jpg 左記の図のようなレイアウトを、管理画面のみで行おうとするとそのイメージの下に３カラムのテーブルを再現する事がむずかしくなってきます。こういった場合、管理画面で簡単に行うならヘッダーの下に画像を表示させる記述をする事をオススメします。ただそのままだと登録されているヘッダーを使用している全てのページにこの画像が反映されてしまうので、ある特定のページのみに表示されるための記述を行います。 ▼トップページのみにイメージを表示させるための記述 <!--{assign var=●● value="`$smarty.const.URL_DIR`index.php"}--> <!--{ if $smarty.server.PHP_SELF==$●●}--> <!--▼TOPIMAGE--> <table width="780" border="0" cellspacing="0" cellpadding="0" summary=" "> <tr> <td><img src="<!--{$smarty.const.SITE_URL}-->img/top/image.jpg" width="780" height="208" alt="ふとんやさんです"></td> </tr> </table> <!--▲TOPIMAGE--> <!--{/if}--> この記述の●●の部分には、自分が分かり易い単語を入れてください。また、index.phpの部分には、その画像を表示させたいページのパスを記入してください。と、なっていますが、どういった指定をすればいいのでしょうか？大変お手数ですが、よろしくお願い致します。

nanasess	投稿日時: 2007/5/5 1:30 対応状況: −−−
神登録日: 2006/9/9 居住地: 投稿: 2327	Re: TOPとその他ページのデザイン変更大河内です. 引用： kameleonさんは書きました： ▼トップページのみにイメージを表示させるための記述 <!--{assign var=●● value="`$smarty.const.URL_DIR`index.php"}--> <!--{ if $smarty.server.PHP_SELF==$●●}--> <!--▼TOPIMAGE--> <table width="780" border="0" cellspacing="0" cellpadding="0" summary=" "> <tr> <td><img src="<!--{$smarty.const.SITE_URL}-->img/top/image.jpg" width="780" height="208" alt="ふとんやさんです"></td> </tr> </table> <!--▲TOPIMAGE--> <!--{/if}--> この記述の●●の部分には、自分が分かり易い単語を入れてください。また、index.phpの部分には、その画像を表示させたいページのパスを記入してください。と、なっていますが、どういった指定をすればいいのでしょうか？大変お手数ですが、よろしくお願い致します。とりあえず, ●● の部分に index_page とでも入れてやれば, index.php にアクセスした場合のみ, 横長の画像が表示されると思います.

kameleon	投稿日時: 2007/5/6 0:00 対応状況: 解決済
常連登録日: 2007/4/25 居住地: 東京都投稿: 39	Re: TOPとその他ページのデザイン変更大河内様ありがとうございました！無事に設定できました。対応して頂き、ありがとうございました