MENU
  1. ホーム
  2. WordPress
  3. WordPressヘッダー編集完全ガイド！画像・ロゴ、プラグイン、注意点など徹底解説！

WordPressヘッダー編集完全ガイド！画像・ロゴ、プラグイン、注意点など徹底解説！

広告
WordPress　ヘッダー編集

「WordPressでヘッダーを変えたいけど、何から手を付ければいいのかわからない……」
「プラグインを入れずに手軽に画像やロゴを差し替えたい！」
「スマホで見たときにヘッダーが崩れてしまうのが不安……」
「もっとサイトの印象をアップする動くヘッダーにトライしたい！」

そんな悩みや疑問を抱えた初心者さんのために、本記事では、

  • 画像・ロゴの最適な準備方法
  • 標準機能（カスタマイザー・サイトエディター）での設定手順
  • プラグインを使ったスライダー＆ランダム表示
  • バックアップやプレビューなど運用時の注意点

をステップごとに丁寧に解説します。

この記事を読めば、プラグイン不要の基本操作から、上級者向けのカスタムヘッダー機能、さらには便利なプラグイン活用法まで、すべてマスターできます！

目次

ヘッダーの基礎知識と重要性

Webサイトの顔としてのヘッダー

ヘッダーは、訪問者がページを開いた瞬間に目に入るパーツです。

  • ロゴやサイト名で第一印象を決定🎨
  • ナビゲーションメニューで回遊性をサポート🚀
  • キャッチコピーでサイトの目的や世界観を一言で伝える💬

ヘッダーのデザインが整っているだけで、訪問者の信頼感がアップします！

ヘッダーがサイト成果に与える影響

ヘッダーの工夫次第で、下記のような成果向上が期待できます。

スクロールできます
効果項目ポイント
ブランド認知ロゴ・カラーを統一し、一貫性を持たせることで印象に残りやすくなる👍
滞在時間直感的なメニュー配置で、必要な情報へスムーズに誘導📋
コンバージョンCTAボタンや検索フォームを目立たせ、行動喚起を強化📈
  • ブランド認知：統一感のあるヘッダーは、サイト全体の印象を底上げします。
  • 滞在時間：訪問者がクリックすべき場所を迷わず見つけられると、ページ内滞在が伸びます。
  • コンバージョン：ヘッダー内に問い合わせや購入ボタンを配置すると、申し込み率が高まります。

画像・ロゴ準備のポイント

推奨サイズとフォーマットの確認

ヘッダー画像はテーマによって最適サイズや対応フォーマットが異なります。

下表を参考に、自分のテーマに合わせて準備しましょう。

スクロールできます
テーマ例推奨サイズファイル形式備考
Twenty Twenty-Three1200×280pxJPEG, PNG横長バナー向け
Cocoon960×150pxPNG（透過可）ロゴ＋キャッチコピー配置に最適
SWELL1000×300pxWebP, JPEG高解像度対応
  • PNG：透過ロゴを使いたいときに◎
  • JPEG：写真やグラデーションでの仕上げに最適
  • WebP：対応ブラウザが多いテーマならサイズ削減に👍

ヘッダーロゴの作り方

ロゴはサイトの顔。

以下のポイントを押さえて作成しましょう。

  1. ブランドカラーを反映
    • 色コードを統一して、一貫性を持たせる🎨
  2. フォント選び
    • 読みやすく個性も出せるフォントをセレクト
  3. 透過PNGで保存
    • 背景を透明にすると、テーマの背景色と自然に馴染む✨
  4. 最適な解像度
    • 横幅は300～600px程度、高さはテーマ推奨の範囲内に収める

Tip: 無料ツール（Canva, Photopeaなど）を使えば、簡単に透過ロゴを作成できます！

複数画像のランダム表示・スライダー活用

複数のヘッダー画像をローテーションすることで、訪問者に飽きさせない演出が可能です。

  • 手動切り替え（CSS＋JavaScript）
  <div id="header-slider">
    <img src="header1.jpg" class="active">
    <img src="header2.jpg">
    <img src="header3.jpg">
  </div>
  <script>
    // 簡易スライダー実装例
  </script>
  • プラグイン利用例
    • Meta Slider：直感的な操作でスライダー作成🛠
    • Smart Slider 3：レスポンシブ対応の高機能ツール⚙️
    • Random Header Images：指定フォルダからランダム表示

ポイントまとめ

  • 画像はあらかじめ同一サイズにリサイズ
  • 表示間隔やフェード効果など、ユーザビリティを意識
  • モバイル表示も必ずチェック📱

標準機能でのヘッダー設定

テーマカスタマイザーを使った手順

  1. カスタマイザー画面を開く
    • WordPress管理画面の 「外観」→「カスタマイズ」 をクリック⚙️
    • 左側にプレビュー、右側に設定項目が表示されます
  2. 画像やロゴをアップロード
    • 「サイト基本情報」（または「ヘッダー」／「ヘッダーメディア」）を選択
    • 「画像を選択」 ボタンからファイルをアップロード🖼️
    • ロゴとヘッダー画像をそれぞれ登録できます
  3. トリミング・プレビューを確認して公開
    • 画面上でドラッグして表示領域を調整
    • 「公開」 ボタンで設定を保存✔️

Tip: 画像をあらかじめ推奨サイズにリサイズしておくと、 ▶️ トリミングが楽になります！

プレビュー確認のコツ

  • PC／スマホ両対応チェック
    • プレビュー下部の デバイス切替ボタン で、パソコン💻・タブレット・スマホ📱を切り替え
    • 各画面で「ロゴが切れていないか」「メニューがはみ出していないか」を必ずチェック
  • 本番公開前の非公開プレビュー活用
    • 「公開」横の▼メニュー から 「下書きとして保存」 → 固有URLでテスト可能
    • チーム内共有やクライアント確認にも便利
スクロールできます
デバイスプレビュー幅の目安
PC1024px以上
タブレット768px以上
スマホ375px以上

ブロックテーマ（フルサイト編集）での編集

FSEヘッダーの仕組み

ブロックテーマのヘッダーは「テンプレートパーツ」と呼ばれる部品群で構成されています。

  • テンプレートパーツ
    • サイト全体で共通利用する「header」パーツ
    • ページごとに切り替え可能なパーツも設定できる
  • ブロック構造
    • ヘッダーは複数のブロック（ロゴ、ナビ、検索フォームなど）を積み重ねて作成
    • 各ブロックはドラッグ＆ドロップでレイアウトを変更可能
スクロールできます
要素説明
テンプレートパーツ共通ヘッダーの雛形
ブロックロゴ・メニュー・ボタンなどの部品単位で編集可能
パターン設定済みデザインの組み合わせをワンクリックで追加できる

フルサイト編集では、従来のテーマファイルを書き換える必要がなく直感的にヘッダーをカスタマイズできます✨

サイトエディターによるカスタマイズ

  1. サイトエディターを開く
    • 「外観」→「サイト編集」 を選択
    • 編集画面でヘッダー領域がハイライト表示される
  2. ヘッダーブロックの配置・スタイル変更
    • ブロック左上の「移動ハンドル」をドラッグして順序調整
    • 右サイドバーで余白や背景色、タイポグラフィを設定🎨
  3. ナビゲーションメニュー／ウィジェットの追加
    • 「＋」ボタンからナビゲーションブロックを挿入
    • メニュー項目はドラッグで並び替え、階層化も可能
    • サイドバーから検索フォームやソーシャルアイコンなどのウィジェットを配置

ポイントまとめ

  • 小さな変更はプレビューを見ながら反映できる
  • パターン機能で既存デザインを一括適用📦
  • 必要に応じてテンプレートパーツを複製し、異なるヘッダーをページ別に設定

これで、最新のブロックテーマ環境でもプラグイン不要で柔軟にヘッダー編集が行えます！

クラシックテーマでのヘッダー調整

カスタマイザーによる編集

  1. 管理画面を開く
    • 「外観」→「カスタマイズ」 をクリック
  2. ヘッダー設定セクションを選択
    • 「ヘッダー画像」 または 「サイト基本情報」 内にロゴ・画像設定項目が並んでいます
  3. 画像・ロゴをアップロード
    • 「画像を選択」 からファイルを追加🖼️
    • ドラッグで表示範囲を調整し、トリミングを実行
  4. グローバルメニューを整える
    • 「メニュー」 セクションでヘッダーメニューを選択または新規作成
    • メニュー項目をドラッグして順序を決定
    • メニュー位置を 「表示位置：ヘッダー」 に設定✅
  5. 設定を確認・保存
    • プレビュー上で PC／スマホ表示 を切り替えて確認
    • 「公開」 ボタンで反映

Tip: メニュー階層を作るとドロップダウンで多階層ナビが実現できます！

テーマファイル（header.php等）を直接編集

  1. バックアップを取得
    • FTPまたはファイルマネージャでテーマフォルダを丸ごとコピー📦
    • ローカルPCにも保存しておくと安心
  2. header.phpを開く
    • パス：wp-content/themes/テーマ名/header.php
    • コードエディタで読み込む
  3. コード編集の流れ
スクロールできます
編集箇所役割
<header>...</header>ヘッダー全体のラッパー
<?php the_custom_logo(); ?>ロゴ出力用タグ（テーマサポートが必要）
<nav>...</nav>ナビゲーションメニューの呼び出し
get_header_image_url()ヘッダー画像URLを取得する関数
  • 必要に応じてHTML構造を追加・変更
  • クラス名を付与してCSSでデザイン調整
  1. 下層ページ用ヘッダーを分岐
    • front-page.php ではトップ専用レイアウトを呼び出し
    • page.php や single.php で別のヘッダーを読み込む場合：
    <?php if ( is_front_page() ) { get_template_part('template-parts/header', 'home'); } else { get_template_part('template-parts/header', 'sub'); } ?>
  2. 変更を反映・動作確認
    • 編集後はブラウザキャッシュをクリアして最新状態を確認✅
    • 画面崩れやリンク切れがないか入念にチェック

以上で、プラグインを使わずともテーマ標準機能とファイル編集で理想のヘッダーに仕上げられます✨

カスタムヘッダー機能の活用

機能概要と有効化

テーマに「カスタムヘッダー機能」を追加すると、管理画面からヘッダー画像や動画を柔軟に設定できるようになります。

以下のように functions.php に記述して有効化しましょう。

function mytheme_setup() {
    add_theme_support( 'custom-header', array(
        'default-image' => get_template_directory_uri() . '/assets/images/default-header.jpg',
        'width'         => 1200,
        'height'        => 280,
        'flex-height'   => true,
        'video'         => true,  // 動画ヘッダーを許可
    ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );
スクロールできます
引数説明
default-image初期表示するヘッダー画像のURL
width / heightヘッダー画像の推奨サイズ（柔軟なリサイズ可）
flex-height高さを自由に調整できるかどうか
video動画ヘッダー機能を有効にする（true / false）

ポイント: 設定後、管理画面の「外観→ヘッダー」からアップロード可能になります✨

マークアップ出力とメディア取得

有効化すると、テーマ内で以下の関数を使ってヘッダーを表示できます。

  • the_header_image_tag(): <img>タグごと出力
  • get_custom_header(): ヘッダー画像情報をオブジェクトで取得
<?php if ( get_header_image() ) : ?>
    <!-- 画像ヘッダー -->
    <?php the_header_image_tag(); ?>
<?php endif; ?>

<?php
// カスタムヘッダー情報を変数に取得
$header = get_custom_header();
echo '<p>高さ: ' . esc_html( $header->height ) . 'px</p>';

メリット

  • 余計なHTMLを書く手間が省ける📝
  • テーマ側で細かい出力調整が可能

動画ヘッダー導入の流れ

動画ヘッダーを活用すると、サイトのインパクトが格段にアップします。

  1. 動画ファイルのアップロード
    • 管理画面の「外観→ヘッダー」からMP4ファイルを追加🎥
  2. wp_get_attachment_url( get_custom_header()->video ) で動画URLを取得
  3. テンプレートで <video> タグを設置
   <?php if ( video_header_has_video() ) : ?>
     <video autoplay muted loop playsinline>
       <source src="<?php echo esc_url( get_header_video_url() ); ?>" type="video/mp4">
     </video>
   <?php endif; ?>
  1. モバイルや通信状況に応じてフォールバック画像を設定
    • header_video_settings フィルターで代替画像を指定

注意点: 動画はファイルサイズが大きくなりがち。適切に圧縮し、遅延読み込み（lazy load）を検討しましょう🚀

これで、カスタムヘッダー機能をフル活用し、静止画はもちろん動画ヘッダーも初心者でも簡単に設定できます！

プラグイン＆上級者向けテクニック

便利なヘッダー専用プラグイン紹介

下表は代表的なヘッダー向けプラグインです。

用途に合わせて選びましょう。

スクロールできます
プラグイン名主な機能特徴
Meta Slider画像スライダードラッグ＆ドロップで簡単にスライダーを作成👍
Smart Slider 3高機能レスポンシブスライダーレイヤー／アニメーション豊富
Sticky Header by ThematoSoup固定ヘッダースクロールしても常にヘッダーを表示📌
Random Header Imagesヘッダー画像のランダム切り替え指定フォルダの画像を自動ローテーション
WP Sticky Menu – Sticky Headerメニューのみ固定ヘッダーではなくナビゲーションだけを追従表示

ポイント: プラグインを入れる前に、必ずテーマとの相性テストを行い、表示崩れや動作不良がないか確認しましょう✨

ページビルダー（SeedProd等）でのデザイン

ページビルダーを使えば、コード不要で思い通りのヘッダーを設計できます。

  1. SeedProdのインストールと有効化
  2. 新規テンプレートに「ヘッダーブロック」をドラッグ
  3. ブロック内でロゴ・メニュー・ボタンを配置
  4. レスポンシブ設定で各デバイスの表示を調整📱💻
  5. 公開後、ショートコードやPHPタグでテーマに組み込む

Tip: SeedProdのプレミアム版なら、ヘッダーにカウントダウンタイマーやフォームを組み込むことも可能です🚀

コードスニペットによるウィジェット領域追加

ヘッダー内にウィジェットエリアを増設するには、以下のコードを functions.php に追加します。

// ヘッダー用ウィジェットエリアの登録
function mytheme_register_header_widget() {
    register_sidebar( array(
        'name'          => 'ヘッダーウィジェット',
        'id'            => 'header-widget-area',
        'description'   => 'ヘッダー内にウィジェットを表示',
        'before_widget' => '<div class="header-widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h4 class="widget-title">',
        'after_title'   => '</h4>',
    ) );
}
add_action( 'widgets_init', 'mytheme_register_header_widget' );

// テンプレートで呼び出す例（header.php内）
if ( is_active_sidebar( 'header-widget-area' ) ) {
    dynamic_sidebar( 'header-widget-area' );
}
  • register_sidebar でエリアを定義
  • dynamic_sidebar で表示
  • CSSでレイアウト・スペースを調整すると一気にプロっぽく仕上がります🎉

これらのプラグイン＆テクニックを駆使して、サイトのヘッダーをより魅力的かつ機能的にカスタマイズしましょう！

運用・最適化の注意点

画像サイズの再確認（テーマ推奨値）

  • 推奨サイズを守る
    テーマごとに推奨される横幅・高さを確認し、あらかじめリサイズしておくと表示崩れを防げます📏
  • ファイル容量に注意
    大きすぎると読み込みが遅くなるため、WebPやJPEGで圧縮をかけましょう⚡️
スクロールできます
テーマ名推奨サイズ（横×縦）備考
TwentyTwenty-Three1200×280px横長バナー向け
Cocoon960×150pxロゴ＋メニュー表示に最適
SWELL1000×300px高解像度対応

本番前のプレビュー＆モバイル確認

  • マルチデバイスチェック
    プレビュー機能でPC／タブレット／スマホを切り替え、画像の切れやボタンの重複がないか確認👍
  • 非公開プレビューの活用
    「下書きとして保存」で生成される専用URLをチームやクライアントに共有し、事前にフィードバックをもらいましょう👥
  • ブラウザキャッシュのクリア
    更新後に見た目が反映されない場合は、キャッシュを削除して最新状態を確認することが大切です🗑️

編集前の完全バックアップ

  • テーマフォルダのバックアップ
    FTPやホスティングのファイルマネージャーで、wp-content/themes/テーマ名 を丸ごと保存✅
  • データベースのエクスポート
    万が一のトラブルに備え、プラグイン（例：UpdraftPlus）やphpMyAdminでDB全体をエクスポートしておきましょう💾
  • ロールバック手順の確認
    事前に「元の状態に戻す流れ」をドキュメント化しておくと、急な不具合時にも迅速に対応できます📝

以上を意識すれば、ヘッダー編集後のトラブルを最小限に抑え、サイト運用の安全性とユーザビリティを維持できます✨

まとめ

本ガイドでは、WordPressヘッダー編集のポイントを以下の流れで網羅しました。

  1. 事前準備：テーマ推奨サイズの画像やロゴを作成し、必要に応じて透過PNGやWebP形式で圧縮
  2. 基本設定：カスタマイザー／サイトエディターを利用したプラグイン不要のヘッダー差し替え
  3. 高度な編集：ブロックテーマ（FSE）でのテンプレートパーツ編集や、header.php直接編集によるカスタマイズ
  4. 便利プラグイン：Meta SliderやRandom Header Imagesなどで動的なヘッダー演出
  5. 運用時の注意：バックアップ、マルチデバイスプレビュー、キャッシュクリアなどトラブル回避策

この手順に沿って進めれば、誰でも魅力的で機能的なヘッダーを実装できます。

まずは手を動かして、あなたのサイトにぴったりのヘッダーを仕上げてみましょう！

WordPress

関連記事

目次