管理画面＞デザイン管理＞PCに「おすすめ表示管理」ページを新規作成し、表示番号を選択することで、「おすすめ商品情報」の表示パターンを変更できるようにする。

↓

（1）　データベースに新しいテーブルを作成する
①　マスターテーブルに追加
名前：mtb_line
フィールド数：3
↓
○フィールド：id　種別：smallint　NULL：not null
○フィールド：name　種別：text　デフォルト値：NULL　NULL：チェック
○フィールド：rank　種別：smallint　NULL：not null

②　管理画面＞システム設定＞マスターデータ管理＞mtb_line
以下を登録する。
ID：1　値：1
ID：2　値：2
ID：3　値：3
ID：4　値：4
ID：5　値：5

（2）「dtb_baseinfo」テーブルにフィールドを追加
フィールド：recommend_line
種別：SMALLINT
デフォルト値：0

（3）管理画面用のページを新規作成
①　■html/admin/design/recommend_line.php
②　■data/class_extends/page_extends/admin/design/LC_Page_Admin_Recommend_Line_Ex.php
③　■data/class/pages/admin/design/LC_Page_Admin_Recommend_Line.php
④　■data/Smarty/templates/admin/design/recommend_line.tpl

⑤　■data/Smarty/templates/admin/design/subnavi.tpl←リンクを追加

[php]  class=”on” id=”navi-design-recommend_line”>⑥　■html/user_data/packages/admin/css/admin_contents.css
1205行あたり　「デザイン管理」の箇所に追加

⑦　管理画面用のイメージを追加
■html/user_data/packages/admin/css/img/designフォルダを作成し、下記イメージを置く。
001.png　002.png　003.png　004.png　005.png

（4）■data/class/pages/frontparts/bloc/LC_Page_FrontParts_Bloc_Recommend.phpに追加
「var $arrSiteInfo;」と「$this->arrSiteInfo = SC_Helper_DB_Ex::sfGetBasisData();」

[php]
/** 店舗基本情報 */
    var $arrSiteInfo;

function init() {
parent::init();
$this->arrSiteInfo = SC_Helper_DB_Ex::sfGetBasisData();
}
[/php]

（5）■data/Smarty/templates/default/frontparts/bloc/recommend.tplを変更

（6）■html/user_data/packages/default/css/bloc.css
①　100行目あたり

[php]
/* タイトルの背景 オレンジ */
#recommend_area h2 ,
↓
/* タイトルの背景 オレンジ */
#recommend_area0 h2 ,#recommend_area1 h2 ,#recommend_area2 h2 ,#recommend_area3 h2 ,#recommend_area4 h2 ,#recommend_area5 h2 ,
[/php]

②　「▼おすすめ商品」の箇所をすべて以下に書き換え（「商品詳細ページの関連商品」部分を切り離しcontents.cssに移動）
こちら

（7）■html/user_data/packages/default/css/contents.css
bloc.cssの「商品詳細ページの関連商品」部分を切り離しcontents.cssに移動する。「関連商品」の箇所を下記に書き換える。

[php]
/* 関連商品
———————————————– */
div#whobought_area {
clear: both;
padding: 35px 0 0 0;
}

div#whobought_area h2 {
border-top: solid 1px #f90;
background: url(‘../img/background/bg_tit_sub_01.jpg’) repeat-x left bottom;
padding: 5px 0 8px 10px;
font-size: 14px;
}

#whobought_area .whobought_bloc {
margin-bottom: 10px;
padding: 10px 0 10px;
border: none;
background: url(“../img/background/line_dot_01.gif”) repeat-x bottom;
}

#whobought_area .whobought_bloc p {
margin: 0 0 5px 0;
}

#whobought .whobought_bloc img {
margin: 0 5px 0 0;
}

#whobought_area .whobought_bloc h3 {
font-size: 100%;
font-weight: normal;
}

/* 画像 */
#whobought_area .whobought_bloc .productImage {
margin-bottom: 10px;
float: left;
width: 90px;
}

/* 左右の振り分け */
#whobought_area .whobought_bloc .whobought_left {
float: left;
width: 47.5%;
}
#whobought_area .whobought_bloc .whobought_right {
float: right;
width: 47.5%;
}

/* 商品説明テキスト メインカラム用 2カラム時 */
#two_maincolumn_right #whobought_area .whobought_bloc .productContents ,
#two_maincolumn_left #whobought_area .whobought_bloc .productContents {
float: right;
width: 74%;
}

/* 商品説明テキスト メインカラム用 3カラム時 */
#three_maincolumn #whobought_area .whobought_bloc .productContents {
float: right;
width: 67%;
}
[/php]