Tipsカテゴリー

トップページ
WordPressで作る簡単Webサイト
【第18回】メインビジュアルを変更

【第18回】メインビジュアルを変更

連載講座：WordPressで作る簡単Webサイト

メインビジュアルは幅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] とします。
更新ボタンをクリックし、ブラウザでトップページの表示を確認しましょう。