商品カテゴリ(メインカテゴリ、サブカテゴリ)特集の文字色、文字サイズの変更はできますか?

2008-10-28 10:55
文字色の変更には、スタイルシートの編集が必要です。
管理画面の以下のページを開きます。

「デザイン管理」>「スタイルシート編集」

(1)スタイルシート編集画面が表示されますので、【ベーステンプレートを読み込む】でご利用のテンプレートを選択し【読み込む】ボタンをクリックして下さい。

(2)ご利用のテンプレートのスタイルシートが表示されます。【テンプレート名】を記入して【スタイルシート】を編集します。

(3)文字色の変更をします。
スタイルシート内の/* 左領域 *//* カテゴリ一覧 *//* 特集 */以下を変更します。 1/5ほど下にありますので、スクロールして下さい。

【この色の部分】のみを変更してください。その他の部分(****と記載している指定)は、各テンプレートのスタイルシートごとに指定に違いがあるか指定がない場合もあります。ここではサンプルとして記載しているだけですので、****のように編集しないで下さい。

/* 左領域 */

/* カテゴリ一覧 */

/* カテゴリ一覧タイトル 
※背景画像横160px、縦は設定、空白は高さ指定 */
.category_title {
width: ****;
height: ****;
margin: ****;
padding: ****;
background: ****;
}

/* カテゴリ一覧部分 */
.category_list {
width: ****;
background: ****;
border: ****;
margin: ****;
padding: ****;
font-weight: ****;
}

.category_list A:link {
color: 【サブカテゴリリンクの色…こちらの数値を任意のカラーコードに変更します】;
font-size: 【サブカテゴリリンクのサイズ…こちらの数値を任意のサイズに変更します】;
}

.category_list A:active {
color: 【クリック中の色…こちらの数値を任意のカラーコードに変更します】;
font-size: 【サブカテゴリリンクのサイズ…こちらの数値を任意のサイズに変更します】;
}

.category_list A:visited {
color: 【訪問済みの色…こちらの数値を任意のカラーコードに変更します】;
font-size: 【サブカテゴリリンクのサイズ…こちらの数値を任意のサイズに変更します】;
}

.category_list A:hover {
color: 【マウスポインタを合わせた時の色…こちらの数値を任意のカラーコードに変更します】;
font-size: 【サブカテゴリリンクのサイズ…こちらの数値を任意のサイズに変更します】;
}

/* 親カテゴリの色 */
.mcategory A:link {
color: 【親カテゴリ(リンク有り)リンクの色…こちらの数値を任意のカラーコードに変更します】;
font-size: 【親カテゴリリンクのサイズ…こちらの数値を任意のサイズに変更します】;
}

.mcategory A:active {
color: 【クリック中の色…こちらの数値を任意のカラーコードに変更します】;
font-size: 【親カテゴリリンクのサイズ…こちらの数値を任意のサイズに変更します】;
}

.mcategory A:visited {
color: 【訪問済みの色…こちらの数値を任意のカラーコードに変更します】;
font-size: 【親カテゴリリンクのサイズ…こちらの数値を任意のサイズに変更します】;
}

.mcategory A:hover {
color: 【マウスポインタを合わせた時の色…こちらの数値を任意のカラーコードに変更します】;
font-size: 【親カテゴリリンクのサイズ…こちらの数値を任意のサイズに変更します】;
}

/********************************************************************/
/* 特集 */

/* タイトル 
※背景画像横160px、縦は設定、空白は高さ指定 */
.pickup_category_title {
width: ****;
height: ****;
margin: ****;
padding: ****;
background: ****;
}

/* 内容 */
.pickup_category_list {
width: ****;
background: ****;
border: ****;
margin: ****;
padding: ****;
font-weight: ****;
}

.pickup_category_list A:link {
color: 【特集カテゴリリンクの色…こちらの数値を任意のカラーコードに変更します】;
font-size: 【特集カテゴリリンクのサイズ…こちらの数値を任意のサイズに変更します】;
}

.pickup_category_list A:active {
color: 【クリック中の色…こちらの数値を任意のカラーコードに変更します】;
font-size: 【特集カテゴリリンクのサイズ…こちらの数値を任意のサイズに変更します】;
}

.pickup_category_list A:visited {
color: 【訪問済みの色…こちらの数値を任意のカラーコードに変更します】;
font-size: 【特集カテゴリリンクのサイズ…こちらの数値を任意のサイズに変更します】;
}

.pickup_category_list A:hover {
color: 【マウスポインタを合わせた時の色…こちらの数値を任意のカラーコードに変更します】;
font-size: 【特集カテゴリリンクのサイズ…こちらの数値を任意のサイズに変更します】;
}

例)
color: #000000;
font-size: 14px;


※カラーコード(#000000等)はこちらを参考にご覧下さい。
https://www.ocnk.net/sample/color.html

【color: ~】の指定がご利用のスタイルシート内にない場合は、1行全てコピーして貼り付けて下さい。

【.category_list A:link~】【.pickup_category_list A:~】の指定がご利用のスタイルシート内にない場合は、コピーし貼り付けて下さい。
貼り付け位置は、【.category_list A:link~】の場合は、/* カテゴリ一覧部分 */という指定の下に、【.pickup_category_list A:~】の場合は、/* 内容 */という指定の下になります。

/* 親カテゴリの色 */という指定がご利用のスタイルシート内にない場合は、コピーし貼り付けて下さい。
貼り付け位置は、【.category_list A:link~】の指定がある場合は、その下に、ない場合は、/* カテゴリ一覧部分 */のという指定の下になります。


(4)編集後、【登録処理を完了する】ボタンをクリックして下さい。

(5)管理画面の「デザイン管理」>「テンプレート選択」を開き、【カスタム】にある、先程のテンプレートを選択して【設定処理を完了する】ボタンをクリックします。