テーマエディター(OS 3.0)でのヘッダーとフッターのデザイン修正
ヘッダーとフッターは、SHOPLINEオンラインストアの共通ページ要素であり、テーマエディターでこれらに加えた変更はストアフロントのすべてのページに適用されます。個別のページセクションとは異なり、ヘッダーとフッターはグローバルに設定され、常に顧客に表示されます。
このガイドでは、テーマエディターでのヘッダーとフッターの設定のナビゲート方法と、それぞれのセクションおよびパーツでカスタマイズできる内容について説明します。
|
開始前に:正しいツールを使用していることを確認してください この記事で説明する設定はテーマエディター(OS 3.0)にのみ適用され、Shopper Appの表示設定とは別です。 |
テーマエディターでのヘッダー&フッターのナビゲート
テーマエディターでヘッダーまたはフッター設定を開くには:
- SHOPLINE管理画面から、オンラインストア > デザインに移動します。
- 現在のテーマを見つけて、デザインをクリックし、テーマエディターに入ります。
- 左側のサイドバーで、設定を開くためにヘッダー(最初の項目)またはフッター(最後の項目)をクリックします。
ヘッダーの構造と設定を理解する
ヘッダーはテーマエディターの左パネルの最初の項目です。デフォルトで2つのセクション、お知らせバナーとヘッダーが含まれています。
お知らせバナー
お知らせバナーはメインヘッダーの上にバナーを表示します。以下の設定を構成できます:
- 表示位置:お知らせバナーがページのどこに表示されるかを選択します。
- 複数のお知らせバナー表示スタイル:複数のお知らせがどのように切り替わるかまたは表示されるかを設定します。
- 切り替え間隔:各お知らせが表示される時間を制御します。
- PC版でのソーシャルメディアアイコンの表示:PC版でのソーシャルメディアアイコンの表示をオンまたはオフに切り替えます。
- レイアウト:お知らせバナーの全体的なレイアウトを調整します。
- カスタムCSS:お知らせバナーにカスタムスタイルを適用します。
お知らせバナーセクションにはデフォルトで1つのパーツ、お知らせがあり、各お知らせのテキストとリンクを入力します。
ヘッダー
ヘッダーセクションはストアフロントのメインナビゲーションエリアを制御します。以下の設定を構成できます:
- カラー: ヘッダーのカラースキームを設定します。
- 全画面幅: ヘッダーをブラウザの全幅に拡張するか切り替えます。
- ヘッダー下に区切り線を表示: ヘッダーとページコンテンツの間に区切り線を表示するか切り替えます。
- 言語セレクターを表示: 顧客に見える言語切替スイッチを表示するか切り替えます。
- 国/地域セレクターを表示: 国または地域の切替スイッチを表示するか切り替えます。
- ロゴ: ストアのロゴをアップロードして設定します。
- 透明ヘッダー: ページコンテンツの上に透明なヘッダーを表示するよう設定します。
-
メニューバー: メインのナビゲーションメニューを設定します。このセクションには以下のスティッキーメニュー設定が含まれます:
- スティッキーヘッダー: ヘッダーのスティッキー動作を設定します。オプション: なし、常に、スクロールアップ時。
- モバイルスティッキーメニュー: モバイル訪問者向けにスティッキーメニューを有効にします。
- スティッキーメニューをトップページのみに表示: スティッキーメニューをトップページのみに制限します。
- スティッキーメニューがスティッキーヘッダーに追従: モバイルスティッキーメニューがヘッダーのスティッキー動作に追従するか、ページと一緒に通常スクロールするかを制御します。
スティッキーメニューがスティッキーヘッダーに追従の切り替えは、スティッキーヘッダー設定と以下のように連動します:
| スティッキーヘッダー | スティッキーメニューがスティッキーヘッダーに追従: オン(デフォルト) | スティッキーメニューがスティッキーヘッダーに追従: オフ |
| なし | メニューはページと一緒にスクロール | メニューはページと一緒にスクロール |
| 常に | メニューは常に上部に固定 | メニューはページと一緒にスクロール |
| スクロールアップ時 | スクロールアップ時にメニューが固定表示され、スクロールダウン時に隠れる | メニューはページと一緒にスクロール |
|
注意事項:
|
- ハイライト: ヘッダーにハイライトされたリンクやプロモーションコンテンツを追加します。
- レイアウト: ヘッダーの全体的なレイアウトを調整します。
- カスタムCSS: ヘッダーにカスタムスタイルを適用します。
また、+ パーツを追加をクリックしてヘッダーセクションにコンテンツパーツを追加することもでき、メニュー画像やメガメニューなどのアイテムを挿入できます。
フッターの構造と設定を理解する
フッターはテーマエディターの左パネルの最後の項目です。デフォルトのセクションとしてフッターが含まれており、以下のパーツが含まれています:
フッター情報
- タイトルのタイポグラフィ: フッターセクションのタイトルのフォントスタイルをカスタマイズします。
- レイアウト: パーツのレイアウトを調整します。
お問い合わせ
- 配置: パーツ内の連絡先情報の配置方法を設定します。
- レイアウト: パーツのレイアウトを調整します。
追加コンテンツ
- 配置: 追加コンテンツアイテムの配置方法を設定します。
- レイアウト: パーツのレイアウトを調整します。
| 注: テーマエディターのフッター上部にある+ セクションを追加をクリックして、フッターセクションにさらにパーツを追加できます。 |
この記事はAIを使用して翻訳されており、不正確な部分が含まれている可能性があります。最も正確な情報については、元の英語版をご参照ください。