 |
 |
前号へ
このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
皆さん、こんにちは。
おちゃのこネットの刑部です。
今回のデザイン道場は、カスタマイズではなく、フルスクリーン背景写真を利用したフリーページのサンプルをご紹介します。
※対応ブラウザは、IE9以降となります。IE8、IE7では利用できません。
 |
|
 |
 |
管理画面→コンテンツページ管理から新規にフリーページを作成してください。
フリーページ作成時にデザイン欄での設定を下記のように設定してください。
・
・既存のCSSとJavaScriptを読み込む
下記のhtmlを利用して写真やリンク先、文言等を変更しての作成のみに対応しています。
free_page_subtitle：サブタイトル
free_page_itle：タイトル
<li>～</li>：各商品ブロック
free_page_itemphoto：aタグが商品ページへのリンク、imgタグが商品画像
free_page_itemname：商品名
free_page_itemprice：価格
<div class="free_page_contents">
<div class="free_page_subtitle">Scandinavian Interiors for you…</div>
<div class="free_page_title">Cafe Table</div>
<div class="free_page_item">
<div class="free_page_item_list">
<ul class="clearfix">
<li>
<div class="free_page_itemphoto"><a href="http://cafe0808.ocnk.net/product/22"><img src="http://cafe0808.ocnk.net/data/cafe0808/image/full001.jpg" width="300" />
</a>
</div>
<div class="free_page_itemname">
<a href="http://cafe0808.ocnk.net/product/22">Cafe Table</a>
</div>
<div class="free_page_itemprice">
15,000円
</div>
</li>
<li>
<div class="free_page_itemphoto"><a href="http://cafe0808.ocnk.net/product/22"><img src="http://cafe0808.ocnk.net/data/cafe0808/image/full002.jpg" width="300" />
</a>
</div>
<div class="free_page_itemname">
<a href="http://cafe0808.ocnk.net/product/22">Cafe Table</a>
</div>
<div class="free_page_itemprice">
15,000円
</div>
</li>
<li>
<div class="free_page_itemphoto"><a href="http://cafe0808.ocnk.net/product/22"><img src="http://cafe0808.ocnk.net/data/cafe0808/image/full003.jpg" width="300" />
</a>
</div>
<div class="free_page_itemname">
<a href="http://cafe0808.ocnk.net/product/22">Cafe Table</a>
</div>
<div class="free_page_itemprice">
15,000円
</div>
</li>
<li>
<div class="free_page_itemphoto"><a href="http://cafe0808.ocnk.net/product/22"><img src="http://cafe0808.ocnk.net/data/cafe0808/image/full001.jpg" width="300" />
</a>
</div>
<div class="free_page_itemname">
<a href="http://cafe0808.ocnk.net/product/22">Cafe Table</a>
</div>
<div class="free_page_itemprice">
15,000円
</div>
</li>
<li>
<div class="free_page_itemphoto"><a href="http://cafe0808.ocnk.net/product/22"><img src="http://cafe0808.ocnk.net/data/cafe0808/image/full002.jpg" width="300" />
</a>
</div>
<div class="free_page_itemname">
<a href="http://cafe0808.ocnk.net/product/22">Cafe Table</a>
</div>
<div class="free_page_itemprice">
15,000円
</div>
</li>
<li>
<div class="free_page_itemphoto"><a href="http://cafe0808.ocnk.net/product/22"><img src="http://cafe0808.ocnk.net/data/cafe0808/image/full003.jpg" width="300" />
</a>
</div>
<div class="free_page_itemname">
<a href="http://cafe0808.ocnk.net/product/22">Cafe Table</a>
</div>
<div class="free_page_itemprice">
15,000円
</div>
</li>
</ul>
</div>
</div>
</div>
管理画面→デザイン管理→スタイルシートの編集をクリックして下さい。
スタイルシートの編集画面に下記の指定をコピーして貼り付けて下さい。
※貼り付け位置は、最下部にお願い致します。
body#free_page_15の#free_page_15は、作成いただいたフリーページのページURLの数字に変更していただく必要があります。
例）作成したページが、http://cafe0808.ocnk.net/page/10の場合
body#free_page_10と指定してください。
/* フルスクリーン背景設定 */
body#free_page_15 {
background-image: url(image/freefull.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
/* コンテンツ部分の枠 */
.free_page_contents {
width: 980px;
margin: 150px auto 0px;
}
/* サブタイトル、タイトル */
.free_page_subtitle,
.free_page_title {
line-height: normal;
color: #686859;
font-family: Georgia, "Times New Roman", Times, serif;
}
/* サブタイトル */
.free_page_subtitle {
font-size: 30px;
margin-bottom: 10px;
}
/* タイトル */
.free_page_title {
font-size: 100px;
margin-bottom: 30px;
}
/* 各商品枠 */
.free_page_item_list li {
list-style: none;
float: left;
width: 33%;
}
/* 商品写真リンク */
.free_page_itemphoto A {
display: block;
padding: 5px;
}
.free_page_itemphoto A:hover {
opacity:0.7;
}
/* 商品名リンク */
.free_page_itemname A {
font-size: 16px;
}
Copyright (C) 2004-2006 OCHANOKO-NET All Rights Reserved.