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

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

皆さん、こんにちは。おちゃのこネットの刑部です。
本年もよろしくお願い致します。
2013年最初のデザイン道場は、ランキング商品の商品写真上に入るNo.1～No.5の背景に背景色を設定する方法をご紹介します。
以前この部分の文字色、文字サイズを変更する方法をご紹介しておりましたが、基本的には使用するclass名は同じで、その部分に背景色を指定する方法となります。

	http://cafe0808.ocnk.net/

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

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

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

/* 1位用 */
.rank1 {
width: 50px;
text-align: center;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
background-color: #FF0000;
}

/* 2位-5位用 */
.rank2-5 {
width: 50px;
text-align: center;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
background-color: #FF0000;
}

width: 50px; text-align: center;	背景色の枠幅となります。 50pxを指定して、中央寄せにしています。
background-color: #FF0000;	背景色用の指定となります。 #FF0000をご希望のカラーコードに変更してください。
color: #FFFFFF;	文字色用の指定となります。 #FFFFFFをご希望のカラーコードに変更してください。
font-size: 12px;	文字サイズ用の指定となります。 12pxをご希望のサイズに変更してください。

※ なお、左右エリアにランキングを配置している場合は、.rank1のclass名は利用しておりませんので、全て.rank2-5のclass名を利用します。

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

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