ヘッダーの編集

本ページは、フロント画面編集の補助を目的として公開しています。
「どこを編集すれば良いのか？」とお困りの際にご活用ください。

具体的なHTMLおよびスタイルシートの記述に関しては、サポート対象外となります。
恐れ入りますがユーザー様にてお調べいただますようお願い申し上げます。
※ご希望でしたら、弊社にて制作会社の紹介も可能ですので、サポートまでお問い合わせください

ヘッダーとは

サイト上部に掲載される要素を「ヘッダー（HEADER）」と呼びます。

楽楽B2Bでは、以下の要素をヘッダーとしています。

• 最上部のサイトロゴおよび右端の検索窓やログアウトボタン
• ナビゲーション（商品カテゴリやクイックオーダー等、各種メインメニューに遷移するボタン群）
• メインビジュアル

ヘッダー項目リスト

①店舗ロゴエリアHTML

 HTML： デザイン(PC) ＞ ヘッダー・フッター・レフトナビ設定 > 「ヘッダーコンテンツ」編集画面

※ショップロゴに関して、初期状態では[基本設定]にて登録した画像が表示されるよう
　 独自タグの埋め込みが行われています

②店舗ロゴの画像登録

  画像登録： 基本設定 ＞ 店舗設定 ＞[店舗情報]タブ ＞「ショップロゴ」欄（PC／SP）

③検索ウインドウ

  表示管理：デザイン(PC/SP) ＞ 高度な設定 ＞ レイアウト設定

下部の「編集可能ページ一覧」から「TOPページ」のレイアウト編集画面へと進み、
【ヘッダー検索】のパーツを操作してください。

④会員メニュー

  HTML： デザイン(PC) ＞ ヘッダー・フッター・レフトナビ設定 > 「ヘッダーコンテンツ」編集画面

 <div class="block_outer -flex0">　～　</div><!-- #header[end] -->

ログイン前後でHTMLが分かれているため、上記のブロックは２箇所存在します。
上段のコードがログイン後、下段のコードがログイン前となりますので、ご注意ください。

⑤特典バナー

 背景色①：基本設定 ＞ カートシステム設定 > [デザイン関連設定]タブ ＞ アクセントカラー

 背景色②：デザイン(PC/SP) ＞ スタイルシート設定 ＞ 「import.css」の編集画面

 HTML：デザイン(PC) ＞ ヘッダー・フッター・レフトナビ設定 > 「ヘッダーコンテンツ」編集画面

<div id="header_benefits"> <a href="<!--{$smarty.const.ROOT_URLPATH}-->entry/"> <h2>お取引先様限定4つの特典</h2>

 画像： デザイン管理(PC/SP) ＞ ファイル管理 ＞ [img]フォルダ ＞ [common]フォルダ

⑥ナビゲーション

  HTML： デザイン(PC) ＞ ヘッダー・フッター・レフトナビ設定 > 「ヘッダーコンテンツ」編集画面

  <div id="gloval_navi"><ul class="shoppingt_btn">　～　</ul>

 ボタン色：基本設定 ＞ カートシステム設定 > [デザイン関連設定]タブ ＞ メインカラー

⑦その他メニュー

  HTML： デザイン(PC) ＞ ヘッダー・フッター・レフトナビ設定 > 「ヘッダーコンテンツ」編集画面

  <ul class="use_btn">　～　</div><!-- #gloval_navi[end] -->

 デザイン関連：デザイン(PC/SP) ＞ スタイルシート設定 ＞ 「import.css」の編集画面

⑧スライダー(デザイン)

  基本設定 ＞ カートシステム設定 > [デザイン関連設定]タブ

スライダー設定より、デザインの切り替えが可能です。

⑧スライダー(HTML)

  HTML： デザイン(PC) ＞ ヘッダー・フッター・レフトナビ設定 > 「ヘッダーコンテンツ」編集画面

前項目「⑧スライダー(デザイン)」でどのデザインパターンを選択したかによって、
フロント側に表示されるHTMLが切り替わります。

slick

<div class="slider_area"><ul class="bnr-slider">　～　</ul></div>

bxSlider

<div id="main_slide_image" class="design-style"><ul class="bxslider">　～　</ul></div>

⑨スライド画像登録

 画像： デザイン管理(PC/SP) ＞ ファイル管理 ＞ [img]フォルダ ＞ [common]フォルダ

コードに記載されている「slider01.jpg／slider02.jpg／slider03.jpg」が対象となります。
PNG形式も保存されている可能性があるため、ご注意ください。