ウェブデザイン初心者でも簡単に使える強力なツール、Elementorをご存知ですか？
WordPressユーザーにとって必須のこのプラグインは、直感的なドラッグ&ドロップエディターを使って、魅力的なヘッダーやフッターを簡単に作成できます。
この記事では、Elementorを使って無料で美しいヘッダーとフッターを作成する方法をステップバイステップでご紹介します。
デザインの自由度が高く、コーディング不要でレスポンシブなレイアウトを実現できるため、初心者でもプロフェッショナルな仕上がりを目指せます。
⚠️ この記事を読む前に確認してほしい前提条件
- 本記事で紹介する方法は、Elementor本体（無料版）とElementor Header & Footer Builderプラグインの2つをインストールして使います
- Elementor本体が先にインストール・有効化されていないと、Header & Footer Builderは動作しません
- WordPress 6.x系での動作を確認しています（2025年時点）
- Astra・Hello Elementorなどのテーマでは問題なく動作します。CocoonやSWELLなど日本語テーマの場合は、テーマ側のヘッダー非表示設定が別途必要になる場合があります
主な項目
- ヘッダー/フッターを無料のWordPressプラグインで自由自在にカスタマイズ
- 初心者でも容易に洗練されたヘッダー／フッターを制作可能
- 使いやすいドラッグ&ドロップエディターで直感的にデザイン可能
- レスポンシブWebデザインを実現
- 多彩なウィジェットが備わっており、高度なカスタマイズが実現
Elementor Header & Footer Builderとは
※引用 https://ja.wordpress.org/plugins/header-footer-elementor/
Elementor Header & Footer Builderは、WordPressの有名プラグイン、Elementorに機能を追加するものです。
その豊富な機能により、ユーザーは自由自在にヘッダーやフッターをデザインできます。
なお、このプラグインを使うにはElementor本体（無料版でOK）が先にインストールされている必要があります。Elementor本体とHeader & Footer Builderの2つをセットで使う構成です。
直感的なドラッグ&ドロップ方式のエディター
このプラグインはドラッグ&ドロップ方式を採用しています。
そのため、コーディングに精通していないユーザーでも、直感的に操作が可能です。
ウィジェットやコンテンツを自由に移動させ、理想のデザインを実現できます。
ただし、Elementorには「セクション」「カラム」「ウィジェット」という3層構造の概念があります。初めて使う場合はこの構造を理解するまでに少し時間がかかることがあります。慣れてしまえばとても直感的に操作できますが、最初の学習コストは0ではない点を覚えておきましょう。
豊富なウィジェットでデザインを自在にカスタマイズ
多彩なウィジェットが用意されており、サイトに必要な要素を簡単に追加できます。
例えば、サイトロゴや検索窓、またはソーシャルアイコンを追加したり変更したりすることができます。
更に、WordPressの標準ウィジェットも自由に利用可能です。
また、Elementor Proを使うことで、さらに多くのウィジェットを使用できます。
これにより、より洗練されたデザインが実現し、ユーザーが望む表現力豊かなサイトを構築できます。
📋 無料版でできること・できないこと
| 機能 | 無料版 | Pro版 |
|---|---|---|
| サイトロゴの表示 | ✅ 可能 | ✅ 可能 |
| ナビゲーションメニュー | ✅ 可能 | ✅ 可能 |
| 検索ボックスの追加 | ✅ 可能 | ✅ 可能 |
| ソーシャルアイコン | ✅ 可能 | ✅ 可能 |
| レスポンシブ対応 | ✅ 可能（手動調整） | ✅ 可能（より詳細） |
| ヘッダーをテンプレートとして保存 | ❌ 不可 | ✅ 可能 |
| スティッキーヘッダー（固定表示） | ❌ 不可 | ✅ 可能 |
| スクロール連動アニメーション | ❌ 不可 | ✅ 可能 |
| ヘッダーデザインの複数パターン管理 | △ 複数作成は可能 | ✅ 柔軟に管理可能 |
ロゴ＋ナビゲーションメニューというシンプルなヘッダーであれば、無料版で十分対応できます。
Elementor Header & Footer Builderのインストール
WordPressサイトにElementorでヘッダーやフッターを追加するには、プラグインの導入が必須です。
Elementor Header & Footer Builderは、WordPressの公式ディレクトリから利用可能です。
こちらは無料で提供されています。
インストール前に必ず確認：Elementor本体（無料版）がすでにインストール・有効化されていることを確認してください。Elementor本体が有効でないと、Header & Footer Builderのエディターを開くことができません。
WordPressの管理画面にアクセスし、「プラグイン」→「新規追加」をクリックします。
「Elementor Header & Footer Builder」を検索窓に入力し、該当するプラグインを見つけます。
見つけたプラグインを選択し、「今すぐインストール」をクリックして、ダウンロードとインストールを始めます。
インストールが完了したら、「プラグインを有効化」をクリックして機能を有効にします。
ワードプレスのダッシュボード画面でElemntorの設定を選択し、上記図の箇所にチェックを入れる。
ダッシュボードの外観から「Elementor Header & Footer Builder」を選択
ADD NEW（新規追加）をクリック
タイトルを入力し、ヘッダーの場合は「Header」を選択。
サイト全体に設定する場合は「Entire Website」を選択。
次にElementor編集をクリック
これで、Elementorを用いたヘッダーとフッターの設計が可能になりました。
次に、それぞれのデザイン作業に取りかかりましょう。
⚠️ ナビゲーションメニューを使う前の事前準備
Elementorでヘッダーにナビゲーションメニューを設置する場合、事前にWordPress管理画面の「外観」→「メニュー」でメニューを作成しておく必要があります。メニューを作成していないとウィジェットを配置しても何も表示されません。
ヘッダーの作成
WordPressサイトの中で、ヘッダーは極めて重要な役割を果たします。
Elementorを活用することで、ヘッダーの作成や設定作業を容易に進められます。
Elementor Header & Footer Builderプラグインは、素晴らしいヘッダーを簡単に作れるため、コーディングスキルがなくても十分に対応できます。
代表的なヘッダー構成例（ロゴ＋ナビゲーションメニュー）
初心者が最初に作るべきシンプルなヘッダーの構成例として、「左側にロゴ・右側にナビゲーションメニュー」という横2カラムレイアウトが定番です。具体的な手順は以下のとおりです。
- Elementorエディターで「+」ボタンから2カラムのセクションを追加する
- 左側のカラムに「Site Logo（サイトロゴ）」ウィジェットをドラッグ＆ドロップする
- 右側のカラムに「Nav Menu（ナビゲーションメニュー）」ウィジェットを配置する
- 各ウィジェットの左パネルから色・サイズ・余白を調整する
- 上部のデバイス切替アイコンでスマホ表示に切り替えて、モバイルでの見え方を確認・調整する
この構成であれば、無料版のElementorだけで十分に作成できます。作業時間の目安は、慣れていない初心者でも30〜60分程度で基本的なヘッダーが完成します。
レイアウトの調整
ヘッダーの外観を整えるためには、レイアウトの調整が不可欠です。
幸いにも、Elementorはドラッグ&ドロップを中心とした使いやすいインターフェースを提供しています。
このインターフェースを通じて、ウィジェット配置を簡単に変更することができる上、セクションの幅や高さ、ウィジェットの位置に至るまで、デザインの細部をカスタマイズできます。
これら一連の機能を駆使することで、バランスのとれたデザインを実現できます。
モバイル表示の調整について：Elementorエディターの上部にはPC・タブレット・スマホのデバイス切替アイコンがあります。スマホアイコンに切り替えることで、モバイル表示のレイアウトを個別に確認・調整できます。レスポンシブ対応は「自動で完璧になる」ものではなく、スマホ表示での確認と微調整が別途必要です。
| Elementor | ヘッダーデザイン | レイアウト調整 |
|---|---|---|
| 無料版 | テンプレートとしてヘッダーを保存できない | 限定的な調整機能 |
| Pro版 | ヘッダーをテンプレートとして保存可能 | 幅広いレイアウト調整機能（スティッキーヘッダー等） |
表の内容から明らかなように、ElementorはPro版を選ぶことでさまざまなメリットが得られることがわかります。
例えば、Pro版ではヘッダーデザインをテンプレート化して他のページでも利用可能にすることができます。
また、プランをアップグレードすることで、レイアウト調整機能が飛躍的に向上します。
一方で、ロゴとナビゲーションメニューを表示するだけのシンプルなヘッダーであれば、無料版で十分です。まずは無料版で試してみて、スティッキーヘッダーや高度なアニメーションが必要になった段階でPro版へのアップグレードを検討するのが現実的です。
ヘッダーの公開と設定
デザイン作成が完了したら、次は公開の段階です。
エディタ画面の左下に位置する「公開」ボタンを押すことで、Elementorを通じてヘッダーをサイトに組み込めます。
公開後は、実際にサイトのフロントエンド（サイトを訪問者として見た画面）を確認して、ヘッダーが意図通りに表示されているかチェックしてください。キャッシュプラグインを使っている場合はキャッシュをクリアしないと変更が反映されないことがあります。表示確認時はブラウザのキャッシュも合わせてクリアしましょう（Ctrl+Shift+R または Cmd+Shift+R）。
表示条件の指定
「Publish Settings」画面が登場します。
ここではヘッダーの表示条件を編集します。
「Entire Site」を選択することでサイト全体にヘッダーを適用できます。特定のページや投稿タイプのみに表示を限定したい場合は、条件を細かく設定することも可能です。
まとめ
Elementorでヘッダーとフッターを無料で作成するには、「Elementor Header & Footer Builder」プラグインを活用するのがおすすめです。無料版のElementorだけではテーマビルダー機能が使えませんが、このプラグインを導入することで初心者でも直感的にオリジナルのヘッダー・フッターをデザインできます。ドラッグ＆ドロップで自由にレイアウトを組み、ロゴやナビゲーションメニュー、SNSアイコンなどを配置してみましょう。一度設定すればサイト全体に反映されるため、統一感のあるプロフェッショナルなWebサイトを効率的に構築できます。
よくある質問
Q. Elementor無料版だけでヘッダーとフッターは作れますか？
Elementor無料版単体ではテーマビルダー機能が使えないため、ヘッダー・フッターの編集はできません。ただし「Elementor Header & Footer Builder」という無料プラグインを追加インストールすることで、無料版でもオリジナルのヘッダーとフッターを作成できるようになります。
Q. Elementor Header & Footer Builderプラグインはどのテーマでも使えますか？
ほとんどのWordPressテーマで利用可能ですが、一部のテーマでは互換性の問題が発生する場合があります。Astra、GeneratePress、OceanWPなどの人気テーマとは特に相性が良く、スムーズに動作します。導入前にお使いのテーマとの互換性を確認することをおすすめします。
Q. 作成したヘッダー・フッターをスマホ対応（レスポンシブ）にできますか？
はい、Elementorにはレスポンシブ編集機能が標準搭載されています。デスクトップ・タブレット・モバイルそれぞれの表示を個別に調整でき、ハンバーガーメニューの設定なども可能です。プレビュー機能で各デバイスでの見え方を確認しながら編集すると効率的です。
