2015年7月21日カテゴリー:

EC-CUBE+もしもドロップシッピング(CSV登録型):CSSによるデザイン変更(1)

ここでの内容は主に↓このページの機能等についての説明です。
http://kaijp.com/moshimo_sample/

ダウンロードページはこちら
http://www.kaiplus.com/

マニュアルはこちら
http://www.kaiplus.com/user_data/manual3/eccube-moshimo_manual.pdf

CSSファイルの位置:html/user_data/packages/default/css/

001

▼ページのタイトル[common.css]

[css]
/* タイトル
———————————————– */
h2.title {
margin-bottom: 10px;
padding: 5px 10px;
font-size: 120%;
background:#999;
color:#FFF;
}
[/css]

▼ブロックのタイトル[bloc.css]

[css]
/* タイトル
———————————————– */
.block_outer h2 {
font-size:110%;
margin-bottom:10px;
}
.main .block_outer h2 {
padding-left:1px;
border-left:#ccc 10px solid;
}
.main .block_outer h2 .title {
background-color:#eee;
color:#333;
padding:2px 0 2px 5px;
}
#side .block_outer h2 {
padding-left:1px;
border-left:#777 10px solid;
}
#side .block_outer h2 .title {
background-color:#999;
color:#FFF;
padding:2px 0 2px 5px;
}
[/css]

▼背景の「送料無料」バナー(画像の幅は120px)[common.css]

[css]
/*画面左の縦バナー*/
#container_left {
display:block;
position: absolute;
top:0;
left:-120px;
width:120px;
height:100%;
background:url(../img/picture/container_left.jpg) repeat-y;
}
/*画面右の縦バナー*/
#container_right {
display:block;
position: absolute;
top:0;
right:-120px;
width:120px;
height:100%;
background:url(../img/picture/container_right.jpg) repeat-y;
}
[/css]

▼レスポンシブナビ[responsive_nav.css]

002

[css]
/* タイトル
———————————————– */
/* ナビメニューバーの背景色と高さ */
.mean-container .mean-bar {
background: #0c1923;
height:30px;
}
/* ×印 */
.mean-container a.meanmenu-reveal {
color: #fff;
}
/* 3本線 */
.mean-container a.meanmenu-reveal span {
background: #fff;
}
/* メニュー項目の文字色 */
.mean-container .mean-nav ul li a {
color: #333;
}
/* メニュー項目のオンマウス時の文字色 */
.mean-container .mean-nav ul li a:hover {
color: #fff;
}
/* メニュー項目の背景色 */
.mean-container .mean-nav {
background-color: #eee;
}
/* メニュー項目のオンマウス時の背景色 */
.mean-container .mean-nav ul li:hover {
background-color:#ccc;
}
[/css]

その他、細かい設定は、テンプレートファイルと照らし合わせながら、必要があれば修正してください。
テンプレートファイル:data/Smarty/templates/default/

common.css
・サイト全体のフレーム構成
・リンク色
・ページタイトル
・ヘッダー
・フッター
・ボタン 等

content.css
・商品一覧ページ
・商品詳細ページ
・当サイトについて 等

bloc.css
・ヘッダーユーティリティー
・もしも商品カテゴリー
・検索
・ソーシャルブックマーク
・トップページ画像スライド
・ランキング
・新着情報
・ティッカー 等

ここでの内容は主に↓このページの機能等についての説明です。
http://kaijp.com/moshimo_sample/

ダウンロードページはこちら
http://www.kaiplus.com/

マニュアルはこちら
http://www.kaiplus.com/user_data/manual3/eccube-moshimo_manual.pdf