[戻る]
No.1665

フォントサイズの変更

木製・帆船模型マイクロクラフトさん  投稿日:2015/08/18(Tue) 11:50
key

当店の利用者は高齢者が多いので、
商品一覧をリスト表示した際の下記の各要素のフォントサイズを大きく変更したい。
また、商品商材ページについてもフォントサイズを大きく変更したい。

商品名・商品コード・自由項目1〜3・価格・商品説明

Re: フォントサイズの変更

おたすけマイショップさん  2015/08/18(Tue) 16:52 No.1666
key

各フォントのサイズを大きくする場合は、下記するスタイルを適度なサイズに編集した上で追加することでできます。

スタイルの追加方法は、以下のURLをご参照下さい。

 イージーマイショップオープンガイド - ページに<style>を追加する(簡単モード)
 http://emshelp.easy-myshop.jp/c-item-detail?ic=add-style

■商品一覧(リスト表示)の場合
以下のスタイルの○○%を編集した上で追加してください。
(そのまま追加すると、変更が確認できません)

・商品一覧(リスト表示)全体のサイズを大きくする

<style>
.item_list {
font-size: 100%;
}
</style>

・商品一覧(リスト表示)の商品名だけのサイズを大きくする

<style>
.item_list .item_name {
font-size: 115%;
}
</style>

・商品一覧(リスト表示)の商品コードと自由項目のサイズを大きくする

<style>
.item_list .item_code, .item_list .item_maker, .item_list .item_model, .item_list .item_attribute_1, .item_list .item_attribute_2, .item_list .item_attribute_3 {
font-size: 90%;
}
</style>

・商品一覧(リスト表示)の商品価格だけのサイズを大きくする

<style>
.item_list .item_price {
font-size: 110%;
}
</style>

・商品一覧(リスト表示)の商品在庫無し表示だけのサイズを大きくする

<style>
.item_list .item_soldout {
font-size: 100%;
}
</style>

・商品一覧(リスト表示)の商品説明文だけのサイズを大きくする

<style>
.item_list .item .item_explain {
font-size: 95%;
}
</style>


■商品詳細ページの場合
商品詳細ページにスタイルを追加する場合は、フリーエリアパーツ管理(デザイン設定>レイアウトタブ)にある[ページ選択:]から商品詳細を選択した後に以下のスタイルを追加してください。

以下のスタイルの○○%を編集した上で追加してください。
(そのまま追加すると、変更が確認できません)

・商品詳細全体のサイズを大きくする

<style>
.item_detail {
font-size: 100%;
}
</style>

・商品詳細の商品名だけのサイズを大きくする
※こちらは22pxを編集してください。

<style>
.item_detail .item_name {
font-size: 22px;
}
</style>

・商品詳細の商品コードだけのサイズを大きくする

<style>
.item_code {
font-size: 100%;
}
</style>

・商品詳細の自由項目1〜3のサイズを大きくする

⇒自由項目1
<style>
.item_attribute_1 {
font-size: 100%;
}
</style>

⇒自由項目2
<style>
.item_attribute_2 {
font-size: 100%;
}
</style>

⇒自由項目3
<style>
.item_attribute_3 {
font-size: 100%;
}
</style>


・商品詳細の商品価格だけのサイズを大きくする

<style>
.item_detail .item_price {
font-size: 100%;
}
</style>

・商品詳細の商品説明文だけのサイズを大きくする

<style>
.item_detail .item_explain {
font-size: 100%;
}
</style>


長文となり恐れ入りますが、ご案内は以上です。



返信
*おなまえ
*email (回答通知用。公開されません)
*タイトル
*内容
ショップURL
*key (修正の際に使用します)

無料で本格的なネットショップ開業できるのは『イージーマイショップ』