Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressでヒーロー画像を追加する方法(4つの簡単な方法)

多くのサイトでは、ホームページの上部にヒーロー画像と呼ばれる人目を引く大きな画像を使用しています。そして、人気のサイト・ビルダーであるWordPressでは、この機能をサイトに追加することができます。

とはいえ、多くのユーザーはその正確な方法について助けを必要としています。WordPressのヒーロー画像のサイズや、WordPressカスタマイザーやフルサイトエディターでヒーロー画像を適切に設定する場所について、たくさんの質問が寄せられています。

率直に言って、長年サイトを構築してきた私たちは、WordPressのビルトイン機能を使用するよりも、ヒーロー画像を追加するためのより良い方法を発見しました。

このガイドでは、いくつかの方法でWordPressにヒーロー画像を追加する方法を紹介します。

How to Add a Hero Image in WordPress

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

WordPressサイトにヒーロー画像を追加する前に、訪問者の注目を集める画像を作成する必要があります。優れたヒーローセクションは、あなたのサイトがすべてであることを示す魅力的な画像から始まります。

Canvaは、サイトのグラフィックをデザインするための人気のツールです。使い方は簡単で、ヒーロー画像を作成するためのテンプレートがたくさん用意されています。Canvaのファンでない方は、Canvaの代替ツールのリストをご覧ください。

ヒーロー・イメージを作る際には、いくつかの点に留意したい。

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

一般的なWordPressのヒーロー画像のサイズは、横1920ピクセル×縦400~600ピクセル(場合によってはそれ以上)です。しかし、これはWordPressのテーマによって変わることがあります。

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

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

WPBeginner home page

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

同じ分野の他のサイトでヒーロー・セクションの例を見るのは良いアイデアです。これは、あなた自身のデザインのためのアイデアを与えることができます。WordPressのサイト例にあるエントリーの中には、素晴らしいインスピレーションを与えてくれるものもあります。

Houston Zoo

それでは、実際にヒーロー画像を追加する方法を見ていきましょう。WordPressでは、いくつかの異なる方法でこれを行うことができますが、どれを使うべきかは、サイトのデザインに使用している機能やプラグインによって異なります。

以下のクイックリンクからお好きな方法にお進みください:

プロのアドバイス 苦労せずに美しいサイトが必要ですか?WPBeginnerプロサービスのデザインエキスパートは、コンバージョンの高いビジネスサイト、オンラインストア、ブログなどをほとんど時間をかけずに作成することができます!

方法1:テーマカスタマイザーを使う(クラシックテーマのみ)

このチュートリアルのために調査しているとき、クラシックWordPressテーマにヒーロー画像を追加するのは必ずしも簡単ではないことにImagelyは気づきました。ヒーローセクションがビルトインされているものもあれば、そうでないものもあるため、そのプロセスはテーマによって大きく異なります。

例えば、Sydneyテーマ。このテーマには、すぐに使えるヒーローセクションが付属しており、物事をより簡単にしてくれます。

Sydney Pro

既存のサイトにヒーローを追加しようとしているが、テーマにはそのためのビルトイン機能がない場合、これはイライラさせることがあります。

新規にテーマを選ぶことに抵抗がない場合は、ヒーローセクションがビルトインされているものに変更することをお勧めする。

お勧めのテーマをお探しなら、専門家が選ぶ市場で最も人気のあるWordPressテーマをご覧ください。さらに良い方法として、ヒーローセクションを持つテーマでページビルダーを使うこともできる。

大きな変更を行う前に、ステージングサイトを使用して新しいテーマを徹底的にテストすることを常にお勧めします。そうすることで、あなたのサイトにとって本当に〜してもよいですか?

この方法が本当に〜してもよいですか?

現在のクラシックテーマで満足ですか?問題ありません。ここでは、プラグインを使ってヒーローセクションを追加する方法を紹介します。この方法はどのテーマでも使えるので、サイト全体のデザインを一新することなく、魅力的なヒーロー画像を作成することができます。

Sydneyまたは同様のテーマを使用している場合、テーマ・カスタマイザーからヒーロー画像をカスタムすることができます。WordPressダッシュボードの 外観 ” カスタマイズから始められます。

注: ダッシュボードにテーマ・カスタマイザーがない場合は、ブロックテーマを使っている可能性があるので、方法2に進んでください。

The Hero area in the Sydney theme customizer

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

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

The Hero Area menus in Sydney theme

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

最初の2つを使うだけで、ヒーロー・セクションを追加するには十分だからだ。

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

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

Choosing full-screen hero slider in Sydney theme

全画面スライダー、動画、画像、ヘッダーなしから選択できます。

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

ヒーロー・エリア・メニューに戻って、「ヒーロー・スライダー」を選択する。

ここで、’First Slide’タブを開き、’Select image’ボタンをクリックする。

WordPressのメディアライブラリが開きますので、新しい画像をアップロードするか、ヒーローセクション用に既存の画像を選択します。

Uploading an image to the hero slider in Sydney theme

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

変更した内容が自動的にページプレビューに反映されるはずです。

Adding a headline and subheadline to the hero slider in Sydney theme

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

そうでない場合は、「スライダーボタン」メニューまでスクロールしてください。

ここでは、コールトゥアクションボタンのURLとテキストを変更することができます。

Adding a link to the hero image button in Sydney theme

その後、もう一度下にスクロールして「スライダー設定」タブに移動する。

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

Customizing the Sydney hero slider settings

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

次に「一般」をクリックする。

Opening the General menu of Sydney theme

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

ここで、『ボタン』をクリックすればいい。

Clicking on the Buttons menu in Sydney theme customizer

ここで、「初期設定」と「マウスオーバー状態」セクションまでスクロールダウンし、ボタンの状態に応じて色を変更することができます。

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

Changing the button color in Sydney theme

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

いずれにせよ、これがシドニー・テーマで作られたヒーローの画像だ:

A hero image made with the Sydney theme

方法2:フルサイトエディターを使う(ブロックテーマのみ)

ブロックテーマを使っているなら、フルサイトエディターのカバーブロックを使えば、WordPressで簡単にヒーロー画像を作成できる。プラグインは必要ない。

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

まず、WordPress管理画面の外観 ” エディター にアクセスします。

Selecting the Full-Site Editor from the WordPress admin panel

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

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

その場合は、ページの右側にあるテーマのプレビューをクリックしてください。

Editing the homepage with the full site editor

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

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

ヒーローセクションは通常、フォールド(訪問者がサイトに降り立ったときに外観されるページの上部)の上に配置されるため、適切な場所に配置されているかどうかを確認する必要があります。ヒーローセクションは通常、ヘッダーのすぐ下にあります。

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

私たちの場合は、すでにホームページにあったブロックを削除するだけです。同じことをしたい場合は、ページの左側にある「リスト表示」ボタンをクリックしてください。

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

Deleting existing blocks to make room for the hero image in full site editor

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

次に、三点ボタンをクリックし、『前に追加』を選ぶ。これで、そのブロックのすぐ上、ヘッダー・セクションの下にブロックが追加される。

Adding a block before a certain group of blocks in the full site editor

この段階で、ヒーローと思われる部分に外観される「+」ボタンをクリックすることができる。

グループブロックをここに追加する必要があります。これにより、必要なときにヒーロー画像、テキスト、ボタン、その他の要素を個別ブロックとして管理することができます。

Adding a group block for the hero section in full site editor

ブロックを追加するコンテナを選択できます。

デモンストレーションのために、基本的なグループ・コンテナを選んだ。

Choosing a group block layout in full site editor

次に、グループブロック内の「+」ボタンをクリックします。

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

Adding a cover block to the group block in full site editor

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

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

Uploading an image to the cover block in full site editor

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

ステップ3:カバーブロックの画像を設定する

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

次に、「整列」ボタンをクリックし、「全幅」を選択する。

Making the image full width in full site editor

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

その場合は、後で無効化することができる。

Changing the image duotone in full site editor

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

画像の焦点は右側にあるので、中央左側を使うことにした。

Changing the content position for the cover block in full site editor

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

ここで、設定までスクロールダウンします。ここでは、オプションで画像に視差効果を追加したり(「固定背景」)、繰り返し背景を使用することができます。

Configuring the scroll effect for the cover block in full site editor

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

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

Changing the image's overlay opacity in full site editor

画像の高さを変更したい場合は、’Minimum Height of Cover’フィールドにピクセル単位で数値を挿入することができます。

画像を400ピクセルに設定することにした。

Changing the image's minimum height in full site editor

枠線やシャドウ、ブロック間隔、パディングやマージン、タイポグラフィなど、その他の設定も自由にカスタマイズしてください。

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

これで、ヒーロー画像にさらに要素を追加する準備が整いました。

画像の上に「タイトルを書く」というテキストがあることは、もうお分かりでしょう。本当に〜してもよいですか?

このブロックを使って、後でCoverブロックに追加する要素をすべてまとめたい。こうすることで、必要なときに個別ブロックとしてカスタマイズできます。

Adding a group block for the hero section content in full site editor

次に、前のステップと同様に、希望のコンテナを選択する。

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

Adding a heading to the hero section in full site editor

次に、ページの見出しを挿入します。

お好みにより、ブロック設定のサイドバーでテキストの色、サイズ、寸法を自由に変更してください。

Writing and configuring the heading block in full site editor for the hero section

そうしたら、『Enter』キーを押してください。

この段階で、見出しのすぐ下に自由に小見出しをつける。

Adding a subheadline for the hero section in full site editor

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

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

Adding a call to action button in full site editor for the hero section

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

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

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

Adding a link to the call to action button for the hero section in full site editor

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

これだけです。ヒーロー画像にさらに要素を追加したり、好みに合わせてカスタマイズすることもできます。

Saving changes to the hero section in full site editor

ヒーロー・セクションの見た目に満足したら、「保存」をクリックします。

カバーブロックはこんな感じ:

Example of a hero image made with full site editor

方法3:ページビルダーを使う(カスタムランディングページ/テーマ)

あなたがサイトを立ち上げたばかりの段階だとしましょう。または、テーマの制限にとらわれずにカスタマイザーでランディングページを作成したいと考えているとします。その場合、SeedProdのようなヒーローセクションのテンプレートが付属しているページビルダーを使用することをお勧めします。

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

使いやすい一方で、テーマカスタマイザー、フルサイトエディター、Gutenbergにはデフォルトで備わっていないWordPress編集機能をビルトインしている。

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

SeedProdには無料版と有料版がある。無料版でもカスタム・ランディングページを作成することはできますが、テンプレートやブロックの設定はかなり制限されています。そのため、AIコンテンツジェネレータを含む、より多くの機能のために有料プランにアップグレードすることをお勧めします。

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

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

SeedProdを使用するには、SeedProdアカウントで提供されているWordPressプラグインを管理エリアにインストールする必要があります。プラグインが有効化されると、ライセンスキーの入力を求められます。ライセンスキーはSeedProdアカウントページから取得できます。

入力後、「Verify key」ボタンをクリックします。

Entering the SeedProd license key

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

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

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

The SeedProd menu sales template

ステップ2:ヒーローセクションのカスタマイズ

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

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

The SeedProd interface

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

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

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

Choosing a hero section in SeedProd

まずはヒーローのイメージを変えてみよう。

これを行うには、ヒーロー画像を含む一番上のセクションをクリックします。左サイドバーに紫色の「Editing:左サイドバーに「セクション」ボックスが表示されます。

Selecting a section in SeedProd

サイドバーの背景画像にマウスオーバーしてください。

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

Uploading a background image to SeedProd

次に、画像に最適な背景の位置を選びます。

カスタム位置」オプションが、フォーカルポイントの位置を最もコントロールできることがわかったので、このオプションを選択する。

Changing the background position in SeedProd

カスタムポジションオプションは、背景を設定するいくつかの方法を提供します。

XとYの位置については、画像を垂直方向と水平方向にどのように配置するかを変更できます。

添付ファイルの設定には2つのオプションがあります:スクロール(視差なし)と固定(視差あり)です。

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

WordPressのヒーロー画像のサイズについては、画像を自動的にヒーローセクションに合わせたい場合は、「Auto」オプションを選択することができます。

Customizing the background image position in SeedProd

あなたのイメージに最適な設定を自由に試してみてください。

もうひとつできることは、背景画像を薄暗くして、テキストをより目立たせることだ。

これを行うには、’Dim Background’スライダーをお好みの不透明度までドラッグします。

Dimming the background color in SeedProd

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

そして、好みの色を選ぶだけ。

Changing the overlay background color in SeedProd

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

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

Adding an animated background in SeedProd

次に、「シェイプ区切り」メニューで、ヒーロー・セクションの上側または下側にカスタマイザーを追加することができます。

こうすることで、ヒーローセクションに視覚的な面白さを加えることができます。さらに、下部に楽しい形の区切りを追加すれば、ユーザーにランディングページをスクロールしてもらい、オファーについてもっと知ってもらうことができます。

Adding a custom shape divider in SeedProd

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

ヒーロー画像の準備ができたので、ヒーロー・セクションにブロックを追加しよう。

すでに見出しのブロックがあるので、それをクリックしてカスタマイズする。選択すると、左サイドバーに「Editing:見出し」。

Editing the headline in SeedProd

SeedProdのクールな点は、AIコンテンツジェネレータがビルトインされていることだ。

どんな見出しにするか本当に〜してもよいですか?

Editing the SeedProd headline with AI

ポップアップウィンドウが表示され、AIを使ってコンテンツを書くことができます。

まったく新しい見出しを作成したいので、「新規プロンプト」ボタンをクリックしてそれを実行する。

Inserting a new prompt to SeedProd AI

次に、AIにどのようなコンテンツをやりたいかを伝えるだけだ。

そして、「テキストをジェネレータする」ボタンをクリックする。

Generating AI text with SeedProd

そして、AIがあなたの代わりにコンテンツを生成する。

しかし、口調を変えたり、言葉を簡略化したり、文章を長くしたり短くしたり、さらには50以上の言語に翻訳したりすることで、それを変えることはできる。

見出しの見栄えに満足したら、「インサーター」をクリックする。

Inserting AI-generated text with SeedProd

左サイドバーをスクロールしてください。

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

Customizing the text alignment in SeedProd

テキストをさらに目立たせたい場合は、上にスクロールして「詳細」タブに切り替えてください。

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

Changing the text typography in SeedProd

もう少し下に移動して、見出しにテキスト・シャドウを追加することもできる。

ここでは、テキストをより際立たせるために、カスタムカラーのシャドウを作成することにしました。

Adding a shadow to the headline in SeedProd

見出しの下に小見出しを追加するには、左サイドバーの「ブロック」ボタンをクリックすればよい。

これでブロックのライブラリーが表示される。

Going back to the blocks section in SeedProd sidebar

あとは、「テキスト」ブロックを見出しのすぐ下にドラッグ&ドロップするだけだ。

テキスト」ブロックの設定は「見出し」ブロックとよく似ているので、前と同じ手順を繰り返して小見出しを作成することができる。

Adding a text block in SeedProd

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

通常は小見出しのすぐ下に配置される。

Adding a button block in SeedProd

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

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

Changing the button text in SeedProd

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

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

Changing the button link in SeedProd

サイドバーに戻り、「テンプレート」タブに切り替える。

ここでボタンのスタイルを変更し、WordPressのデザインによりマッチさせることができます。

Changing the button style in SeedProd

初期設定のテンプレートが気に入らない場合は、「詳細設定」タブに切り替えてください。

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

Configuring the button settings in SeedProd

見栄えが良くなるまで、自由にカスタマイザーを続けてください。

満足したら、上部の「保存」ボタンをクリックし、「公開する」を選択してページを公開します。

Saving changes in SeedProd

ページビルダーでヒーロー画像を追加する方法はすべて以上だ。

デモサイトのヒーローセクションはこんな感じです:

Hero image example made with SeedProd

方法4:ヒーローバナープラグイン+ショートコードを使う(すべてのテーマ)

この最後の方法は、技術的にはすべてのテーマで使えますが、ビルトイン・ヒーロー・セクションのないクラシック・テーマを使っている人に最もお勧めします。

この方法を実行するには、Hero Banner Ultimateプラグインをインストールする必要があります。ステップバイステップの手順については、初心者のためのWordPressプラグインのインストール方法をご覧ください。

ステップ1:ヒーローバナープラグインのセットアップ

プラグインを有効化したら、Hero Banner ” Add Hero Bannerに進みます。

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

完了したら、ビジュアルクラシックエディターで小見出しとなるテキストを挿入します。ここで書式や色を自由に変更してください。

Writing the banner headline and subheadline with Hero Banner plugin

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

ここでバナーレイアウトを選択できます。残念ながら、レイアウトをリアルタイムでプレビューすることはできませんが、後でいつでも変更することができます。チュートリアルではレイアウト1を選択します。

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

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

Uploading the hero image to the Hero Banner plugin

この段階で、背景画像のサイズを「Cover」に設定し、画像を全幅にすることができます。

また、パララックス効果を無効化するために、背景画像の添付ファイルには「Scroll」を選択してください。

Configuring the background image size with Hero Banner plugin

Banner Color Setting(バナー色設定)に達するまで下へ進む。

ここで見出しの色(タイトルカラー)と小見出しの色(コンテンツカラー)を変更できます。カラーピッカーツールをクリックするだけです。

Changing the text color for the background image with Hero Banner plugin

さらに、画像の上にオーバーレイカラーを追加すると、画像に対するテキストの読みやすさを調整するのに便利です。

色は黒、不透明度は0.5に決めた。

Changing the background image overlay color in Hero Banner plugin

コール・トゥ・アクションの設定をしてみましょう。

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

Adding a button link to the Hero Banner plugin

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

その後、『公開する』をクリックする。

Publishing the hero image with Hero Banner plugin

Hero Banner ” Hero Bannerに行ってみましょう。ヒーロー画像が作成され、それを表示するためのショートコードがプラグインによって生成されていることが確認できるはずです。

このショートコードは後で必要になるので、メモしておこう。

Copying the Hero Banner shortcode

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

ヒーロー画像を表示するには、ヘッダー・セクションの正しいCSSセレクタを知る必要があります。これにより、ヘッダーのすぐ下に画像を追加することができます。

これを行うには、フロントエンドでサイトにアクセスします。そして、ヘッダーセクションを右クリックし、‘Inspect’を選択します。

Using the Inspect tool to find the header's CSS selector

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

例を挙げよう:

Finding the code for the header section with the Inspect tool

マウスオーバーでヘッダーセクション全体がハイライトされれば、正しい方向に進んでいることになる。

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

Copying the header's CSS selector with the Inspect tool

そうしたら、セレクターをテキストエディターなど安全な場所に貼り付けるか、このタブを開いたままにしておく。

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

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

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

WPCodeは、サイトを壊すことなくカスタマイザーコードを管理するのにとても便利です。

注: WPCodeには無料版もありますが、このチュートリアルでHTML要素の後にコード・スニペットを挿入するには、プレミアムWPCodeプラグインが必要です。

まず、管理エリアにWordPressプラグインをインストールします。プラグインを有効化したら、Code Snippets ” + Add Snippetに 移動し、 ‘Add Your Custom Code (New Snippet)’を選択し、’+ Add Custom Snippet’ボタンをクリックします。

Adding a new custom code snippet in WPCode

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

その後、コードタイプを「PHP Snippet」に変更する。

Adding the Hero Banner shortcode to WPCode

コード・プレビュー・ボックスに、以下のスニペットを貼り付ける:

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

本当に〜してもよいですか?[hbupro_banner id="XXX"]を、先ほど見た独自のヒーローバナー・ショートコードに変更してください。

次に、「インサーター」セクションまでスクロールダウンする。

ここでは、挿入方法は「自動挿入」、場所は「HTML要素の後」とする。

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

そうしたら、「Inactive」ボタンを「Active」に切り替えて、「Save Snippet」ボタンをクリックする。

Placing the Hero Banner shortcode below the header with WPCode

それで終わりだ!

あなたのサイトを表示すると、ヘッダーのすぐ下にヒーローバナー画像が表示されているはずです:

Hero image made with Hero Banner plugin

この投稿が、WordPressでヒーロー画像を追加する方法を学ぶのにお役に立てば幸いです。また、WordPressにプリローダーアニメーションを追加する方法や、専門家が選ぶデジタル製品の作成と販売に最適なツールもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

コメント

  1. おめでとうございます!この記事の最初のコメント投稿者になるチャンスです。
    ご質問やご提案がおありですか?ディスカッションを始めるためにコメントを残してください。

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。