これから Nishiki Pro
テーマを使うなら1度は確認しよう!

Nishiki テーマおすすめ設定 テーマおすすめ設定を見る
  1. ホーム
  2. マニュアル
  3. Nishiki Pro:トップページのメインビジュアルをブロックエディターで作って表示する方法

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

「コンテンツ作成」画面を開こう

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

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

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

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

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

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

メインビジュアル用のコンテンツを作ってください

コンテンツ作成例

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

このページが役に立ちましたら、ぜひシェアしてください。

WordPress テーマ Nishiki Pro

「ウェブサイト運営に本当に必要とされる機能」をテーマ内にまとめて搭載した WordPress テーマです。

ブロックエディター機能を強化し、これまでの WordPress では難しかったコンテンツが簡単に作れます。

ブログ、ポートフォリオ、コーポレートサイト、ビジネスサイトなど、様々な目的のウェブサイトに対応できるテーマです。