【第18回】メインビジュアルを変更
メインビジュアルは、幅 1024px で表示されていますが、ウィンドウ幅一杯までバナーイメージで表示するように変更します。この機能を使うには、プラグインが必要になります。
- [プラグイン]-[新規追加] をクリックします。
- [ultimate addons] と検索ボックスに入力して検索します。
- 「Ultimate Addons for Gutenberg」をインストールし有効化します。
- [固定ページ一覧] から「ホーム」を選択して、[セクションを停止] にある「アイキャッチ画像を表示しない」にチェックを付けます。また、[コンテンツのレイアウト：全幅/ストレッチ] にします。
- [ブロックの追加(+マーク)] をクリックし、Ultimate Addons で追加された Sectionブロックを選択します。
- 先頭のカラムブロックを選択し、追加した Sectionブロックの中にドラッグして移動します。
- Sectionブロックを選択し、[Layout]-[幅] を [1064] にします。
- Sectionブロックの詳細設定ボタンをクリックし、[前に挿入] で新しい Sectionブロックを挿入します。
Layoutは [Content Width：全幅(Full Width)] とし、[Inherit Inner Width from Theme] を有効にします。
[Background]-[Background Type：画像] にします。
[Select Background Image] をクリックし、メディアライブラリから「main_visual.jpg」を選択します。
下記の設定をします。
[Image Position：Top Center(上部中央)]
[Size：Contain]
[Spacing(間隔)] をクリックし、単位を [%] にして Padding の上下左右をそれぞれ、[36 0 0 0] とします。 - 更新ボタンをクリックし、ブラウザでトップページの表示を確認しましょう。
