このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
皆さん、こんにちは。
おちゃのこネットの刑部です。
今回のデザイン道場は、各ページの固有id名についてです。
特定の商品詳細ページやカテゴリページだけの背景を変更したい等のお問い合わせをいただきます。
商品詳細ページ、カテゴリページ、特集(グループ)ページ、フリーページは、複数ページとなるため、各ページ単位では、スタイルシートを指定できないと思われている方も多いです。
おちゃのこネットの商品詳細ページ、カテゴリページ、特集(グループ)、フリーページの各ページには固有のid名が付けられています。
各idは、<body>タグに付けられているため、そのページ内の全要素を個別に指定することが可能です。
各カテゴリページid名
#categorylist_page_1～#categorylist_page_50・・・・
※各カテゴリページid名は、各ページのURL内の番号を指定いただくことで、各カテゴリページのみの指定を行うことができます。
例） http://demo.ocnk.net/product-list/3の場合
下記のように指定することで、上記のカテゴリ一覧ページのみに表示されるタイトル画像等を指定することができます。
#categorylist_page_3 .ptitle {
background-image: url(image/category_3title.gif);
}
各特集(グループ)ページid名
#pickuplist_page_1～#pickuplist_page_50・・・・
※各特集(グループ)ページid名は、各ページのURL内の番号を指定いただくことで、各特集(グループ)ページのみの指定を行うことができます。
例） http://demo.ocnk.net/product-group/2の場合
下記のように指定することで、上記の特集(グループ)覧ページのみに表示されるタイトル画像等を指定することができます。
#pickuplist_page_2 .ptitle {
background-image: url(image/pickup_2title.gif);
}
各商品詳細ページid名
#detail_page_1～#detail_page_50・・・・
※各商品詳細ページid名は、各ページのURL内の番号を指定いただくことで、各商品詳細ページのみの指定を行うことができます。
例） http://demo.ocnk.net/product/3の場合
下記のように指定することで、上記のカテゴリ一覧ページのみに表示されるタイトル画像等を指定することができます。
#detail_page_3 .ptitle {
background-image: url(image/detail_3title.gif);
}
各フリーページid名
#free_page_1～#free_page_50・・・・
※各フリーページid名は、各ページのURL内の番号を指定いただくことで、各フリーページのみの指定を行うことができます。
例） http://demo.ocnk.net/page/1の場合
下記のように指定することで、上記のフリーページのみに表示されるタイトル画像等を指定することができます。
#free_page_1 {
background-color: #000000;
}
上記以外のページの固有のclass名やid名については、FAQをご覧下さい。
http://www.ocnk.net/faq/index.php?action=artikel&cat=281597&id=517&artlang=ja
前号へ
