WordPressにヒーローイメージを追加する方法（すべてのテーマに対応）

WordPressサイトをよりプロフェッショナルに見せたいですか？ヒーロー画像が最適です。

ヒーロー画像は、ユーザーがサイトにアクセスしたときに最初に目にするものです。注意を引くのに約3秒しかないので、正しく行うことが重要です。

私たちは10年以上にわたりWordPressウェブサイトを構築してきました。そして、ヒーローイメージが最初に大きなものになったことを覚えています。

当時は、他の皆と同じように苦労していました。画像が奇妙に見える――デスクトップでは大きすぎ、モバイルでは潰れ、あるいは単に壊れているだけでした。しかし今では、私たちはそれを科学的に解明しました。

WordPressサイトにヒーローイメージを追加する最も簡単な方法をご紹介します。ページビルダーを使いたい方も、ブロックエディターを好む方も、どちらにも対応できます。

まず最初に：WordPressヒーロー画像の準備

WordPressウェブサイトにヒーローイメージを追加する前に、訪問者の注意を引くような画像を作成する必要があります。優れたヒーローセクションは、サイトが何であるかを示す素晴らしい画像から始まります。

Canvaは、ウェブサイトのグラフィックデザインに人気のツールです。使いやすく、ヒーローイメージを作成するための豊富なテンプレートが用意されています。Canvaがお好みでない場合は、Canvaの代替ツールのリストもありますので、ご自身に合ったものを見つけることができます。

ヒーロー画像を作成する際は、いくつか留意しておきたい点があります。

まず、サイズについて考えます。ヒーロー画像は通常、あまり背が高くなく、フロントページの全幅をカバーすることがよくあります。

一般的な WordPress のヒーロー画像のサイズは約幅 1920 ピクセル、高さ 400〜600 ピクセル（またはそれ以上）です。ただし、これは WordPress テーマによって異なる場合があります。

次に、どのようなメッセージを送りたいかを考えてください。ヒーローイメージは、ウェブサイトが何についてのものかを素早く示す必要があります。それは、製品のヒーローイメージ、ブランドを表す写真、あるいは印象的なフルスクリーン動画の背景かもしれません。

例えば、私たちはホームページのヒーロー画像に創設者であるSyed Balkhiをフィーチャーすることにしました。これは、WPBeginnerが目指しているWordPressユーザーの成功を支援することに専念している、私たちのブランドの背後に実在の人物がいることを示しています。

また、テキスト用のスペースも確保してください。多くのヒーローセクションには、見出しやボタンがあります。これらを配置するスペースがあり、読みやすいことを確認してください。

ヒーローセクションの例については、自分の分野の他のウェブサイトを確認することをお勧めします。これにより、独自のデザインのアイデアを得ることができます。私たちのWordPressウェブサイトの例のエントリのいくつかは、素晴らしいインスピレーションとして役立つでしょう。

それが終わったので、ヒーロー画像を実際にどのように追加するかを見てみましょう。

WordPressヒーローイメージの追加方法

このチュートリアルのリサーチを進める中で、クラシックなWordPressテーマにヒーローイメージを追加するのが必ずしも簡単ではないことにすぐに気づきました。テーマによっては、ヒーローセクションが組み込まれているものもあれば、そうでないものもあるため、そのプロセスは大きく異なります。

例えば、Sydneyテーマを見てみましょう。ヒーローセクションがすぐに使える状態で用意されているため、作業がずっと楽になります。

既存のサイトにヒーローを追加しようとしていて、テーマに組み込み機能がない場合、それはフラストレーションの原因となる可能性があります。

初心者の方で、新しいテーマを選ぶことに抵抗がない場合は、ヒーローセクションが組み込まれたテーマに切り替えることをお勧めします。これにより、長期的には時間を節約できます。

テーマのおすすめをお探しなら、市場で最も人気のある最高のWordPressテーマの専門家による厳選リストをご覧ください。さらに良いことに、ヒーローセクションを備えたテーマとページビルダーを組み合わせることもできます。その方法は方法3で説明します。

大きな変更を加える前に、新しいテーマを徹底的にテストするためにステージングサイトを使用することを常にお勧めします。これにより、サイトにとって正しい選択をしていることを確認できます。

これがどのように行うかわからない場合は、WordPressテーマを正しく変更する方法に関するガイドをご覧ください。

現在のクラシックテーマに満足していますか？問題ありません。方法4にスキップしてください。ここでは、プラグインを使用してヒーローセクションを追加する方法を説明します。このアプローチはどのテーマでも機能するため、サイトデザイン全体を変更することなく、見栄えの良いヒーロー画像を作成できます。

下のクイックリンクを使用して、希望する方法にスキップできます。

• 方法1：テーマカスタマイザーを使用する（クラシックテーマのみ）
• Method 2: Using Full Site Editor (Block Themes Only)
  • ステップ 1: フルサイトエディターを開く
  • ステップ2: ページ/テンプレートにカバーブロックを追加する
  • ステップ3：カバーブロックで画像を構成する
  • ステップ 4: カバーブロックにブロックを追加する
• Method 3: Using a Page Builder (Custom Landing Pages/Themes)
  • ステップ 1: SeedProd のセットアップ
  • ステップ2：ヒーローセクションをカスタマイズする
  • ステップ3：ヒーローセクションにさらにブロックを追加してカスタマイズする
• Method 4: Using Hero Banner Plugin + Shortcode (All Themes)
  • ステップ1：ヒーローバナープラグインの設定
  • ステップ2: テーマのヘッダーセクションのCSSセレクターを見つける
  • ステップ3：WPCodeにショートコードを追加する
• ヒーロー画像に関するよくある質問

方法1：テーマカスタマイザーを使用する（クラシックテーマのみ）

Sydney のようなヒーローセクションを持つクラシックテーマを使用している場合、テーマカスタマイザーを通じてヒーロー画像をカスタマイズできます。WordPress ダッシュボードで 外観 » カスタマイズ に移動して開始してください。

💡 クイックノート：ダッシュボードにテーマカスタマイザーが見つからない場合は、ブロックテーマを使用している可能性が高いため、方法2にスキップしてください。

サイドバーには、クラシックテーマをカスタマイズするためのいくつかのオプションがあるはずです。

シドニーでは、ヒーローセクションをカスタマイズする設定は「ヒーローエリア」と呼ばれますが、この特定のメニューはテーマによって異なります。進んでクリックしてください。

Sydneyテーマには、ヒーローセクションを作成するための3つのメニューがあります：ヒーロータイプ、ヒーロースライダー、ヒーローメディア。

私たちの目的でヒーローセクションを追加するには、最初の2つで十分なので、それらのみを使用します。

まず、「ヒーロータイプ」を選択します。

ヒーロータイプでは、ヒーローセクションに追加するメディアの種類を選択するように求められます。

フルスクリーンのスライダー、ビデオ、画像、またはヘッダーなしを選択できます。

フロントページとウェブサイト全体で、ヒーローセクションにフルスクリーン スライダーを選択します。その理由は、ヒーロー用の複数の画像を持つスライダーを作成し、画像の上にテキストとボタンを追加できるためです。

次に、ヒーローエリアメニューに戻り、「ヒーロー スライダー」を選択します。

ここで、「最初のスライド」タブを開き、「画像の選択」ボタンをクリックします。

これにより、WordPressのメディアライブラリが開きます。ここで、ヒーローセクション用の新しい画像を追加したり、既存の画像を選択したりできます。

画像をアップロードしたら、下にスクロールして、タイトルとサブタイトルのフィールドのテキストを置き換えることができます。

ページプレビューに変更が自動的に反映されているのが確認できるはずです。

ヒーローセクションに複数の画像を追加したい場合は、残りのスライドで同じ手順を繰り返すことができます。

それ以外の場合は、「スライダーボタン」メニューまで下にスクロールできます。

ここで、行動喚起ボタンのURLとテキストを変更できます。

その後、「スライダー設定」タブまで再度スクロールダウンします。

ここで、スライダーの速度を調整したり、すべてのスライドで同じテキストを表示するように選択したり、スライダーの動作をレスポンシブにしたりできます。

ボタンの色を変更したい場合は、テーマカスタマイザーのメインメニューに戻ってください。

次に、「一般」をクリックします。

これで、テーマの一般設定をカスタマイズするためのいくつかのメニューが表示されるはずです。

ここで「ボタン」をクリックするだけです。

次に、「デフォルトの状態」と「ホバー状態」のセクションまでスクロールダウンして、状態に応じてボタンの色を変更できます。

色を変更するには、カラーピッカーツールをクリックして新しい色を選択するだけです。

ほとんどのWordPressテーマでは、デザインの色やタイポグラフィをカスタマイズすることもできます。ただし、変更は通常、ヒーローセクションだけでなく、ウェブサイト全体に適用されるため、その点に留意してください。

いずれにしても、Sydneyテーマで作成したヒーロー画像は次のようになります。

方法2：フルサイトエディターを使用する（ブロックテーマのみ）

ブロックテーマを使用している場合、フルサイトエディターのカバーブロックを使用して、WordPressでヒーロー画像を簡単に作成できます。プラグインは必要ありません。

ステップ 1: フルサイトエディターを開く

まず、WordPress管理画面で 外観 » エディター に移動します。

これで、エディタのメインメニューが表示されます。

例えば、ヒーロー画像をホームページにのみ追加したいとします。

その場合は、ページ右側のテーマプレビューをクリックするだけです。

ヒーロー画像を別のページ、カスタムページテンプレート、またはブロックパターンに追加したい場合は、WordPressのフルサイト編集に関するガイドをご覧ください。

ステップ2: ページ/テンプレートにカバーブロックを追加する

ヒーローセクションは通常、ファーストビュー（訪問者がサイトにアクセスしたときに表示されるページの上部）の上に配置されるため、正しい場所にいることを確認する必要があります。ヒーローセクションは通常、ヘッダーのすぐ下にあります。

それを行ったら、その場所にある既存のブロックを削除するか、既存のブロックのすぐ上に新しいグループブロックを追加する必要があります。

この例では、ホームページに既にあったブロックを単純に削除します。同じことをしたい場合は、ページの左側にある「リストビュー」ボタンをクリックできます。

次に、ヒーローセクションのスペースを確保するために削除する必要のあるブロックを見つけます。見つけたら、3つのドットボタンをクリックして「削除」を選択します。

次に、削除したブロックのすぐ下にあったブロックを選択します。

次に、3点ボタンをクリックし、「前に追加」を選択します。これにより、そのブロックのすぐ上、ヘッダーセクションの下にブロックが追加されます。

この段階で、想定されるヒーローセクションに表示される「+」ボタンをクリックできます。

ここにグループブロックを追加する必要があります。これにより、必要に応じてヒーローイメージ、テキスト、ボタン、その他の要素を単一のブロックとして管理できるようになります。

ブロックを追加するコンテナを選択できるようになりました。

デモンストレーションのために、基本的なGroupコンテナを選択しました。

次に、グループブロック内の「+」ボタンをクリックするだけです。

ここで、「カバー」ブロックを選択します。

その後、ヒーローの背景画像を追加するための3つのオプションが表示されます。コンピューターからアップロードする、メディアライブラリから追加する、またはアイキャッチ画像を使用する、のいずれかです。

この例では、「メディアライブラリ」をクリックして既存の画像を選択します。

画像のアップロードが成功すると、すぐにヒーロー画像が表示されます。ただし、調整が必要な点がいくつかあります。

ステップ3：カバーブロックで画像を構成する

まず、「カバー」ブロック自体を選択して、そのツールバーが上に表示されるようにします。

次に、「配置」ボタンをクリックして「フル幅」を選択します。

次に、デュオトーンアイコンをクリックして、画像に適用されるデュオトーンフィルターを変更できます。

もし気に入らなければ、後で無効にすることもできます。その方法は後ほど説明します。

その後、コンテンツ位置アイコンをクリックして、画像上のテキストとボタンの表示場所を変更できます。

画像の焦点が右側にあるため、中央左側に配置することにしました。

次に、「設定」アイコンをクリックし、「ブロック」タブに切り替えます。

ここで下にスクロールして設定を見つけます。ここで、オプションで画像にパララックス効果を追加したり（「固定背景」）、繰り返し背景を使用したりできます。

スタイルアイコンに切り替えるために上にスクロールすることもできます。

ここで、オーバーレイの不透明度を0に設定して、画像がフィルターを使用しないようにすることができます。

画像の高さを変更したい場合は、「カバーの最小高さ」フィールドにピクセル単位で数値を入力できます。

画像サイズを400ピクセルに設定しました。

余白やマージン、タイポグラフィなど、境界線や影、ブロックの間隔といった他の設定も自由にカスタマイズできます。

ステップ 4: カバーブロックにブロックを追加する

これで、ヒーロー画像にさらに要素を追加する準備ができました。画像の上に「タイトルを記述」というテキストが表示されるはずです。

プロのヒント: 見出しを直接追加する代わりに、「+」ボタンをクリックして、まず別のグループブロックを追加します。このグループブロックをテキストとボタンのコンテナと考えてください。

それらをコンテナ内に配置すると、それらを1つのユニットとしてまとめて配置とスタイル設定を制御するのがはるかに簡単になります。

次に、前の手順と同様に、目的のコンテナを選択します。

それが完了したら、「+」ボタンをもう一度クリックして、見出しブロックを追加できます。

ここで、ページのヘッドラインを挿入できます。

必要に応じて、ブロック設定サイドバーでテキストの色、サイズ、寸法を変更できます。

それが終わったら、「Enter」キーを押すことができます。

この段階で、見出しのすぐ下にサブヘッドラインを追加しても構いません。

最後に、ヒーロー画像にコールトゥアクションボタンを追加できます。

これを行うには、もう一度「Enter」キーを押し、「+」ボタンをクリックして「ボタン」ブロックを選択します。

次に、ボタンのコピーを挿入するだけです。

ボタンにリンクを追加するには、ツールバーのリンクアイコンをクリックし、適切なフィールドにURLを挿入してください。

次に、矢印ボタンをクリックします。

コンバージョン率の高いボタンを作成するためのヒントやコツが必要な場合は、コールトゥアクションのベストプラクティスに関するガイドをご覧ください。

これでほぼ完了です。ヒーローイメージにさらに要素を追加したり、好みに合わせてカスタマイズしたりできます。

ヒーローセクションの外観に満足したら、「保存」をクリックするだけです。

カバーブロックは以下のようになります。

方法3：ページビルダーを使用する（カスタムランディングページ/テーマ）

ウェブサイトの設定を始めたばかりだとしましょう。または、テーマの制限に縛られることなくカスタムランディングページを作成したいと考えている場合。その場合は、SeedProdのようなヒーローセクション付きのテンプレートが付属するページビルダーの使用をお勧めします。

SeedProdは、WPBeginnerやDuplicator、OptinMonsterなどの他のブランドサイトのカスタムページ作成によく使用しているドラッグ＆ドロップページビルダーです。

使いやすいだけでなく、テーマカスタマイザー、フルサイトエディター、Gutenbergにはデフォルトで搭載されていない、多くの組み込みWordPress編集機能も提供しています。

そのため、特別な機能をテーマやランディングページに追加するためにサードパーティのプラグインをインストールするのに、時間とお金を節約することができました。

SeedProdには無料版と有料版があります。カスタムランディングページを作成するために無料版を確実に使用できますが、テンプレートとブロックのオプションはかなり限られています。そのため、AIコンテンツジェネレーターを含むより多くの機能を利用するために、有料プランへのアップグレードをお勧めします。

詳細については、SeedProdのレビューと、人気のページビルダーであるElementor、Divi、SeedProdの比較をご覧ください。

ステップ 1: SeedProd のセットアップ

SeedProd を使用するには、SeedProd アカウントで提供されている WordPress プラグインを管理画面に インストール する必要があります。プラグインがアクティブになったら、SeedProd アカウントページで取得できるライセンスキーを入力するように求められます。

入力したら、「キーの確認」ボタンをクリックするだけです。

SeedProd を使用すると、2つのオプションがあります。ランディングページまたはカスタムテーマ内の特定のページにヒーローセクションを追加できます。

ランディングページやテーマを設定するには、これらのガイドをお読みください。

• コードなしでカスタムWordPressテーマを作成する方法
• WordPressでランディングページを作成する方法
• コンバージョンするWordPressのSqueeze Pageを作成する方法
• WordPressで美しい「近日公開」ページを作成する方法

このチュートリアルの残りの部分では、メニュー販売テンプレートを使用します。

ステップ2：ヒーローセクションをカスタマイズする

テーマまたはランディングページのテンプレートを選択すると、SeedProdエディターに移動します。

SeedProdの編集インターフェースは、右側にページのプレビューがあり、左側のサイドバーでブロックの追加、ブロック/セクションのカスタマイズ、変更の元に戻す/やり直し、ページのレイヤーの表示、モバイルまたはタブレットデバイスでのサイトのプレビューができます。

SeedProdテーマにはすでにヒーローセクションが含まれているため、私たちの仕事はすでに半分終わっています。画像ファイルを置き換え、カスタマイズし、必要に応じてヒーローセクションにさらにブロックを追加するだけで済みます。

または、左側のブロックサイドバーからセクションサイドバーに切り替えることで、さらに多くのヒーローセクションデザインを見つけることができます。次に、「ヒーロー」に移動し、ページに追加したいヒーローセクションテンプレートの「+」ボタンをクリックします。

SeedProd は、それをあなたのページに挿入します。

まずヒーロー画像を編集しましょう。

これを行うには、ヒーロー画像を含む一番上のセクションをクリックします。左側のサイドバーに紫色の「編集：セクション」ボックスが表示されたら、正しいものを選択したことがわかります。

次に、サイドバーの背景画像にカーソルを合わせます。

次に、「メディアアイコン」をクリックします。その後、コンピューターまたはメディアライブラリからヒーロー画像をアップロードできます。

次に、画像に最適な背景位置を選択する必要があります。

「カスタム位置」オプションを使用すると、焦点の配置を最も細かく制御できるため、このオプションを選択します。

カスタム位置オプションを使用すると、背景を構成するいくつかの方法が提供されます。

XおよびYの位置では、画像の垂直方向および水平方向の位置を変更できます。

アタッチメント設定には、スクロール（非パララックス）と固定（パララックス）の2つのオプションがあります。

画像がヒーローセクションより小さい場合でも、セクション全体を画像で埋めたい場合は、画像をそのセクション全体に繰り返すことができます。それ以外の場合は、「繰り返しなし」を選択してください。

WordPressのヒーロー画像のサイズについては、画像がヒーローセクションに自動的に調整されるようにしたい場合は、「自動」オプションを選択できます。

これらの設定を自由に試して、画像に最適なものを見つけてください。

他にも、背景画像を暗くしてテキストを目立たせることもできます。

これを行うには、「背景を暗くする」スライダーを希望の不透明度レベルまでドラッグします。

オーバーレイする背景色を変更したい場合は、「オーバーレイカラー」のカラーピッカーボタンをクリックするだけです。

次に、お好みの色を選択するだけです。

上にスクロールして、「高度な設定」に切り替えましょう。ここでヒーローセクションにさまざまなクールなエフェクトを追加できます。

例えば、「パーティクル背景」タブを開いて、画像にアニメーションパーティクル背景を追加できます。これにより、ヒーローセクションがより印象的でユニークになります。

次に、「シェイプ区切り」メニューに移動して、ヒーローセクションの上下にカスタムシェイプ区切りを追加できます。

これを行うと、ヒーローセクションに視覚的な興味を加えることができます。さらに、下部に楽しいシェイプディバイダーを追加すると、ユーザーはランディングページをスクロールしてオファーについてさらに学ぶように促すことができます。

ステップ3：ヒーローセクションにさらにブロックを追加してカスタマイズする

ヒーロー画像が準備できたら、ヒーローセクションにさらにブロックを追加しましょう。

ここにはすでにヘッドラインブロックがあるので、それをクリックしてカスタマイズします。選択すると、左側のサイドバーに「Editing: Headline」というオレンジ色のバナーが表示されるはずです。

SeedProdの素晴らしい点は、組み込みのAIコンテンツジェネレーターがあることです。

そのため、どの見出しを使用すればよいかわからない場合は、「AIで編集」ボタンをクリックしてアイデアを出すことができます。

これで、AIを使用してコンテンツを作成できるポップアップウィンドウが表示されます。

新しいヘッドラインを完全に生成したいので、それを行うには「新しいプロンプト」ボタンをクリックします。

次に、AI にどのような種類のコンテンツを実行させたいかを伝えます。

次に、「テキストを生成」ボタンをクリックします。

AIがコンテンツを生成します。

ただし、トーンを変更したり、言語を簡略化したり、テキストを長くしたり短くしたり、50以上の言語に翻訳したりすることで、引き続き変更できます。

見出しの外観に満足したら、「挿入」をクリックするだけです。

次に、左側のサイドバーを下にスクロールできます。

ここで、テキストの配置、フォントサイズ、見出しタグを好みに合わせて変更できます。

テキストをさらに目立たせたい場合は、上にスクロールして「詳細設定」タブに切り替えることができます。

スタイルメニューで、タイポグラフィ設定の「編集」をクリックします。ここでは、フォントファミリー、行の高さ、文字間隔、文字の大文字・小文字を自由に編集できます。

見出しにテキストシャドウを追加するために、さらに少し下に移動することもできます。

ここでは、テキストをさらに目立たせるために、カスタムカラーの影を作成することにしました。

見出しの下にサブ見出しを追加するには、左側のサイドバーにある「ブロック」ボタンをクリックするだけです。

これでブロックライブラリが表示されます。

次に、「テキスト」ブロックを見出しのすぐ下にドラッグアンドドロップします。

テキストブロックの設定は、見出しブロックとほぼ同じなので、サブヘッドラインを作成するために、以前と同じ手順を繰り返すことができます。

コールトゥアクションボタンを追加するには、「ボタン」ブロックをページにドラッグアンドドロップする必要があります。

通常、サブヘッドラインのすぐ下に配置されます。

それが終わったら、適切なフィールドにボタンのコピーを入力してください。

より多くのコンテキストのために、メインボタンのコピーのすぐ下にサブテキストを追加することもできます。

次に、下にスクロールしてボタンへのリンクを追加します。

ボタンの配置やサイズも自由に調整してください。

次に、サイドバーを上に移動し、「テンプレート」タブに切り替えます。

ここでボタンのスタイルを変更して、WordPressのデザインによりよく合わせることができます。

デフォルトのテンプレートデザインが気に入らない場合は、「高度」タブに切り替えてください。

ここで、ボタンのタイポグラフィ、スタイル、色、パディング、影の効果などを変更できます。

テンプレートがうまく見えるまで、自由にカスタマイズを続けてください。

満足したら、上部にある「保存」ボタンをクリックし、「公開」を選択してページを公開してください。

これで、ページビルダーでヒーロー画像を追加する方法はすべてです。

デモサイトのヒーローセクションは以下のようになります。

方法4：ヒーローバナープラグイン+ショートコードを使用する（すべてのテーマ）

この最後の方法は、技術的にはすべてのテーマで機能しますが、ヒーローセクションが組み込まれていないクラシックテーマを使用しているユーザーに最もお勧めします。

この方法に従うには、Hero Banner Ultimateプラグインをインストールする必要があります。ステップバイステップの説明については、初心者向けのWordPressプラグインのインストール方法に関するガイドを参照してください。

ステップ1：ヒーローバナープラグインの設定

プラグインがアクティブになったら、Hero Banner » Add Hero Bannerに移動します。

その後、ヒーローバナーにタイトルを付けます。これが見出しになります。

完了したら、サブヘッドラインとして機能するテキストをビジュアルクラシックエディターに挿入します。ここで書式設定や色を自由にカスタマイズしてください。

次に、「ヒーロー バナー – 設定」セクションまでスクロールダウンします。

ここで、バナーレイアウトを選択できます。プラグイン設定内でリアルタイムでレイアウトをプレビューすることはできませんが、実際のページで後で切り替えて、最適なものを見つけるのは簡単です。

チュートリアルではレイアウト1を選択します。

バナータイプについては、ヒーロー画像として「背景画像」を選択できますが、ヒーローとして使用するフル幅の動画がある場合は「背景動画」を選択することもできます。

次に、「画像をアップロード」をクリックして、コンピューターまたはメディアライブラリから画像を追加することを忘れないでください。

この段階で、背景画像のサイズを「カバー」に設定して、画像がフル幅になるようにすることができます。

また、パララックス効果を無効にするために、背景画像の添付ファイルとして「スクロール」を選択したい場合もあります。

バナーカラー設定に到達するまで下にスクロールします。

ここで、見出しの色（タイトルカラー）とサブ見出しの色（コンテンツカラー）を変更できます。カラーピッカーツールをクリックするだけで実行できます。

さらに、画像の上にオーバーレイカラーを追加することもできます。これは、画像に対するテキストの可読性を調整するのに役立ちます。

黒色を選択し、不透明度を 0.5 に設定しました。

コールトゥアクションの設定を行いましょう。

ここで、ボタンのコピーとリンクを挿入できます。「Button – 1 Class」で色を変更することもできます。

次にすることは、上にスクロールすることだけです。

その後、「公開」をクリックします。

それでは、Hero Banner » Hero Banner に移動しましょう。これで、ヒーロー画像が作成され、プラグインがそれを表示するためのショートコードを生成したことがわかるはずです。

このショートコードを覚えておいてください。後で必要になります。

ステップ2：テーマのヘッダーセクションのCSSセレクターを見つける

ヒーロー画像を表示するには、テーマのヘッダーセクションの特定の「アドレス」を見つける必要があります。

これはCSSセレクターと呼ばれ、ヒーロー画像をどこに配置するかをプラグインに正確に伝えます。心配しないでください。自分でコードを書く必要はありません。

これを行うには、フロントエンドでウェブサイトにアクセスします。次に、ヘッダーセクションを右クリックし、「要素を検証」を選択します。

右側で、ヘッダーセクションが使用しているCSSセレクターを見つける必要があります。フロントエンドでヘッダーセクションがハイライトされるまで、すべてのコードスニペットの上にカーソルをホバーします。

例を挙げます。

コードにカーソルを合わせたときにヘッダーセクション全体がハイライトされる場合は、正しい軌道に乗っています。

次に、そのコードスニペットを右クリックし、コピー » セレクターをコピーを選択します。

それが終わったら、セレクターをテキストエディタのような安全な場所に貼り付けるか、このタブを開いたままにしておくことができます。

ステップ3：WPCodeにショートコードを追加する

次のステップは、コードスニペットプラグインであるWPCodeをインストールすることです。

技術的には、カスタムコードスニペットをテーマファイルに挿入するためにプラグインを使用する必要はありません。しかし、テーマファイルにコードを貼り付けると予期しないエラーが発生する可能性があるため、安全を期すためにこの方法を採用しました。

WPCodeは、サイトを壊すことなくカスタムコードスニペットを管理するのに非常に役立つことがわかりました。

まず、管理画面にWordPressプラグインをインストールします。プラグインがアクティブになったら、コードスニペット » + スニペットを追加に移動し、「カスタムコードを追加（新規スニペット）」を選択して、「+カスタムスニペットを追加」ボタンをクリックします。

さて、新しいコードスニペットに名前を付けましょう。簡単な名前で、「ヒーローバナーショートコード」などです。

その後、コードタイプを「PHPスニペット」に変更します。

コードプレビューボックスに、次のスニペットを貼り付けます。

echo do_shortcode('[hbupro_banner id="XXX"]'); // Replace with your own shortcode

[hbupro_banner id="XXX"] を、先ほど見た独自のヒーローバナーショートコードに変更してください。

次に、「挿入」セクションまでスクロールダウンします。

ここで、挿入方法は「自動挿入」、場所は「HTML要素の後」にする必要があります。

次に、先ほどコピーしたセレクターを「CSSセレクター」フィールドに貼り付けます。この例では#mastheadでしたが、テーマによって異なります。

それが完了したら、「非アクティブ」ボタンを切り替えて「アクティブ」にし、「スニペットを保存」ボタンをクリックできます。

それで終わりです！

ウェブサイトを表示すると、ヘッダーのすぐ下にヒーローバナー画像が表示されるはずです。

ヒーロー画像に関するよくある質問

ここに、読者がヒーローイメージについてよく尋ねる一般的な質問のリストをいくつか示します。

WordPressのヒーローイメージに最適なサイズは？

ヒーロー画像のサイズは、幅1920ピクセル、高さ400〜600ピクセルから始めるのが良いでしょう。これにより、ほとんどのデスクトップ画面でシャープに見え、縦方向のスペースを取りすぎることもありません。

ただし、最適なサイズは多くの場合、特定のWordPressテーマによって異なります。デスクトップとモバイルデバイスの両方で画像がどのように表示されるかをテストすることを常にお勧めします。

ヒーローセクションに動画を使用できますか？

もちろんです。動画の背景を使用すると、ウェブサイトがよりダイナミックになり、訪問者の注意をすぐに引きつけることができます。SeedProdのようなほとんどのページビルダーや、デフォルトのWordPressカバーブロックには、静止画像の代わりに動画の背景を追加するための簡単なオプションが含まれています。

ヒーロー画像をモバイルフレンドリーにするにはどうすればよいですか？

最新のテーマやページビルダーはレスポンシブに対応するように設計されているため、ヒーロー画像を小さい画面に合わせて自動的にスケーリングします。重要なのは、クロップしても見栄えの良い画像を選択することです。

アップロードする前に画像を圧縮することも非常に重要です。これにより、遅いモバイル接続の訪問者にとって、画像が迅速に読み込まれるようになります。

ヒーローイメージはスライダーと同じですか？

それらは似ていますが、まったく同じではありません。ヒーローイメージは通常、ウェブページの最上部にある単一の大きなバナー画像です。一方、スライダーは複数の画像やビデオを回転させます。クラシックテーマの方法で示したように、ヒーローセクション内でスライダーを使用できます。

この記事がお役に立ち、WordPress にヒーロー画像を追加する方法を学べたことを願っています。また、WordPress にプリローダーアニメーションを追加する方法に関するガイドや、デジタル製品の作成と販売に最適なツールの専門家による選択も参照してください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。