# 実際のブロックで作られたヘッダーとフッターのビルダー URL: https://canvaswp.com/ja/header-builder/ Updated: 2026-11-03 ヘッダービルダー ヘッダー、フッター、トップバー、メガメニュー、サイドパネル、ページタイトル、Heroは、ブロックエディターでデザインし、サイト全体または個別のページに割り当てるレコードです。 [デモで見る](https://canvaswp.com/ja/demos/) [エディターの仕組み](https://canvaswp.com/ja/editor/) 更新日：2026年11月3日 ヘッダーの作り方 ## 想定どおりに入れ子になるブロック ヘッダーレコードには Header Root が含まれます。Header Root には Container が含まれ、Container には Zone が含まれます。Zone はヘッダー行のセルで、一つ目にロゴ、次にメニュー、最後に検索アイコンとカートを配置します。 ### レイアウトはゾーンが担います ゾーンは要素の配置を決めます。右に寄せたり、検索とカートをひとまとめのかたまりにしたりできます。マークアップを極力抑えたいときは、ゾーンを装飾のない素のままにしておくこともできます。 - ゾーンはブレークポイントごとに並び替えられるため、1つの設定でデスクトップ、タブレット、スマートフォンをカバーできます - どのゾーンも特定のデバイス区分に限定でき、他のデバイスではマークアップに出力されないようにできます。 - 独自のCSSから指定したい場合に、ゾーンに追加するクラス [ライブラリ内のすべてのブロック](https://canvaswp.com/ja/blocks/) ### 22個のヘッダーブロック #### Header Root ヘッダーそのものです。ほかのすべての要素はその中に配置されます。 #### Header Container 幅のコンテナを使うと、ヘッダーをボックス幅にしたり、全幅にしたり、ブレークポイントごとに切り替えたりできます。 #### Header Zone ヘッダー行のセルです。ゾーンはパーツを格納し、その配置を決めます。 #### Header Logo ロゴは、スティッキー時とダーク時の表示用に、別々のファイルを指定できます。 #### Header Navigation ドロップダウンとメガメニューのパネルを備えたメインメニューです。 #### Header Search クリックすると入力欄が開く検索アイコン、または常に表示されている入力欄。 #### Header Cart 商品数とドロップダウン形式の概要を表示する、WooCommerceのカートです。 #### Header Social 一度設定したプロフィールのソーシャルアイコンを一列に表示します。 #### Header Button 一般的なサイズ、スタイル、リンク設定を備えたコールトゥアクションボタンです。 #### Header Icon Link 電話番号やアカウントページなど、どこへでもリンクできる1つのアイコンです。 #### Header Info 連絡先、住所、営業時間をまとめて表示する小さなブロックです。 #### Header Shop Search ストア向けの商品検索で、お使いのカタログを対象にします。 #### Header Topbar トップバーのレコードを、ヘッダー行の上に配置します。 #### Mega Menu Column メガメニューのパネル内にあるカラムです。これにより、パネルに実際のレイアウトを持たせられます。 レイアウトプリセット ## スタートに使える7件のプリセット プリセットとは、ワンクリックで適用できるレイアウト設定をまとめたものです。目的の動作を選び、その後はブロック設定で好きなように変更できます。 ### 透明性 背景を設定しないため、ヘッダーの背後にあるものがそのまま表示されます。 ### 半透明 背景を半透明にすると、後ろの画像が見えたままになり、テキストも読みやすく保てます。 ### フローティング ヘッダーはページ内に浮いた状態で表示され、四辺すべてに余白があります。 ### フローティング・半透明 フローティング表示に加え、半透明の背景にも対応しています。 ### 小さくフローティング スクロール時に浮いて表示され、高さが抑えられたヘッダーです。 ### 全幅スティッキー 画面の全幅に広がり、ページをスクロールしても固定されたままです。 ### 上方向へのスクロール時に固定 訪問者が下にスクロールするとトップから消え、上にスクロールすると再び表示されます。 再利用可能なパーツ ## トップバー、メガメニュー、サイドパネルもレコードです 各ヘッダーを一度デザインし、サイト全体の既定値に設定したうえで、別の表示にしたいページでは個別に上書きしてください。 ### トップバー トップバーは、独自のブロックを持つ独立したレコードです。電話番号、営業時間、言語切替、プロモーションなどを配置できます。Header Topbarブロックは、トップバーをヘッダー行の上に配置します。全体に一括で割り当てることも、ページごとに上書きすることもできます。 88件のデモのうち12件に、編集可能なトップバーが含まれています。 ### メガメニュー メガメニューは、ブロックとして設計し、メガメニューブロックで表示するレコードです。メニュー項目を選ぶと、列、画像、ボタンなど任意のブロックを配置できる全幅パネルが開きます。 Mega Menu Column keeps the panel on a grid. 5 demos ship one. ### サイドパネル サイドパネルは、画面の端からスライドして表示されるレコードです。セカンダリメニュー、カート、お問い合わせフォーム、ヘッダーに収まりきらない詳細情報などを表示するために使います。 6件のデモには、トリガーと接続済みのサイドパネルが同梱されています。 レコードの割り当ては項目ごとに行います。既定のサイドパネル、それが出てくる画面の端、ページを押し出すか上に重ねるか、トリガーの見た目を選択します。トップバー、メガメニュー、フッターも同じ方法で割り当てます。 ヘッダーオプション ## 94件のフィールド、テーマオプションで最大のセクション テーマオプションには、個別のレコードでは管理すべきでない、サイト全体のヘッダー設定が含まれています。デモのインポートでこれらがすべて設定されるので、必要なものだけ変更してください。 - テーマオプションの533項目のうち、94項目がヘッダーに属します。 - 既定のヘッダーレコードを設定し、任意のページでそれを上書きできます - スティッキー動作、高さ、余白、モバイルブレークポイント - すべてのフィールドは、リファレンス記事に記載されています [テーマオプション全533項目](https://canvaswp.com/ja/features/#options) **テーマオプション、ヘッダー。**稼働中のサイトで撮影したパネルそのものです。 パターン ## 40種類のヘッダーパターンから始める パターンを挿入すると、並べ替え、名前の変更、削除が自由にできる通常のブロックが追加されます。ロックされたブロックはなく、触れないレイアウトのスクリーンショットでもありません。 - 他のどのカテゴリーよりも多い、40件のヘッダーパターン - ページの反対側の末尾向けフッターパターン16個 - 合計183パターン、17カテゴリに分類 - すでにお使いのインサーターのパターンタブから挿入 [カテゴリー別のパターン](https://canvaswp.com/ja/editor/#patterns) フッタービルダー ## フッターとコピーライトバーは別々のレコードとして管理されます フッターはヘッダーとまったく同じように動作します。Footerレコードには列が、Copyrightsレコードには下部の細いバーが保存されるため、上のデザインに触れずに、サイト全体の著作権表記を変更できます。 ### 6つのブロックと17個のオプション 会社概要の紹介文には Footer About、住所と電話番号には Footer Contacts、フィードには Footer Instagram、ウィジェットでできることすべてには Footer Widget Area、整ったリンク一覧には Widget Links、最下部のバーには Copyrights を使用します。 - ヘッダーと同じように、フッターをサイト全体またはページごとに割り当て - 下のバー用の、コピーライトの個別レコード - 始めるための16個のフッターパターン - ページを組み立てながら、編集キャンバスでプレビューされます。 **テーマオプション、フッター。** フッターのレコードの背後にある、サイト全体のフィールド17件。 ページタイトル ## 4種類のスタイル、または自分でデザイン ヘッダー直下の帯エリアは、それ自体が独立したデザインの領域で、背後に57個のオプションがあり、公開する各ページで個別に上書きできます。 **テーマオプション、ページタイトル。**フィールド57件で、製品内で3番目に大きいセクションです。 ### デフォルト、ミニ、テンプレート、カスタム Default は標準のバンドです。Mini は下層ページ向けのコンパクトな版です。Template は指定された専用レイアウトの中から1つを選びます。Custom は、ブロックで自分で作成したページタイトルのレコードを表示します。 - Page Title, Heading, Subtitle, Breadcrumbs and Buttons blocks - サイト全体のデフォルト設定で、個別のページごとに上書きできます - 背景、高さ、配置、パンくずリストはすべて設定項目です [機能リストのページタイトル](https://canvaswp.com/ja/features/#page-titles) ヒーローとスライダー ## スロットブロックでテンプレートに配置されます ヘッダーと同様に、HeroとSliderはそれぞれ独立したレコードです。スロットブロックはブロックテンプレート内に配置され、表示中のページに割り当てられたHeroまたはSliderを読み込みます。 - ブロックから構築された、Heroレコードと Sliderレコード - Hero Slot と Slider Slot のブロックは、コンテンツではなくテンプレートに含まれています - 1つのテンプレートですべてのページに対応し、各ページに個別の冒頭部分を持たせられます - 88件のデモのうち12件に、編集可能なスライダーが含まれています [ヒーローとスライダー](https://canvaswp.com/ja/features/#heroes) エディター内 ## ヘッダーは、完成形を見ながら組み立てられます スロットブロックは、ヘッダー、トップバー、ページタイトル、ヒーロー、フッターを編集キャンバスに反映します。そのため、ページは段落だけの箱ではなく、完成したページの見た目で開きます。 ブロックエディターのページです。ヘッダーとフッターは、訪問者に表示されるのと同じコードによって、コンテンツの周囲に描画されています。 ### 単一のレンダラー 編集画面で見えるヘッダーは、訪問者に表示されるものと同じコードで描画されるため、正確さを保つための別のプレビューは存在しません。 ### サイト全体またはページごと サイト全体のデフォルトとして、ヘッダー、トップバー、ページタイトル、ヒーロー、フッターを設定できます。その後、個別のページの設定画面から、特定のページでいずれも上書きできます。 ### 設計段階からレスポンシブ対応 ゾーンはブレークポイントごとに並べ替えられ、デバイスの区分ごとに表示を制限することもできます。そのため、他の人が見る前にエディターでスマートフォンのレイアウトを確認できます。 [エディターでできることはすべて](https://canvaswp.com/ja/editor/) よくある質問 ## ヘッダービルダーについて そのほかの回答は、[FAQの全文](https://canvaswp.com/ja/faq/)と [ドキュメント](https://docs.canvaswp.com/how-to-build-a-header)にあります。 **モバイル用に2つ目のヘッダーは必要ですか？** 1つのCanvasヘッダーで、通常はモバイルも対応できます。ゾーンはブレークポイントごとに並べ替えられ、それぞれデバイスの区分で制限できるためです。1つのヘッダーレコードで、スマートフォンではロゴを中央に配置し、連絡先を非表示にして、メニューをトグルの後ろに移動できます。本当に異なるデザインが必要な場合にのみ2つ目のレコードを作成してください。レイアウトの修正のためではありません。 **1つのページで別のヘッダーを使用できますか？** はい、Canvasのすべてのヘッダー、トップバー、ページタイトル、フッターには、サイト全体のデフォルト設定とページごとの上書き設定があります。そのため、ランディングページには透明なヘッダーとロゴだけのトップバーを設定し、サイトの他のページは元の設定を維持できます。 **ヘッダーはウィジェットエリアですか、それともメニューですか？** Canvasのヘッダーはそのどちらでもありません。ページと同じように、ブロックエディターで編集するレコードです。ヘッダー内のナビゲーション、ロゴ、検索、カート、ボタンは、それぞれ独自の設定パネルを持つブロックです。 **ライセンスが失効すると、ヘッダーはどうなりますか？** Canvasのライセンスが期限切れになっても、ヘッダーとサイトのその他の部分は、現在と同じように表示され続けます。停止するのはサービスの方です。アップデート、デモのインポート、AI、プレミアムブロックの編集は、ライセンスを更新するまで停止します。ライセンスの確認が当社のサーバーに届かない場合は、14日間の猶予期間があります。 **引き続きサイトエディターを使用できますか？** はい、Canvasは実際のブロックテンプレートをベースに構築されているため、テンプレートとテンプレートパーツはWordPressが保持する場所にそのまま置かれ、ヘッダーレコードはブロックによってテンプレートに配置されます。[エディターの仕組みをご覧ください](https://canvaswp.com/ja/editor/)。