おちゃのこ通信 Vol.105 - デザイン道場 - おちゃのこネットメールマガジン

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

皆さん、こんにちは。おちゃのこネットの刑部です。
今回のデザイン道場は、2カラム設定時のスタイルシート指定についてご紹介します。

スタイルシート内の指定については、各要素の親要素に#column2を指定することで2カラム用の指定を行うことができます。

※ご注意点
表示とレイアウトの設定にて2カラムを選択した場合、3カラム時に変更されていたトップページのスタイルシート指定が一部初期設定に戻ります。

各テンプレートの初期画像に戻る箇所については、下記のFAQをご覧下さい。
http://www.ocnk.net/faq/index.php?action=artikel&cat=281584&id=643&artlang=ja

変更例　(新商品の背景画像を変更している場合)
3カラム用のスタイルシート各指定の親要素に#column2を指定していいただくことで、トップページの各コンテンツに2カラム用の指定を適用することができます。

.style1_top {
background-image: url(image/new.gif);
width: 500px;
height: 50px;
padding: 0px;
}

↓
↓　2カラム用に変更する場合は、
↓　スタイルシートの編集から該当の箇所の親要素に#column2を追加する。
↓　※横幅は670pxに変更
↓

#column2 .style1_top {
background-image: url(image/new_column2.gif);
width: 670px;
height: 50px;
padding: 0px;
}

2カラム用変更時のスタイルシート編集ポイント

基本的には、画像の横幅が大きくなる点となります。
3カラムの場合は、横幅が最大500pxですが、2カラムの場合この横幅が670pxとなります。
各タイトルや枠にご自身で作成された画像を利用されている方は、画像のサイズ変更が必要となります。

各箇所(いらっしゃいませ欄、店長日記、What'sNew、新商品、おすすめ商品、ランキング商品)の詳細については、下記のFAQ内に記載しておりますので、ご覧下さい。

2カラム設定時のスタイルシート指定について
http://www.ocnk.net/faq/index.php?action=artikel&cat=281584&id=644&artlang=ja

なお、お問い合わせは下記ページからお願い致します。

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