右エリアに新商品、ランキング、おすすめ商品を配置した際の文字色や文字サイズの変更はできますか?
文字色や文字サイズの変更には、スタイルシートの編集が必要です。
管理画面の以下のページを開きます。
「デザイン管理」>「スタイルシート編集」
(1)スタイルシート編集画面が表示されますので、【ベーステンプレートを読み込む】でご利用のテンプレートを選択し【読み込む】ボタンをクリックして下さい。
(2)ご利用のテンプレートのスタイルシートが表示されます。【テンプレート名】を記入して【スタイルシート】を編集します。
※タイトルの文字色と文字サイズはこちらをご参照下さい。
(3)文字色と文字サイズの変更をします。
■キャッチコピーの場合
スタイルシート内の/* スタイル3 */の/* コピー */以下を変更します。
【この色の部分】のみを変更してください。その他の部分(****と記載している指定)は、各テンプレートのスタイルシートごとに指定に違いがあるか指定がない場合もあります。ここではサンプルとして記載しているだけですので、****のように編集しないで下さい。
■商品説明の場合
スタイルシート内の/* スタイル3 */の/* 説明 */以下を変更します。
【この色の部分】のみを変更してください。その他の部分(****と記載している指定)は、各テンプレートのスタイルシートごとに指定に違いがあるか指定がない場合もあります。ここではサンプルとして記載しているだけですので、****のように編集しないで下さい。
■商品名の場合
スタイルシート内の/* スタイル3 */の/* リンク色 */以下を変更します。指定がない場合は、コピーし貼り付けて下さい。
【この色の部分】のみを変更してください。その他の部分(****と記載している指定)は、各テンプレートのスタイルシートごとに指定に違いがあるか指定がない場合もあります。ここではサンプルとして記載しているだけですので、****のように編集しないで下さい。
(4)編集後、【登録処理を完了する】ボタンをクリックして下さい。
(5)管理画面の「デザイン管理」>「テンプレート選択」を開き、【カスタム】にある、先程のテンプレートを選択して【設定処理を完了する】ボタンをクリックします。
管理画面の以下のページを開きます。
「デザイン管理」>「スタイルシート編集」
(1)スタイルシート編集画面が表示されますので、【ベーステンプレートを読み込む】でご利用のテンプレートを選択し【読み込む】ボタンをクリックして下さい。
(2)ご利用のテンプレートのスタイルシートが表示されます。【テンプレート名】を記入して【スタイルシート】を編集します。
※タイトルの文字色と文字サイズはこちらをご参照下さい。
(3)文字色と文字サイズの変更をします。
■キャッチコピーの場合
スタイルシート内の/* スタイル3 */の/* コピー */以下を変更します。
【この色の部分】のみを変更してください。その他の部分(****と記載している指定)は、各テンプレートのスタイルシートごとに指定に違いがあるか指定がない場合もあります。ここではサンプルとして記載しているだけですので、****のように編集しないで下さい。
/* スタイル3 */ <中略> /* コピー */ .style3_copy { width: ****; background-color: ****; margin: ****; padding: ****; font-size: 【キャッチコピーのサイズ…こちらの数値を任意のサイズに変更します】; color: 【キャッチコピーの色…こちらの数値を任意のカラーコードに変更します】; font-weight: ****; text-align: ****; } 例) font-size: 12px; color: #000000; |
■商品説明の場合
スタイルシート内の/* スタイル3 */の/* 説明 */以下を変更します。
【この色の部分】のみを変更してください。その他の部分(****と記載している指定)は、各テンプレートのスタイルシートごとに指定に違いがあるか指定がない場合もあります。ここではサンプルとして記載しているだけですので、****のように編集しないで下さい。
/* スタイル3 */ <中略> /* 説明 */ .style3_text { width: ****; margin: ****; padding: ****; font-size: 【説明のサイズ…こちらの数値を任意のサイズに変更します】; color: 【説明の色…こちらの数値を任意のカラーコードに変更します】; } 例) font-size: 12px; color: #000000; |
■商品名の場合
スタイルシート内の/* スタイル3 */の/* リンク色 */以下を変更します。指定がない場合は、コピーし貼り付けて下さい。
【この色の部分】のみを変更してください。その他の部分(****と記載している指定)は、各テンプレートのスタイルシートごとに指定に違いがあるか指定がない場合もあります。ここではサンプルとして記載しているだけですので、****のように編集しないで下さい。
/* スタイル2 中央上*/ <中略> /* 大枠中 */ .style3_middle { width: ****; background-color: ****; margin: ****; padding: ****; } /* リンク色 */ .style3_middle A:link { font-size: 【商品名のサイズ…こちらの数値を任意のサイズに変更します】; color: 【商品名の色…こちらの数値を任意のカラーコードに変更します】; } .style3_middle A:active { font-size: 【商品名のサイズ…こちらの数値を任意のサイズに変更します】; color: 【クリック中の色…こちらの数値を任意のカラーコードに変更します】; } .style3_middle A:visited { font-size: 【商品名のサイズ…こちらの数値を任意のサイズに変更します】; color: 【訪問済みの色…こちらの数値を任意のカラーコードに変更します】; } .style3_middle A:hover { font-size: 【商品名のサイズ…こちらの数値を任意のサイズに変更します】; color: 【マウスポインタを合わせた時の色…こちらの数値を任意のカラーコードに変更します】; } 例) font-size: 12px; color: #000000; |
※カラーコード(#000000等)はこちらを参考にご覧下さい。
https://www.ocnk.net/sample/color.html
※【font-size: ~】【color: ~】の指定がご利用のスタイルシート内にない場合は、1行全てコピーして貼り付けて下さい。
※商品名の/* リンク色 */以下の指定がご利用のスタイルシート内にない場合は、コピーし貼り付けて下さい。貼り付け位置は、/* 大枠中 */という指定の下となります。
(4)編集後、【登録処理を完了する】ボタンをクリックして下さい。
(5)管理画面の「デザイン管理」>「テンプレート選択」を開き、【カスタム】にある、先程のテンプレートを選択して【設定処理を完了する】ボタンをクリックします。