2カラムテンプレート用のスタイルシート指定について

2010-04-20 09:38

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

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

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


変更例 (新商品の背景画像を変更している場合)
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_2column2.gif);
width: 670px;
height: 50px;
padding: 0px;
}

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


各コンテンツの背景画像や文字色の変更方法については、中央エリアと同様の方法となります。
下記にも記載しております各FAQの変更方法をご覧の上、親要素に#column2を追加して下さい。

いらっしゃいませ欄、店長日記の場合
中央エリア用FAQ
いらっしゃいませ欄の背景色、背景画像の変更
https://www.ocnk.net/faq/index.php?action=artikel&id=113
それぞれ下記のように既存のclass名の前に#column2を追加して下さい。
width: ****;の部分については、指定を記載する箇所となりますので、そのまま記載しないで下さい。
#column2 .welcome_top {
width: ****;
}

#column2 .welcome_middle {
width: ****;
}

#column2 .welcome_bottom {
width: ****;
}


What's New場合
中央エリア用FAQ
What's New(最新情報)の背景色、背景画像の変更
https://www.ocnk.net/faq/index.php?action=artikel&id=114
それぞれ下記のように既存のclass名の前に#column2を追加して下さい。
width: ****;の部分については、指定を記載する箇所となりますので、そのまま記載しないで下さい。
#column2 .whatnew_top {
width: ****;
}

#column2 .whatnew_middle {
width: ****;
}

#column2 .whatnew_bottom {
width: ****;
}


中央エリア、新商品、おすすめ商品の場合
中央エリア用FAQ
中央エリアに新商品、おすすめ商品を配置した際の文字色や文字サイズの変更
https://www.ocnk.net/faq/index.php?action=artikel&id=109
中央エリアに新商品、おすすめ商品を配置した場合の背景色、背景画像の変更
https://www.ocnk.net/faq/index.php?action=artikel&id=115
中央エリアに新商品、おすすめ商品を配置した場合の各商品テーブルの背景色、背景画像の変更
https://www.ocnk.net/faq/index.php?action=artikel&id=116
それぞれ下記のように既存のclass名の前に#column2を追加して下さい。
width: ****;の部分については、指定を記載する箇所となりますので、そのまま記載しないで下さい。
#column2 .style1_top {
width: ****;
}

#column2 .style1_middle {
width: ****;
}

#column2 .style1_bottom {
width: ****;
}

#column2 .style1_copy {
width: ****;
}

#column2 .style1_table_top {
width: ****;
}

#column2 .style1_table_middle {
width: ****;
}

#column2 .style1_table_bottom {
width: ****;
}

#column2 .style1_table {
width: ****;
}

#column2 .style1_text {
width: ****;
}


中央エリアランキング商品の場合
中央エリア用FAQ
中央エリアにランキングを配置した際の文字色や文字サイズの変更
https://www.ocnk.net/faq/index.php?action=artikel&id=110
中央エリアにランキング商品を配置した場合の背景色、背景画像の変更
https://www.ocnk.net/faq/index.php?action=artikel&id=117
中央エリアにランキング商品を配置している場合の各商品テーブルの背景色、背景画像の変更
https://www.ocnk.net/faq/index.php?action=artikel&id=118
それぞれ下記のように既存のclass名の前に#column2を追加して下さい。
width: ****;の部分については、指定を記載する箇所となりますので、そのまま記載しないで下さい。
#column2 .style2_top {
width: ****;
}

#column2 .style2_middle {
width: ****;
}

#column2 .style2_bottom {
width: ****;
}

#column2 .style2_copy {
width: ****;
}

#column2 .style2_table_top {
width: ****;
}

#column2 .style2_table_middle {
width: ****;
}

#column2 .style2_table_bottom {
width: ****;
}

#column2 .style2_table {
width: ****;
}

#column2 .style2_text {
width: ****;
}

#column2 .style2_rank_table {
width: ****;
}

#column2 .style2_rank_table_td {
width: ****;
}