> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://con-one.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# ヘッダーを活用してホームページのメニューを最適化しよう！

${youtube}[ヘッダーを活用してホームページのメニューを最適化しよう！](pX4Mxd36Wcg)


# ヘッダーの活用法


コネクティッドワンにおける、ヘッダーの基本的な使い方です。
デザインも自由にできるため、あなたのホームページにあった形にしていきましょう。
ホームページの印象や利便性を大きく左右する「ヘッダー」機能。
コネクティッドワンでは、全ページ共通のメニュー設定から、
特定のページだけ異なるデザインにする高度な設定まで直感的に行えます。
### 1. ヘッダーの基本設定
ヘッダーはウェブサイトの最上部に位置する共通エリアです。サイトの回遊性を高めるための重要な役割を担います。
* ヘッダーはサイトの全ページで共通して表示されるエリアです。
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/image-enhancer_86sth9.jpg)
**ページごとの表示設定:**
編集画面左上の「ヘッダー」メニューから「非表示」を選択すると、そのページのみヘッダーを隠せます。
**活用シーン:** リンクを限定したいランディングページ（LP）やサンキューページなど。
**レイアウトの切り替え:**
「ヘッダーの設定（歯車アイコン）」→「ヘッダーのレイアウト」から選択。
**上部固定系:** ノーマル、フルワイド（横幅一杯）、コンパクト（中央寄せ）。
**サイドナビ系:** 垂直・左、垂直・右。サイドバー形式にすると、スクロールしても常に横に表示されます。
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/image-enhancer_dif81i.jpg)

## **2. ロゴのカスタマイズ**
左端（または任意の位置）に配置するサイトロゴの設定です。
**テキストロゴ:** 直接文字を入力。フォントの種類、サイズ、カラー、太さを自由に編集可能。
**画像ロゴ:** 準備したロゴ画像をアップロード。
**サイズ調整:** 「最大ロゴの高さ」スライダーで、ヘッダー内の収まり具合をピクセル単位で調整。
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/image-enhancer_1663k09.jpg)

## **3. ヘッダーウィジェットの配置**
ヘッダー内は「左・中央・右」の3つのセクションに分かれており、それぞれに部品を追加できます。
**ウィジェットの追加:** 「＋」アイコンから選択。
**主要なウィジェット一覧:**
**メニュー:** 各ページへのリンク。ドラッグ＆ドロップで「子メニュー（階層構造）」も作成可能。
**ログイン/プロフィール:** 会員サイト用。ログイン前後で表示が自動で切り替わる。
**カート:** EC用。現在の買い物状況を表示。
**検索:** ページ内やブログ内のキーワード検索窓。
**SNS:** 各種SNSアイコンとリンク。
**その他:** ボタン（お問い合わせ等）、アイコン、自由テキスト、HTMLコード。
**間隔の調整:** 部品間の境界線をドラッグすることで、各セクションの幅や余白を直感的に変更できます。
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/1image-enhancer_13b0c91.jpg)

## **4. ヘッダーの段組（多段構成）**
ヘッダーは最大3段まで重ねることが可能です。
**段の追加:** 中央の「＋（下段のヘッダー行を追加）」または上部の「＋（上段のヘッダー行を追加）」をクリック。
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/77ys4ois77yt_fkrhc7.jpg)
**段ごとの背景設定:** 各行の「設定」から、背景色を個別に変更可能。
**活用例:** 最上段に「お知らせ」や「電話番号」、中段に「ロゴとメインメニュー」を置くなど。

## **5. デザインの設定**
「ヘッダーの設定」パネルにあるチェック項目で、視覚効果をコントロールします。
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/77ys4ois77yu_9cnna0.jpg)

**背景色の設定:** ヘッダー全体のカラーを指定。
**下の枠線を追加:** ヘッダーとコンテンツの境界をはっきりさせます。
**コンテンツの上にヘッダーを設置:**
ヘッダーの背景を透明にし、ページ最上部の画像や動画に重ねて表示。
**ポイント:** 重ねた際の文字色（白など）を「メニュー編集」から調整してください。
**スクロール時に固定されたヘッダーを適用（追従）:**
画面を下にスクロールした際、ヘッダーを上部に固定。
固定時の背景色や、表示する部品を「通常時」と変えることも可能です。

## **6. モバイル・レスポンシブ確認**
**自動最適化:** スマートフォン表示では、メニューウィジェットは自動的に「ハンバーガーメニュー」に集約されます。
**プレビュー:** 左下の「ウェブサイトのプレビュー」から、パソコン・タブレット・スマホそれぞれの表示を必ず確認してください。
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/77yt_1ptowfx.jpg)


## **7. 代替ヘッダー（特定のページ専用設定）**
特定のページだけ、共通ヘッダーとは全く別のデザインを使いたい場合の設定です。
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/77ys4ois77yv_h1rvsu.jpg)
1. 左メニュー「ページ＆ポップアップ」から、対象ページの「歯車（ページ設定）」を開く。
2. 「このページに代替ヘッダーを使用」にチェックを入れる。
3. そのページ専用の独立したヘッダー編集が可能になります。
4. **活用例:** 会員専用ページのみ特別なメニューを表示させる等。




# ページビルダー一覧


[ページビルダー概要](/ja/article/44oa44o844k444ot44or44oa44o85qac6kab-uugfod/)

[ページの追加方法](/ja/article/44oa44o844k444gu6l95yqg5pa55rov-ngabyy/)

[ブロックの活用方法](/ja/article/44ow44ot44od44kv44gu5rs755so5pa55rov-wddhzi/)

[ウィジェット追加方法](/ja/article/44km44kj44k344kz44kn44od44oi6l95yqg5pa55rov-uypahx/)

[SEOの設定方法](/ja/article/seo-12zy0jh/)

[スマホサイズのデザイン設定方法](/ja/article/44k544oe44ob44k144kk44k644gu44oh44k244kk44oz6kit5a6a5pa55rov-79dyz5/)

[購入者限定ページの作成手順](/ja/article/6lo85ywl6icf6zmq5a6a44oa44o844k444gu5l2c5oiq5oml6acg-5ohl1f/)

[ポートフォリオ機能で商品一覧・顧客の声を作成！](/ja/article/44ob44ka44o844oi44ov44kp44oq44kq5qmf6io944gn5zwg5zob5lia6kan44o76agn5a6i44gu5aow44ks5l2c5oiq77yb-gdxfxi/)




[ヘッダーを活用してホームページのメニューを最適化しよう！](/ja/article/44oy44od44k44kz44o844ks5rs755so44gx44gm44ob44o844og44oa44o844k444gu44oh44ol44ol44o844ks5pya6ygp5yyw44gx44ki44gg77yb-1bx306j/)

[コピー（複製）の仕方（ウィジェットやブロック）](https://con-one.crisp.help/ja/article/44kz44ou44o877yi6ksh6ko977yj44gu5luv5pa577yi44km44kj44k444kn44od44oi44ke44ow44ot44od44kv77yj-khqvln/)

[フッターを活用してユーザーを誘導しよう！](https://con-one.crisp.help/ja/article/44ov44od44k44o844ks5rs755so44gx44gm44om44o844k244o844ks6kqy5bco44gx44ki44gg77yb-hy2apq/)

[ページへのアクセス設定](https://con-one.crisp.help/ja/article/44oa44o844k444g444gu44ki44kv44k744k56kit5a6a-1b5nciv/)

[AIで作ったLPやウェブサイトをコネワンに表示させる方法](https://con-one.crisp.help/ja/article/ailp-1silgif/)

[ファビコンとSNS共有画像](https://con-one.crisp.help/ja/article/sns-xf0jub/)

[ファイルマネージャー](https://con-one.crisp.help/ja/article/44ov44kh44kk44or44oe44on44o844k444oj44o8-14r6elu/)

[ブロックをスライダーで表示する方法（スライダーモード）](https://con-one.crisp.help/ja/article/44ow44ot44od44kv44ks44k544op44kk44oa44o844gn6kgo56s644gz44kl5pa55rov77yi44k544op44kk44oa44o844oi44o844oj77yj-jvpdc5/)

[ブロックの表示設定（見る人・日時・国などで表示を切り替える）](https://con-one.crisp.help/ja/article/44ow44ot44od44kv44gu6kgo56s66kit5a6a77yi6kal44kl5lq644o75pel5pmc44o75zu944gq44gp44gn6kgo56s644ks5yih44kk5pu44gi44kl77yj-1qrodnx/)

[カラムの基本設定](https://con-one.crisp.help/ja/article/44kr44op44og5z65pysjuocsoodreodvoodkoodqocqodqeodooiorewumg-bf216w/)

[グローバルカラムの設定](https://con-one.crisp.help/ja/article/44kw44ot44o844oq44or44kr44op44og44gu6kit5a6a-6l3pnn/)

[カラムをタブで切り替えて表示する方法（タブモード）](https://con-one.crisp.help/ja/article/44kr44op44og44ks44k44ow44gn5yih44kk5pu44gi44gm6kgo56s644gz44kl5pa55rov77yi44k44ow44oi44o844oj77yj-570b6r/)

[カラムをスライダーで表示する方法（スライダーモード）](https://con-one.crisp.help/ja/article/44kr44op44og44ks44k544op44kk44oa44o844gn6kgo56s644gz44kl5pa55rov77yi44k544op44kk44oa44o844oi44o844oj77yj-vrz6u/)[](https://con-one.crisp.help/ja/article/44kr44op44og44ks44k544op44kk44oa44o844gn6kgo56s644gz44kl5pa55rov77yi44k544op44kk44oa44o844oi44o844oj77yj-vrz6u/)

[フリームーブモード解説：ウィジェットを自由に移動](https://con-one.crisp.help/ja/article/44ov44oq44o844og44o844ow44oi44o844oj6kej6kqs77ya44km44kj44k444kn44od44oi44ks6ieq55sx44gr56e75yuv-1x5cejf/)