誰でも簡単! WordPressで作るホームページ

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

メインビジュアルは、幅 1024px で表示されていますが、ウィンドウ幅一杯までバナーイメージで表示するように変更します。この機能を使うには、プラグインが必要になります。

  1. [プラグイン]-[新規追加] をクリックします。
  2. [ultimate addons] と検索ボックスに入力して検索します。
  3. 「Ultimate Addons for Gutenberg」をインストールし有効化します。
  4. [固定ページ一覧] から「ホーム」を選択して、[セクションを停止] にある「アイキャッチ画像を表示しない」にチェックを付けます。また、[コンテンツのレイアウト:全幅/ストレッチ] にします。
  5. [ブロックの追加(+マーク)] をクリックし、Ultimate Addons で追加された Sectionブロックを選択します。
  6. 先頭のカラムブロックを選択し、追加した Sectionブロックの中にドラッグして移動します。
  7. Sectionブロックを選択し、[Layout]-[幅] を [1064] にします。
  8. 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] とします。
  9. 更新ボタンをクリックし、ブラウザでトップページの表示を確認しましょう。

 │