オープンガイドヘッダメニューやカテゴリ、商品ピックアップのスタイル(CSS)
機能詳細や設定方法
ヘッダーメニューやカテゴリの色や文字サイズなどの変更に関するスタイル(CSS)です。
[スタイル追加に関するご注意]
標準で提供する機能及び設定ではないため、今後のバージョンアップなどでスタイル(CSS)が正常に適用されない可能性がございます。
ご了承のうえでスタイルの追加を行ってください。
ご了承のうえでスタイルの追加を行ってください。
ヘッダーメニューに関するスタイル例
/* ヘッダーメニューの文字サイズや色 */
.top_menu_pulldown > li > a{
font-size:20px; /* 文字サイズ */
color: #FDBE6E; /* 文字色 */
font-weight:bold; /* 文字の太さ */
}
/* ヘッダーメニューの背景色 */
.pane_head_menu_bar_bg {
background: #FDBE6E; /* 背景色 */
}
/* ヘッダーメニュー下階層の文字 */
.top_menu_pulldown .category_link{
font-size:20px; /* 文字サイズ */
color: #FFFFFF; /* 文字色 */
font-weight:bold; /* 文字の太さ */
}
/* ヘッダーメニュー下階層の背景 */
.top_menu_pulldown .category{
background: #FDBE6E; /* 背景色 */
border: solid 1px #ff9e00; /* 枠線 */
}
カテゴリに関するスタイル例
/* 見出し「カテゴリーから探す」の文字サイズや色 */
.parts_category .section_box_head3{
font-size: 20px; /* 文字サイズ*/
font-weight:bold; /* 文字太さ */
color: #FFFFFF; /* 文字色*/
border-left: 5px #ff9e00 solid; /* 左枠線の幅や色 */
↑非表示とする場合はborder-left: none;に変更
background: #FDBE6E; /* 背景色*/
}
/* カテゴリの文字サイズや色 */
.category_list ul.category > li > a{
font-size: 20px; /* 文字サイズ*/
font-weight:bold; /* 文字太さ */
color: #FFFFFF; /* 文字色*/
background: #FDBE6E; /* 背景色*/
}
/* 子カテゴリの文字サイズや色 */
.category_list .category_under .category_link{
font-size: 18px; /* 文字サイズ*/
font-weight:bold; /* 文字太さ */
color: #FFFFFF; /* 文字色*/
background: #FDBE6E; /* 背景色*/
}
商品ピックアップに関するスタイル例
※商品ピックアップの表示項目や1商品当たりの表示幅は、拡張設定＞デザイン設定＞商品ピックアップタブ＞各商品ピックアップの[編集(鉛筆マーク)]より指定できます。
/* 見出しの文字サイズや色 */
.related_item_list .related_item_title{
font-size: 20px; /* 文字サイズ*/
color: #FFFFFF; /* 文字色*/
font-weight: bold;/* 文字太さ */
border-left: 5px solid #FF9E00;
↑非表示とする場合はborder-left: none;に変更
background: #FDBE6E; /* 背景色*/
}
/* 商品ピックアップの商品コード */
.related_item_list .related_item_catalog .item_code{
font-size:20px; /* 文字サイズ */
color:#0000FF; /* 文字色 */
font-weight:bold; /* 文字の太さ */
}
/* 商品ピックアップの商品名 */
.related_item_list .related_item_catalog .item_name{
font-size:20px; /* 文字サイズ */
color:#0000FF; /* 文字色 */
font-weight:bold; /* 文字の太さ */
}
/* 商品ピックアップの価格 */
.related_item_list .related_item_catalog .item_price,
.related_item_list .related_item_catalog .item_price .normal_price_main{
font-size:20px; /* 文字サイズ */
color:#0000FF; /* 文字色 */
font-weight:bold; /* 文字の太さ */
}
/* 商品ピックアップの在庫数 */
.related_item_list .related_item_catalog .item_stock{
font-size:20px; /* 文字サイズ */
color:#0000FF; /* 文字色 */
font-weight:bold; /* 文字の太さ */
}
※このヘルプは、2026年4月に作成された内容です。仕様変更等により設定方法が異なる場合がございます。
ご不明な場合は右下の「この機能について問い合わせる」よりご連絡ください。
サポート営業日
