ITOBEN STYLE > EC-CUBEデザインテンプレート > EC-CUBE+もしもドロップシッピング(CSV登録型):CSSによるデザイン変更(1) 2015年7月21日カテゴリー: EC-CUBEデザインテンプレート 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/ ▼ページのタイトル[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] [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
ここでの内容は主に↓このページの機能等についての説明です。
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/
▼ページのタイトル[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]
[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