ヘッダーを活用してホームページのメニューを最適化しよう！
ヘッダーの活用法
コネクティッドワンにおける、ヘッダーの基本的な使い方です。
デザインも自由にできるため、あなたのホームページにあった形にしていきましょう。
ホームページの印象や利便性を大きく左右する「ヘッダー」機能。
コネクティッドワンでは、全ページ共通のメニュー設定から、
特定のページだけ異なるデザインにする高度な設定まで直感的に行えます。
1. ヘッダーの基本設定
ヘッダーはウェブサイトの最上部に位置する共通エリアです。サイトの回遊性を高めるための重要な役割を担います。
- ヘッダーはサイトの全ページで共通して表示されるエリアです。
ページごとの表示設定:
編集画面左上の「ヘッダー」メニューから「非表示」を選択すると、そのページのみヘッダーを隠せます。
活用シーン: リンクを限定したいランディングページ（LP）やサンキューページなど。
レイアウトの切り替え:
「ヘッダーの設定（歯車アイコン）」→「ヘッダーのレイアウト」から選択。
上部固定系: ノーマル、フルワイド（横幅一杯）、コンパクト（中央寄せ）。
サイドナビ系: 垂直・左、垂直・右。サイドバー形式にすると、スクロールしても常に横に表示されます。
2. ロゴのカスタマイズ
左端（または任意の位置）に配置するサイトロゴの設定です。
テキストロゴ: 直接文字を入力。フォントの種類、サイズ、カラー、太さを自由に編集可能。
画像ロゴ: 準備したロゴ画像をアップロード。
サイズ調整: 「最大ロゴの高さ」スライダーで、ヘッダー内の収まり具合をピクセル単位で調整。
3. ヘッダーウィジェットの配置
ヘッダー内は「左・中央・右」の3つのセクションに分かれており、それぞれに部品を追加できます。
ウィジェットの追加: 「＋」アイコンから選択。
主要なウィジェット一覧:
メニュー: 各ページへのリンク。ドラッグ＆ドロップで「子メニュー（階層構造）」も作成可能。
ログイン/プロフィール: 会員サイト用。ログイン前後で表示が自動で切り替わる。
カート: EC用。現在の買い物状況を表示。
検索: ページ内やブログ内のキーワード検索窓。
SNS: 各種SNSアイコンとリンク。
その他: ボタン（お問い合わせ等）、アイコン、自由テキスト、HTMLコード。
間隔の調整: 部品間の境界線をドラッグすることで、各セクションの幅や余白を直感的に変更できます。
4. ヘッダーの段組（多段構成）
ヘッダーは最大3段まで重ねることが可能です。
段の追加: 中央の「＋（下段のヘッダー行を追加）」または上部の「＋（上段のヘッダー行を追加）」をクリック。
段ごとの背景設定: 各行の「設定」から、背景色を個別に変更可能。
活用例: 最上段に「お知らせ」や「電話番号」、中段に「ロゴとメインメニュー」を置くなど。
5. デザインの設定
「ヘッダーの設定」パネルにあるチェック項目で、視覚効果をコントロールします。
背景色の設定: ヘッダー全体のカラーを指定。
下の枠線を追加: ヘッダーとコンテンツの境界をはっきりさせます。
コンテンツの上にヘッダーを設置:
ヘッダーの背景を透明にし、ページ最上部の画像や動画に重ねて表示。
ポイント: 重ねた際の文字色（白など）を「メニュー編集」から調整してください。
スクロール時に固定されたヘッダーを適用（追従）:
画面を下にスクロールした際、ヘッダーを上部に固定。
固定時の背景色や、表示する部品を「通常時」と変えることも可能です。
6. モバイル・レスポンシブ確認
自動最適化: スマートフォン表示では、メニューウィジェットは自動的に「ハンバーガーメニュー」に集約されます。
プレビュー: 左下の「ウェブサイトのプレビュー」から、パソコン・タブレット・スマホそれぞれの表示を必ず確認してください。
7. 代替ヘッダー（特定のページ専用設定）
特定のページだけ、共通ヘッダーとは全く別のデザインを使いたい場合の設定です。
- 左メニュー「ページ＆ポップアップ」から、対象ページの「歯車（ページ設定）」を開く。
- 「このページに代替ヘッダーを使用」にチェックを入れる。
- そのページ専用の独立したヘッダー編集が可能になります。
- 活用例: 会員専用ページのみ特別なメニューを表示させる等。
ページビルダー一覧
更新日 04/05/2026
ありがとうございます