このページでは、トップページにメインビジュアルを表示する方法を解説しています。

「再利用コンテンツ」画面を開こう

まず、ワードプレスの管理画面から「再利用コンテンツ」を選択します。

メインビジュアルを作ろう

再利用コンテンツの画面で、メインビジュアル用のコンテンツを作りましょう。

「新規追加」ボタンを押します。

下の画像のように、ブロックエディターの編集画面が表示されますので、メインビジュアル用のコンテンツを作りましょう。

タイトルは、後で見たときに自分でわかるようにしておけば、何でもいいと思います。

コンテンツ作成例

例えば、下の画像ではタイトル名を「メインビジュアル（トップページ用）」とし、「カバー」「段落」「ボタン（Nishiki Blocks Pro）」ブロックを使って、背景には動画を設定しています。

さらに、ブロックの配置を「全幅」にすると、画面サイズ 100% で表示されます。

「埋め込み」ブロックを使えば、YouTube 動画の埋め込みもできますので、いろいろ作ってみましょう。

次にコンテンツを作ったら「公開する」ボタンを押しましょう。

これで作成完了です。もちろん、あとで編集もできます。

次は、作ったメインビジュアルをトップページに表示する設定をしましょう。

トップページを「固定ページ」に設定しよう

まず、トップページを「固定ページ」に設定しているかどうかを確認してください。

以下のページが参考になります。

トップページを「固定ページに設定する」方法トップページをブログのような最新の投稿を新しい順から並べる方法の他に、固定ページを設定して自由にコンテンツを作ることができます。support.animagate.com

固定ページにメインビジュアルを設定しよう

次に、トップページに設定した「固定ページ」を選び、ブロックエディターの編集画面を開いてください。

編集画面を下にスクロールすると「コンテンツを追加する」という項目があります。

この項目の中にある「ページタイトルヘッダーの上」または「ページタイトルヘッダーの下」どちらでもいいので、選択肢の中から、先ほど作成したメインビジュアルを選んで保存してください。

以上でトップページにメインビジュアルが表示されます。

試しに設定すると、下のようになります。

おまけ：トップページにサイドバーを表示したい場合

ブロックエディターの編集画面内には、ページのレイアウトを変更する「ページ属性」があります。この中から好きなテンプレートを選んでください。

メインビジュアル + 選択したテンプレートが適用されます。