テーマエディター（OS 3.0）でのヘッダーとフッターのデザイン修正

ヘッダーとフッターは、SHOPLINEオンラインストアの共通ページパーツであり、テーマエディターで行った変更はストアフロントのすべてのページに適用されます。個別のページセクションとは異なり、ヘッダーとフッターはグローバルに設定され、常に顧客に表示されます。

このガイドでは、テーマエディターでのヘッダーとフッターの設定の操作方法と、それぞれのセクションやブロックでカスタマイズできる内容について説明します。

テーマエディターでのヘッダー＆フッターの操作

テーマエディターでヘッダーまたはフッター設定を開くには：

1. SHOPLINE管理画面から、オンラインストア > デザインに移動します。
2. 現在のテーマを見つけて、デザインをクリックし、テーマエディターに入ります。
3. 左のサイドバーで、設定を開くためにヘッダー（最初の項目）またはフッター（最後の項目）をクリックします。

ヘッダー

ヘッダーはテーマエディターの左パネルの最初の項目です。デフォルトで2つのセクション、お知らせバナーとヘッダーが含まれています。

お知らせバナー

お知らせバナーはメインヘッダーの上にバナーを表示します。以下の設定を行うことができます：

• 表示位置：お知らせバナーをページのどこに表示するか選択します。
• 複数のお知らせバナー表示スタイル：複数のお知らせの切り替えや表示方法を設定します。
• 切り替え間隔：各お知らせが表示される時間を制御します。
• PC版でのソーシャルメディアアイコン表示：PC版でのソーシャルメディアアイコンの表示・非表示を切り替えます。
• レイアウト：お知らせバナーの全体的なレイアウトを調整します。
• カスタムCSS：お知らせバナーにカスタムスタイルを適用します。

お知らせバナーセクションにはデフォルトで1つのブロック、お知らせがあり、各お知らせのテキストとリンクを入力します。

ヘッダー

ヘッダーセクションはストアフロントのメインナビゲーションエリアを制御します。以下の設定を行うことができます：

• カラー: ヘッダーのカラースキームを設定します。
• 全画面幅: ヘッダーをブラウザの全幅に拡張するかどうかを切り替えます。
• ヘッダー下に区切り線を表示: ヘッダーとページコンテンツの間に区切り線を表示するかどうかを切り替えます。
• 言語セレクターを表示: 顧客に見える言語切替スイッチを表示するかどうかを切り替えます。
• 国/地域セレクターを表示: 国または地域の切替スイッチを表示するかどうかを切り替えます。
• ロゴ: ストアのロゴをアップロードして設定します。
• 透明ヘッダー: ページコンテンツの上に透明なヘッダーを表示するように設定します。
• メニューバー: メインのナビゲーションメニューを設定します。このセクションには以下のスティッキーメニュー設定が含まれます:
  • スティッキーヘッダー: ヘッダーのスティッキー動作を設定します。オプション: なし、常に、スクロールアップ時。
  • モバイルスティッキーメニュー: モバイル訪問者向けにスティッキーメニューを有効にします。
  • スティッキーメニューをトップページのみに表示: スティッキーメニューをトップページのみに制限します。
  • スティッキーメニューがスティッキーヘッダーに従う: モバイルスティッキーメニューがヘッダーのスティッキー動作に従うか、ページと一緒に通常スクロールするかを制御します。

スティッキーメニューがスティッキーヘッダーに従うの切り替えは、スティッキーヘッダー設定と以下のように連動します:

• ハイライト: ヘッダーにハイライトされたリンクやプロモーションコンテンツを追加します。
• レイアウト: ヘッダーの全体的なレイアウトを調整します。
• カスタムCSS: ヘッダーにカスタムスタイルを適用します。

また、＋コンテンツを追加をクリックしてヘッダーセクションにコンテンツブロックを追加することもでき、メニューイメージやメガメニューなどの項目を挿入できます。

フッター

フッターはテーマエディターの左パネルの最後の項目です。1つのデフォルトセクション、フッターが含まれており、以下のブロックが含まれています：

フッター情報

• タイトルのタイポグラフィ: フッターセクションのタイトルのフォントスタイルをカスタマイズします。
• レイアウト: ブロックのレイアウトを調整します。

お問い合わせ

• 配置: ブロック内の連絡先情報の配置方法を設定します。
• レイアウト: ブロックのレイアウトを調整します。

追加コンテンツ

• 配置: 追加コンテンツ項目の配置方法を設定します。
• レイアウト: ブロックのレイアウトを調整します。