AI要約
最近、読者の一人から、WordPressでヘッダーを編集する方法について段階的な指示を求められました。ゼロからガイドしてくれるものが見つからなかったとのことです。
これは非常に基本的なことですが、WordPressの旅を始めたばかりの人々を助ける絶好の機会だと考えました。
使用するエディターはサイトのテーマによって異なるため、このガイドでは両方の方法をカバーします。まず、どちらを使用しているかを判断するお手伝いをし、次に変更内容を説明します。
WordPressでヘッダーを編集する方法
最新バージョンのWordPressでは、インタラクティブでユーザーフレンドリーなサイトエディターを使用して、ウェブサイトをカスタマイズしてブランド化し、カスタムヘッダーを簡単に作成できます。
ほとんどの新しいWPのインストールではTwenty Twenty-Fourテーマが使用されるため、サイトエディターはいくつかのヘッダーカスタマイズに非常に役立ちます。
- フォント
- 色
- ボタンのスタイリング
- その他多数
ブロック時代より前に構築されたテーマは、サイトエディターではなく古いテーマカスタマイザーを提供し、ヘッダーコントロールはまったく別の場所に配置されます。
WordPressヘッダーとは？
ヘッダーは、サイトのすべてのページの最上部を横切る帯であり、通常はロゴ、サイトタイトル、メインナビゲーションメニューが含まれます。
個々のページではなくテンプレート内に存在するため、一度編集するとすべての場所で変更されます。
ヘッドセクションは、ページの上部近くにある目に見えないHTMLで、メタタグやスクリプトが含まれていますが、見出しはH1やH2のようなコンテンツ内のテキストの一部です。
どちらもヘッダーと混同されがちですが、新しいロゴや別のメニューに変更したい場合は、どちらも変更するものではありません。
どのヘッダーエディターをテーマが使用していますか？
WordPressダッシュボードの外観にカーソルを合わせると、どちらを使用しているかがわかります。エディターオプションは、テーマがブロックテーマであることを意味し、ステップ1以降のすべてが適用されます。
そこにある唯一のオプションがカスタマイズの場合は、クラシックテーマを使用しており、下部にあるカスタマイザーセクションが目的のものです。
Twenty Twenty-FiveはWordPress自体に同梱されており、過去数年間にリリースされたほとんどの無料ブロックテーマは同じように機能します。
しかし、クラシックテーマは依然として広く普及しており、Astra、GeneratePress、OceanWP、Kadenceのような人気のあるテーマは、カスタマイザーまたは独自のセッティングパネルを通じてヘッダーを管理しています。
ステップ1：サイトエディターにアクセスする
WordPressダッシュボードから、外観に移動し、メニューからエディターオプションをクリックするだけです。
これによりサイトエディターにリダイレクトされ、ブロックエディターを使用してウェブサイトの外観をカスタマイズできます。パターンのオプションを開きます。
次に、テンプレートパーツセクションが表示されるまでスクロールし、ヘッダーをクリックしてオプションを開くだけです。
画面の右側で、ヘッダー画像をクリックしてサイトエディター で利用可能なカスタマイズオプションを開き、編集アイコンをクリックします。
これでWordPressのブロックエディターにリダイレクトされ、ロゴ、ナビゲーション、ソーシャルアイコン、必要であればCTAボタンの追加から始めることができます。
ステップ2：サイトロゴを追加する
ウェブサイトのヘッダーのブロックエディターに入ったら、リストビューアイコンをクリックして、WordPressヘッダーに含まれる要素を簡単に把握できるようにします。
リストビューに含まれるすべてのブロックを展開し、最初の行アイテムをクリックして、ヘッダーテンプレートのカスタマイズを開始するために幅全体に配置を設定します。
次に、リストビューのサイトロゴオプションをクリックし、ヘッダープレビューセクションのアップロードアイコンをクリックするだけです。
ファイルをアップロードタブからロゴをアップロードするか、既存のメディアライブラリからファイルを選択するだけです。
必要に応じて、リサイズドットを使用して、特定のニーズや要件に基づいてサイトロゴの寸法とサイズを変更できます。
よくできました！これで、サイトロゴをヘッダーにアップロードするために必要なすべてが完了しました。次に、サイトタイトルを追加するステップに進みましょう！
ステップ3：サイトタイトルを追加する
ウェブサイトヘッダーにサイトタイトルを追加することは、WordPressテーマにサイトロゴをアップロードするのと同じくらい簡単です。リストビューからサイトタイトルをクリックするだけです。
次に、先ほどサイトロゴを変更したのと同じように、「サイトタイトルを入力…」と表示されているブロックをクリックし、その中にサイトタイトルを追加します。
ご覧のとおり、テーマのヘッダーが徐々に形になってきました。次のステップでは、ヘッダーにナビゲーション要素を追加します。
ステップ4：ページナビゲーションを追加する
ページをヘッダーに追加するには、リストビューからナビゲーションをクリックし、そのブロックの編集オプションをクリックするだけです。
これにより、ナビゲーション要素専用のブロックエディターページに移動します。ここでは、プラスアイコンを使用して新しいページとそのリンクを追加できます。
これによりヘッダーの外観が完成しますが、ご覧のとおり、非常にシンプルで改善の余地がたくさんあります！
ヘッダーに少しスタイルを追加して、より視覚的に魅力的で、ウェブサイトのカラートーンに合わせましょう。
ステップ5：背景色を変更する
ヘッダーに行える最も基本的な変更の1つは、背景色を変更することです。これを行うには、最初の行をクリックして設定を開きます。
選択した行のブロックオプションが表示されます。あとは、歯車（設定）アイコンの隣にあるスタイルアイコンをクリックするだけです。
これにより、選択した行の多数のオプションが開きます。ここで、色、背景画像、タイポグラフィ、および寸法を変更できます。
これらを探索して、ヘッダーをより魅力的に見せることができます。色を変更するだけだったので、テキストに白、背景に黒を選択しました。
ご覧のとおり、フロントエンドのヘッダーははるかに見栄えが良くなり、ウェブサイトに完全な外観を与えています。
ソーシャルアイコンやCTAボタンの挿入など、ヘッダーにさらに変更を加えたいですか？プロセスは簡単です！
ステップ6：ソーシャルアイコンとCTAボタンを追加する
ソーシャルアイコンとCTAボタンを追加するには、新しい行を追加する必要があります。プラス（+）アイコンをクリックし、行ブロックを選択します。
次に、新しく追加された行ブロックを既存の行の上にドラッグして、既存のヘッダーに影響を与えることなく自由にカスタマイズできるようにします。
その後、新しい行内の（+）ボタンをクリックし、ソーシャルアイコンブロックを検索して選択します。
ナビゲーションでページを追加したのと同様に、（+）ボタンをクリックして、好みのプラットフォームのソーシャルメディアウィジェットを挿入します。
完了したら、リストビューから再度行を選択し、（+）ボタンをもう一度クリックして、ヘッダーにボタンブロックを追加します。
あとは、ボタンに「今すぐ予約！」のようなテキストを入力し、リンクを更新して、ウェブサイト訪問者のリダイレクトを設定するだけです。
すべてをまとめるために、再度行を選択し、最初の行と同じように配置を全幅 に設定します。
次に、このセクションをより魅力的に見せるために、アイテムの配置を変更メニューを使用し、アイテムを右揃えオプションを選択します。
これで完了です！ヘッダーが完成し、完璧に見えるようになりました。変更を保存するには、上部にある保存ボタンをクリックしてください。
クラシックWordPressテーマでヘッダーを編集する方法
クラシックテーマは、ブロックキャンバスではなくライブプレビューパネルであるテーマカスタマイザーを通じてヘッダーの変更をルーティングします。
外観 » カスタマイズに移動すると、右側にサイトが表示され、左側に設定サイドバーが表示されます。必要なもののほとんどは、そのサイドバーの3つまたは4つのパネルにあります。
- サイトID: ロゴ、サイトタイトル、キャッチフレーズ。通常は最初に設定するもの
- メニュー: ナビゲーションに表示されるページと順序
- 色: ヘッダーの背景色とテキストの色
- ヘッダー画像: ストリップ全体の背後にあるバナー。多くのテーマで提供されていますが、すべてではありません
Astraはほとんどすべてをヘッダービルダーの下に配置し、GeneratePressはレイアウト » ヘッダーを使用し、OceanWPはオプションをヘッダーとタイポグラフィに分割しているため、正確なパネル名はテーマごとに異なります。
コントロールが見つからない場合は、ライブプレビューのヘッダーを直接クリックしてください。ほとんどのテーマは、一致するパネルにジャンプします。
プレミアムテーマは、最高のヘッダーオプションをカスタマイザーから完全に除外し、代わりに専用のトップレベルメニューに配置することがあります。機能が見つからないと仮定する前に、テーマの名前が付いたメニュー項目を確認してください。
カスタマイザーは同じパネルセットからフッターを管理するため、そこにいる間にフッターにコンタクトフォームを追加するのに良い機会です。サイドバーの上部にある公開をクリックするまで、何も公開されません。
WordPressでメールヘッダーにロゴを追加する
メールヘッダーにロゴを追加することを検討してください。これにより、一貫したブランディングが追加され、WordPressウェブサイトから送信されるメールにも反映されます。
WPFormsのメール通知の動作を変更するのは簡単です。まず、WPForms » 設定に移動し、メールタブをクリックします。
テンプレートセクションから、ブランディングに最適なスタイルを選択し、選択ボタンをクリックして適用します。
その後、メールにサイトのロゴを追加するには、ヘッダー画像セクションに移動し、画像のアップロードボタンをクリックします。
画像をアップロードしたら、ドロップダウンメニューから、メール通知で使用する画像のサイズを選択します。
次に、タイポグラフィのドロップダウンメニューの下にあるメールテンプレートのプレビューリンクをクリックします。
ブラウザで新しいタブが開き、サイトのロゴが表示された通知メールテンプレートのプレビューを確認できます！
WordPressでヘッダーを編集することに関するFAQ
WordPressでヘッダーを編集する方法を学ぶことは、読者の間で人気のトピックです。ここでは、それに関するよくある質問への回答を紹介します。
WordPressのヘッダーをカスタマイズするにはどうすればよいですか？
WordPressでヘッダーをカスタマイズするには、ダッシュボードに移動し、外観 » カスタマイズに移動します。ここでは、ヘッダーセクションが見つかります。それをクリックして、ロゴの変更、ヘッダーレイアウト、色、その他の要素の調整など、さまざまなオプションを探索してください。一部のテーマでは、スタイルに合わせて調整するための追加のヘッダーオプションが提供されています。
WordPressでヘッダーボタンを編集するにはどうすればよいですか？
WordPressでヘッダーボタンを編集するには、通常、外観 » カスタマイズからカスタマイザーにアクセスします。そこにアクセスしたら、ヘッダーまたはメニュー設定を探します。ボタンのテキスト、リンク、スタイルを変更したり、テーマがサポートしている場合は新しい項目を追加したりすることで、ボタンを編集できます。必要に応じて、カスタムコードを追加してヘッダーボタンを編集することもできます。
WordPressでヘッダーロゴを編集するにはどうすればよいですか？
ブロックテーマでは、外観 » エディターを開き、ヘッダーテンプレートパートを編集してから、サイトロゴブロックを選択して画像をアップロードします。クラシックテーマでは、外観 » カスタマイズ » サイト ओळख情報に移動し、ロゴを選択ボタンを使用します。どちらの方法でもサイト全体にロゴが設定されるため、一度だけ行えば済みます。
WordPressのヘッダーを固定できますか？
ヘッダーテンプレートパートをラップしている最も外側のグループブロックを選択し、ブロック設定サイドバーで位置を固定に設定します。これはプラグインなしで任意のブロックテーマで機能します。クラシックテーマは通常、独自のオプションパネルに固定ヘッダーのトグルを備えていますが、お使いのテーマにない場合は、固定ヘッダープラグインがその役割を果たします。
コーディングなしでWordPressヘッダーを編集できますか？
このガイドのすべては、サイトエディターまたはカスタマイザーを使用しているかどうかにかかわらず、コードなしでWordPress管理画面を通じて行われます。ヘッダー.phpファイルを直接編集することは、マークアップレベルの変更が必要な開発者向けのオプションです。そのルートは、テーマの更新で変更が消去されないように子テーマで作業することを意味し、典型的なサイト所有者がヘッダーから望むほとんどすべてはそれを必要としません。
WordPressヘッダーと見出しの違いは何ですか？
ヘッダーは、サイトの上部にあるテンプレート領域で、すべてのページにロゴとナビゲーションを配置します。見出しは、コンテンツ内の単一行のテキストで、H1からH6としてマークアップされ、記事をセクションに分割します。ヘッダーを変更するとサイト全体に影響しますが、見出しを変更すると、その見出しがあるページのみに影響します。
次に、Elementorでマルチステップフォームを作成する方法を学びましょう
ウェブサイトでのユーザーエンゲージメントとリード生成を、Elementorのマルチステップフォームで増やしたいと思ったことはありませんか？これらのフォームは、ユーザーを段階的にプロセスに導き、負担を軽減し、使いやすくします。
フォームの作成準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。
このブログ記事がお役に立ちましたら、無料のWordPressチュートリアルやガイドをさらにご覧いただくために、 Facebook と X (Twitter) でフォローしてください。
