このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。

皆さん、こんにちは。 おちゃのこネットの刑部です。
今回のデザイン道場は、商品仕様項目欄の項目名と内容部分をそれぞれ別に装飾する方法をご紹介します。

http://cafe0808.ocnk.net/



スタイルシートを編集する

管理画面→デザイン管理→スタイルシートの編集をクリックして下さい。

スタイルシートの編集画面に下記の指定をコピーして貼り付けて下さい。
※貼り付け位置は、最下部にお願い致します。



.detail_sub_text table {
width: 100%;
}

.detail_sub_text_title {
width: 30%;
background-color: #CCCCCC;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
font-weight: bold;
}

.detail_sub_text_desc {
width: 70%;
background-color: #F5F5F5;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}


.detail_sub_text table

仕様項目テーブル全体の指定となります。
横幅で100%を指定しています。

.detail_sub_text_title

仕様項目の項目名の指定となります。
下記以外でも指定を追加いただくことで、カスタマイズ可能です。

width: 30%;
横幅指定です。

background-color: #CCCCCC;
背景色の指定です。カラーコードはご自身で変更してください。

border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
罫線の指定です。tableを配置しているエリアと同様の背景色を指定してください。

font-weight: bold;
太字指定です。※必要ない場合は削除してください。

.detail_sub_desc_title

仕様項目の項目名の指定となります。
下記以外でも指定を追加いただくことで、カスタマイズ可能です。

width: 70%;
横幅指定です。

background-color: #F5F5F5;
背景色の指定です。カラーコードはご自身で変更してください。

border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
罫線の指定です。tableを配置しているエリアと同様の背景色を指定してください。
　
なお、お問い合わせは下記ページからお願い致します。

https://www.ocnk.net/contact/index.php

Copyright (C) 2004-2006 OCHANOKO-NET All Rights Reserved.